/* ============================================================================
   FoundryAI — Foundry Design System · Design Tokens (FAI-P07-02)
   ----------------------------------------------------------------------------
   "Precision Clarity": light-first clean SaaS, deep-teal primary, burnished
   amber reserved for AI moments. Tokens are CSS custom properties so a later
   dark theme is a value remap only (UI_UX_PLAN §3.2).
   Every color that carries meaning is paired with a numeric/text label in the
   components that consume it (never color alone).
   ========================================================================== */

:root {
    /* -- Canvas & surfaces ------------------------------------------------- */
    --fai-canvas: #F6F8FA;
    --fai-surface: #FFFFFF;
    --fai-surface-2: #F1F4F8;
    --fai-surface-3: #E9EDF3;

    /* -- Border (hairline 1px; cards = border + soft shadow, never heavy) --- */
    --fai-border: #E3E8EF;
    --fai-border-strong: #CBD3DE;

    /* -- Ink (WCAG AA on all surfaces) -------------------------------------- */
    --fai-ink: #0F172A;   /* headings  */
    --fai-ink-2: #334155; /* body      */
    --fai-ink-3: #64748B; /* muted     */

    /* -- Primary (deep teal) ------------------------------------------------ */
    --fai-primary: #0E7490;
    --fai-primary-strong: #155E75;
    --fai-primary-soft: #E0F2F7;
    --fai-on-primary: #FFFFFF;

    /* -- AI accent (burnished amber — marks AI-generated content) ----------- */
    --fai-ai: #B45309;
    --fai-ai-soft: #FEF3C7;

    /* -- Semantic ------------------------------------------------------------ */
    --fai-success: #15803D;
    --fai-success-soft: #ECFDF3;
    --fai-warning: #B45309;
    --fai-warning-soft: #FFFAEB;
    --fai-danger: #B42318;
    --fai-danger-soft: #FEF3F2;
    --fai-info: #175CD3;
    --fai-info-soft: #EFF6FF;

    /* -- Score scale (5 steps, colorblind-checked, always with a label) ----- */
    --fai-score-1: #DC2626;
    --fai-score-2: #EA8C00;
    --fai-score-3: #CA8A04;
    --fai-score-4: #0E9488;
    --fai-score-5: #0E7490;

    /* -- Spacing (4pt scale) ------------------------------------------------- */
    --fai-space-1: 4px;
    --fai-space-2: 8px;
    --fai-space-3: 12px;
    --fai-space-4: 16px;
    --fai-space-5: 20px;
    --fai-space-6: 24px;
    --fai-space-7: 32px;
    --fai-space-8: 40px;
    --fai-space-9: 56px;

    /* -- Radius ---------------------------------------------------------------- */
    --fai-radius-sm: 8px;   /* inputs, square chips  */
    --fai-radius-md: 12px;  /* buttons               */
    --fai-radius-lg: 16px;  /* cards                 */
    --fai-radius-xl: 24px;  /* modals / sheets       */
    --fai-radius-pill: 999px;

    /* -- Elevation (flat by default; elevation signals interaction) ------------ */
    --fai-shadow-xs: 0 1px 2px rgb(15 23 42 / .05);
    --fai-shadow-sm: 0 1px 3px rgb(15 23 42 / .08);
    --fai-shadow-md: 0 8px 24px rgb(15 23 42 / .10);

    /* -- Focus (never removed; forced-colors fallback in base.css) ------------- */
    --fai-focus-ring: 0 0 0 4px rgb(14 116 144 / .22);

    /* -- Motion ----------------------------------------------------------------- */
    --fai-motion-fast: 120ms;
    --fai-motion-base: 200ms;
    --fai-motion-slow: 280ms;
    --fai-ease: cubic-bezier(.2, 0, 0, 1);

    /* -- Typography (faces vendored in /fonts — see fonts.css; no CDN) ---------- */
    --fai-font-display: 'Plus Jakarta Sans', 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --fai-font-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --fai-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Type scale (1.25 ratio): 12 / 13 / 15 / 18 / 22 / 28 / 36 */
    --fai-text-xs: 0.75rem;    /* 12px — captions, meta          */
    --fai-text-sm: 0.8125rem;  /* 13px — admin compact, dense UI */
    --fai-text-body: 0.9375rem;/* 15px — body                    */
    --fai-text-lg: 1.125rem;   /* 18px — card titles             */
    --fai-text-xl: 1.375rem;   /* 22px — section titles          */
    --fai-text-2xl: 1.75rem;   /* 28px — page titles             */
    --fai-text-3xl: 2.25rem;   /* 36px — display                 */

    --fai-leading-tight: 1.2;
    --fai-leading-normal: 1.5;

    /* -- Density (comfortable default; compact = admin tables via .fai-compact) - */
    --fai-density-row: 44px;
    --fai-density-text: var(--fai-text-body);

    /* -- Z-index scale (10–90) --------------------------------------------------- */
    --fai-z-sticky: 20;
    --fai-z-dock: 40;
    --fai-z-modal: 60;
    --fai-z-toast: 80;
    --fai-z-palette: 90;

    /* -- Sizing ------------------------------------------------------------------- */
    --fai-target-min: 44px; /* minimum hit target, one-handed mobile (a11y) */
    --fai-sidebar-w: 264px;
    --fai-sidebar-w-collapsed: 72px;
    --fai-topbar-h: 56px;
}

