/* ==========================================================================
   Orfa AI — product UI tokens (reference implementation: Orfa Extract; shared by Extract, Know and future Orfa products) (CSS custom properties)
   Source of truth: extract.orfa.ai production CSS (Tailwind v4 @theme), captured 2 Nov 2026.
   Names are unchanged from the live build.
   Status tags:  (no tag) = EXISTING, unchanged
                 [STD]    = STANDARDIZED (picked from existing variants)
                 [NEW]    = added to fill a gap (needs approval)
                 [A11Y?]  = proposed accessibility adjustment — NOT applied, see audit
   ========================================================================== */

:root {
  /* ---- Primitive colors ---- */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-black: #000;
  --color-white: #fff;

  --color-brand-300: #66cff9;
  --color-brand-400: #33bff7;
  --color-brand-500: #00b0f0;
  --color-brand-600: #008dc0;

  --color-success-50:  #ecfdf3;
  --color-success-300: #6ce9a6;
  --color-success-500: #12b76a;
  --color-success-600: #039855;
  --color-error-50:  #fef3f2;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-warning-50:  #fffaeb;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-orange-400:  #fd853a;

  /* ---- Typography ---- */
  --font-outfit: Outfit, sans-serif;
  --font-sans: Outfit, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: .625rem;  --text-2xs--line-height: .875rem;      /* 10/14 — kbd */
  --text-xs: .75rem;    --text-xs--line-height: calc(1/.75);    /* 12/16 */
  --text-sm: .875rem;   --text-sm--line-height: calc(1.25/.875);/* 14/20 */
  --text-base: 1rem;    --text-base--line-height: 1.5;          /* 16/24 */
  --text-2xl: 1.5rem;   --text-2xl--line-height: calc(2/1.5);   /* 24/32 — KPI value (mono) */
  --text-3xl: 1.875rem; --text-3xl--line-height: 1.2;           /* 30/36 — hero number (mono) */

  --text-h1: 24px; --text-h1--line-height: 32px; --text-h1--font-weight: 700; --text-h1--letter-spacing: -.01em;
  --text-h3: 15px; --text-h3--line-height: 20px; --text-h3--font-weight: 600;
  --text-body: 14px;  --text-body--line-height: 21px;
  --text-small: 13px; --text-small--line-height: 18px;
  --text-label: 13px; --text-label--line-height: 18px; --text-label--font-weight: 500;
  --text-overline: 11px; --text-overline--line-height: 16px; --text-overline--font-weight: 600; --text-overline--letter-spacing: .06em;
  --text-micro: 11px;
  --text-theme-sm: 14px; --text-theme-sm--line-height: 20px;  /* [STD] alias of --text-sm (identical values) */
  /* [NEW] marketing display — only for landing hero; derived from h1 weight/tracking at Tailwind 5xl size */
  --text-display: 48px; --text-display--line-height: 56px; --text-display--font-weight: 700; --text-display--letter-spacing: -.01em;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --leading-tight: 1.25;

  /* ---- Spacing & sizing ---- */
  --spacing: .25rem;                 /* 4px base unit */
  --spacing-header: 4rem;            /* 64px — app + marketing header */
  --spacing-sidebar: 18rem;          /* 288px — expanded sidebar */
  --spacing-sidebar-collapsed: 4.5rem; /* [NEW] 72px — collapsed rail (12 + 48 + 12) */
  --spacing-control: 38px;           /* buttons, header controls */
  --spacing-row: 52px;               /* table body row */
  --container-xs: 20rem;
  --container-2xl: 42rem;            /* settings / form column */
  --container-3xl: 48rem;            /* page description measure */
  --container-5xl: 64rem;            /* focused flows (upload) */
  --breakpoint-2xl: 1536px;          /* main max width */

  /* ---- Radius ---- */
  --radius-sm: .25rem;   /* 4  — kbd, sort buttons */
  --radius-md: .375rem;  /* 6  — checkbox, sidebar group toggle */
  --radius-lg: .5rem;    /* 8  — sm controls, menu items, icon tile 32 */
  --radius-xl: .75rem;   /* 12 — icon tile 40 */
  --radius-2xl: 1rem;    /* 16 — stat card (see inconsistency I-07) */
  --radius-control: 10px;/* md controls, inputs */
  --radius-card: 14px;   /* cards, tables */

  /* ---- Borders ---- */
  --border-width-thin: 1.5px; /* checkbox */

  /* ---- Elevation ---- */
  --shadow-theme-xs: 0px 1px 2px 0px #1018280d;
  --shadow-theme-md: 0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;
  --shadow-theme-lg: 0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;
  --blur-sm: 8px;

  /* ---- Motion ---- */
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --duration-fab: .2s;      /* FAB color */
  --duration-layout: .3s;   /* sidebar slide, main margin */

  /* ---- Z-index ---- */
  --z-index-fab: 99990;
  --z-index-overlay: 99999;
  --z-index-header: 99980;  /* [NEW] header currently uses z-overlay — see I-11 */

  /* ---- Semantic (light) ---- */
  --background: var(--color-gray-50);
  --foreground: var(--color-gray-800);
  --card: #fff;
  --secondary: var(--color-gray-100);
  --secondary-foreground: var(--color-gray-800);
  --muted-foreground: var(--color-gray-500);
  --border: var(--color-gray-200);
  --input: var(--color-gray-200);
  --ring: var(--color-brand-500);
  --fg-control: var(--color-gray-600);
  --surface-sunken: var(--color-gray-50);
  --track: var(--color-gray-100);
  --tag-success: var(--color-success-50);
  --tag-success-foreground: var(--color-success-600);
  --tag-failure: var(--color-error-50);
  --tag-failure-foreground: var(--color-error-600);
  --tag-attention: var(--color-warning-50);
  --tag-attention-foreground: var(--color-warning-600);
  --color-border: var(--border);
  --on-solid: var(--color-white);            /* .text-on-solid */
  --tooltip: var(--color-black);             /* .bg-tooltip */
  --focus: var(--color-brand-300);           /* .border-focus */
  --focus-ring: color-mix(in oklab, var(--color-brand-500) 10%, transparent); /* .ring-focus-ring */
  --nav-active-bg: color-mix(in oklab, var(--color-brand-500) 12%, transparent); /* [NEW] light value not in captured CSS */
  --nav-active-fg: var(--color-brand-600);   /* [NEW] light */
  --nav-inactive-fg: var(--color-gray-700);  /* from group-hover rule */
  --nav-hover-bg: var(--color-gray-100);
  --popover: #fff;                           /* [STD] floating surfaces */
  --popover-border: var(--color-gray-200);
  --scrim: color-mix(in oklab, var(--color-black) 50%, transparent); /* [NEW] drawer/modal backdrop */
}