/* ============================================================================
   Density — compact flavor for admin tables (32px rows, 13px text)
   ========================================================================== */
.fai-compact {
    --fai-density-row: 32px;
    --fai-density-text: var(--fai-text-sm);
}

/* ============================================================================
   Accessibility modes (FAI-P05-14 continuity) — token overrides, not new CSS.
   The layout root applies prefs-large-text / prefs-colorblind / prefs-battery
   (PreferenceState.ModeClasses); the same system restyles everything.
   ========================================================================== */

/* Large text: scale the type ramp without touching layout metrics. */
.prefs-large-text {
    --fai-text-xs: 0.875rem;
    --fai-text-sm: 0.9375rem;
    --fai-text-body: 1.075rem;
    --fai-text-lg: 1.25rem;
    --fai-text-xl: 1.5rem;
    --fai-text-2xl: 1.9rem;
    --fai-text-3xl: 2.4rem;
}

/* Colorblind-safe (Okabe-Ito leaning): remap semantic + score + primary tokens.
   Numeric labels stay mandatory, so no information is color-only. */
.prefs-colorblind {
    --fai-primary: #0072B2;
    --fai-primary-strong: #005a8e;
    --fai-primary-soft: #e1f0f9;
    --fai-success: #0072B2;
    --fai-success-soft: #e1f0f9;
    --fai-danger: #882255;
    --fai-danger-soft: #f7e6f0;
    --fai-warning: #E69F00;
    --fai-warning-soft: #fdf3dd;
    --fai-info: #56B4E9;
    --fai-info-soft: #eaf6fc;
    --fai-score-1: #882255;
    --fai-score-2: #E69F00;
    --fai-score-3: #C9A227;
    --fai-score-4: #56B4E9;
    --fai-score-5: #0072B2;
}

/* Battery saver: suppress elevation, long transitions and saturated fills. */
.prefs-battery {
    --fai-shadow-xs: none;
    --fai-shadow-sm: none;
    --fai-shadow-md: none;
    --fai-motion-fast: 0ms;
    --fai-motion-base: 0ms;
    --fai-motion-slow: 0ms;
}

/* Battery saver + skeleton: keep a static surface instead of animating pulses. */
.prefs-battery .fai-skeleton {
    animation: none;
}

/* RTL: the Arabic face pairs with the Latin faces (fonts.css carries both). */
:where([dir="rtl"]) {
    /* Logical properties everywhere mean no mirroring overrides are needed here;
       this hook exists for components with directional SVG/decoration. */
}