/* [NEW] explicit light scope — lets a light panel sit inside .dark (used for light/dark previews) */
.light {
  --background: var(--color-gray-50);
  --foreground: var(--color-gray-800);
  --card: #fff;
  --secondary: var(--color-gray-100);
  --secondary-foreground: var(--color-gray-800);
  --muted-foreground: var(--color-gray-500);
  --border: var(--color-gray-200);
  --input: var(--color-gray-200);
  --ring: var(--color-brand-500);
  --fg-control: var(--color-gray-600);
  --surface-sunken: var(--color-gray-50);
  --track: var(--color-gray-100);
  --tag-success: var(--color-success-50);
  --tag-success-foreground: var(--color-success-600);
  --tag-failure: var(--color-error-50);
  --tag-failure-foreground: var(--color-error-600);
  --tag-attention: var(--color-warning-50);
  --tag-attention-foreground: var(--color-warning-600);
  --color-border: var(--border);
  --on-solid: var(--color-white);            /* .text-on-solid */
  --tooltip: var(--color-black);             /* .bg-tooltip */
  --focus: var(--color-brand-300);           /* .border-focus */
  --focus-ring: color-mix(in oklab, var(--color-brand-500) 10%, transparent); /* .ring-focus-ring */
  --nav-active-bg: color-mix(in oklab, var(--color-brand-500) 12%, transparent); /* [NEW] light value not in captured CSS */
  --nav-active-fg: var(--color-brand-600);   /* [NEW] light */
  --nav-inactive-fg: var(--color-gray-700);  /* from group-hover rule */
  --nav-hover-bg: var(--color-gray-100);
  --popover: #fff;                           /* [STD] floating surfaces */
  --popover-border: var(--color-gray-200);
  --scrim: color-mix(in oklab, var(--color-black) 50%, transparent); /* [NEW] drawer/modal backdrop */
  color-scheme: light;
}

.dark {
  --background: #000;
  --foreground: #ffffffe6;
  --card: #ffffff08;
  --secondary: #ffffff0d;
  --secondary-foreground: #ffffffe6;
  --muted-foreground: var(--color-gray-400);
  --border: #ffffff1a;
  --input: #ffffff1a;
  --ring: var(--color-brand-500);
  --fg-control: var(--color-gray-300);
  --surface-sunken: #ffffff05;
  --track: var(--color-gray-800);
  --tag-success: #12b76a26;
  --tag-success-foreground: var(--color-success-500);
  --tag-failure: #f0443826;
  --tag-failure-foreground: var(--color-error-500);
  --tag-attention: #f7900926;
  --tag-attention-foreground: var(--color-orange-400);
  --nav-active-bg: #00b0f01f;
  --nav-active-fg: var(--color-brand-400);
  --nav-inactive-fg: var(--color-gray-300);
  --nav-hover-bg: #ffffff0d;
  --popover: var(--color-gray-900);          /* [STD] from chart tooltip (dark) */
  --popover-border: var(--color-gray-800);
  --scrim: color-mix(in oklab, var(--color-black) 60%, transparent); /* [NEW] */
  color-scheme: dark;
}

/* ---- [A11Y?] Proposed adjustments — commented out until approved ----
:root {
  --input: var(--color-gray-400);            A-02  (light 2.46:1 → 2.58:1 on white; gray-500 for full 3:1)
  --ring: var(--color-brand-600);            A-05  focus outline on light 2.37 → 3.61:1
  --link: #0076a4;                           A-03  brand link text on light (Orfa brand cyan-600)
}
.dark {
  --input: #ffffff59;                        A-02  1.21 → 3.00:1 against #000
}
.btn-primary { background: #0076a4; }        A-01  white label 2.48 → 5.09:1
*/