/* ============================================================
   ArtzAIn — Font faces (self-hosted latin .woff2, offline-safe)
     Outfit         — geometric display / headings
     Figtree        — UI + body (geometric-humanist, quiet)
     JetBrains Mono — data: hashes, ids, verdicts, timestamps, code
   ============================================================ */

/* ── Outfit — display / headings ── */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Outfit-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Outfit-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Outfit-Bold.woff2') format('woff2'); }

/* ── Figtree — UI + body ── */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Figtree-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Figtree-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Figtree-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Figtree-Bold.woff2') format('woff2'); }

/* ── JetBrains Mono — data ── */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }

/* ============================================================
   ArtzAIn — Color system
   Brand: Iris (flat indigo-violet). Neutrals: warm stone.
   Two themes: light is the default canvas; [data-theme="dark"] flips it.

   Three colour LAYERS, and they never borrow from each other:
     1. BRAND    — iris. Identity, primary actions, focus.
     2. VERDICT  — vivid. allow / deny / review / info. Decision state only.
     3. DOMAIN   — muted. Policy domain + agent class labels. Categorical, never state.
   Muted vs vivid is the rule that keeps a domain chip from reading as a verdict.
   ============================================================ */

:root {
  /* ── Brand: Iris ── */
  --iris-50:  #f1efff;
  --iris-100: #e2ddfe;
  --iris-200: #c7bffc;
  --iris-300: #a89bf8;
  --iris-400: #8b76f0;
  --iris-500: #6a55e0;  /* brand primary */
  --iris-600: #5540c9;  /* hover / press, text-safe on light */
  --iris-700: #4331a4;
  --iris-800: #35287c;
  --iris-900: #261d59;

  /* ── Neutrals: warm stone (the "soften" in the rebrand) ── */
  --stone-0:   #ffffff;
  --stone-25:  #fcfbf9;
  --stone-50:  #f7f5f2;
  --stone-100: #efece7;
  --stone-200: #e2ded7;
  --stone-300: #cfc9bf;
  --stone-400: #a9a196;
  --stone-500: #837a6e;
  --stone-600: #625a50;
  --stone-700: #47413a;
  --stone-800: #302b26;
  --stone-900: #1e1a17;

  /* ── Dark-theme canvas (violet-warm near-black, harmonised with iris) ── */
  --ink-950: #131118;
  --ink-900: #1a1721;
  --ink-800: #221e2b;
  --ink-700: #2c2737;
  --ink-600: #383144;

  /* ── Verdicts (VIVID — decision state only) ── */
  --allow:  #2e9e5b;
  --deny:   #d4483b;
  --review: #d08010;
  --info:   #2f72c4;
  /* lighter pairs for dark theme */
  --allow-bright:  #4ec97e;
  --deny-bright:   #f0705f;
  --review-bright: #eda42c;
  --info-bright:   #5f9ce8;

  /* ── Domains (MUTED — policy domain / agent class, categorical) ── */
  --domain-security:   #4c6e9b;  /* security-sentinel, code_bastion */
  --domain-legal:      #6d5ba6;  /* legal-watch */
  --domain-compliance: #3f7d77;  /* compliance-warden — nods to CogNEXUS teal */
  --domain-privacy:    #8a4f72;  /* privacy-guardian */
  --domain-financial:  #9a6b3f;  /* fraud-sentry */
  --domain-context:    #5e8055;  /* context-keeper, context-steward */
  --domain-governance: #5a5aa8;  /* governance-marshal, registry-scout */

  /* ── Maker mark: CogNEXUS Labs keeps the teal ── */
  --cognexus-teal: #00d4aa;

  /* ============================================================
     SEMANTIC ALIASES — light theme (default). Prefer these.
     ============================================================ */
  --bg-page:        var(--stone-25);
  --bg-sunken:      var(--stone-50);
  --surface:        var(--stone-0);
  --surface-raised: var(--stone-0);
  --surface-sunken: var(--stone-50);
  --surface-inset:  var(--stone-100);

  --text-heading: var(--stone-900);
  --text-body:    var(--stone-700);
  /* muted/faint carry their own values rather than stone-500/400: the ramp steps
     land at 4.22:1 and 2.55:1 on white, below the 4.5:1 AA minimum. Same warm
     hue, lower lightness — 5.9:1 and 4.6:1 on --surface. */
  --text-muted:   #6b6358;
  --text-faint:   #7a7167;

  --hairline:        var(--stone-200);
  --hairline-strong: var(--stone-300);

  --accent:         var(--iris-500);
  --accent-hover:   var(--iris-600);
  --accent-text:    var(--iris-600);
  --accent-fill:    var(--iris-50);
  --accent-line:    var(--iris-200);
  --text-on-accent: #ffffff;
  --focus-ring:     rgba(106, 85, 224, 0.32);

  --verdict-allow:  var(--allow);
  --verdict-deny:   var(--deny);
  --verdict-review: var(--review);
  --verdict-info:   var(--info);
  --allow-fill:  #e7f5ec;
  --deny-fill:   #fbeceb;
  --review-fill: #fbf1e0;
  --info-fill:   #e9f1fb;
}

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] {
  --bg-page:        var(--ink-950);
  --bg-sunken:      #0e0c12;
  --surface:        var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-inset:  var(--ink-800);

  --text-heading: #f4f2f7;
  --text-body:    #d6d2de;
  --text-muted:   #948da3;
  --text-faint:   #857d96;  /* 4.5:1 on --surface; the old #655e73 was ~3:1 */

  --hairline:        rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --accent:         var(--iris-400);
  --accent-hover:   var(--iris-300);
  --accent-text:    var(--iris-300);
  --accent-fill:    rgba(139, 118, 240, 0.16);
  --accent-line:    rgba(139, 118, 240, 0.38);
  --text-on-accent: #16121f;
  --focus-ring:     rgba(139, 118, 240, 0.45);

  --verdict-allow:  var(--allow-bright);
  --verdict-deny:   var(--deny-bright);
  --verdict-review: var(--review-bright);
  --verdict-info:   var(--info-bright);
  --allow-fill:  rgba(78, 201, 126, 0.14);
  --deny-fill:   rgba(240, 112, 95, 0.14);
  --review-fill: rgba(237, 164, 44, 0.14);
  --info-fill:   rgba(95, 156, 232, 0.14);

  /* domains lift slightly so they hold up on dark surfaces */
  --domain-security:   #7fa3d1;
  --domain-legal:      #a08fd8;
  --domain-compliance: #6fb3ab;
  --domain-privacy:    #c283a6;
  --domain-financial:  #cd9d6b;
  --domain-context:    #93b587;
  --domain-governance: #8f8fd8;
}

/* ============================================================
   ArtzAIn — Typography
   Geometric and quiet. Outfit sets headings, Figtree carries the UI,
   JetBrains Mono carries every piece of machine-readable data.
   ============================================================ */

:root {
  /* ── Families ── */
  --font-display: 'Outfit', system-ui, sans-serif;         /* headings, hero, wordmark */
  --font-body: 'Figtree', system-ui, sans-serif;           /* UI + body, the default */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;  /* ids, hashes, verdicts, code */

  /* ── Weights ── */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* ── Scale ── */
  --text-2xs: 0.6875rem;  /* 11 — chip + micro-label */
  --text-xs: 0.75rem;     /* 12 — eyebrow, table header, caption */
  --text-sm: 0.8125rem;   /* 13 — secondary UI, metadata */
  --text-base: 0.875rem;  /* 14 — UI default */
  --text-md: 1rem;        /* 16 — body / long-form */
  --text-lg: 1.125rem;    /* 18 — card title */
  --text-xl: 1.375rem;    /* 22 — panel title */
  --text-2xl: 1.75rem;    /* 28 — page title */
  --text-3xl: 2.25rem;    /* 36 — section title */
  --text-4xl: 3rem;       /* 48 — marketing headline */
  --text-display: clamp(2.25rem, 5vw, 3.75rem);

  /* ── Line height ── */
  --leading-tight: 1.12;    /* display */
  --leading-snug: 1.28;     /* headings */
  --leading-normal: 1.5;    /* UI */
  --leading-relaxed: 1.7;   /* long-form */

  /* ── Tracking ── */
  --tracking-tight: -0.022em;  /* display — Outfit is geometric, wants tightening */
  --tracking-snug: -0.012em;   /* headings */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.09em;     /* uppercase eyebrows + chips */
}

/* ============================================================
   ArtzAIn — Spacing, radii, elevation, motion, layout
   The rebrand's structural shift: CogNEXUS delineated with hairlines on
   black. ArtzAIn delineates with SOFT ELEVATION on warm light surfaces —
   shadows do the work, borders assist.
   ============================================================ */

:root {
  /* ── Spacing (4px base) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;   /* marketing section rhythm */

  /* ── Radii — softer than CogNEXUS across the board ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* controls, inputs */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 18px;   /* panels, modals */
  --radius-2xl: 24px;  /* hero surfaces, feature tiles */
  --radius-pill: 9999px;

  /* ── Elevation (light theme) — warm-tinted, never neutral black ── */
  --shadow-xs: 0 1px 2px rgba(48, 43, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(48, 43, 38, 0.07), 0 1px 2px rgba(48, 43, 38, 0.05);
  --shadow-md: 0 4px 12px rgba(48, 43, 38, 0.08), 0 1px 3px rgba(48, 43, 38, 0.05);
  --shadow-lg: 0 12px 28px rgba(48, 43, 38, 0.10), 0 4px 8px rgba(48, 43, 38, 0.05);
  --shadow-xl: 0 24px 56px rgba(48, 43, 38, 0.14), 0 8px 16px rgba(48, 43, 38, 0.06);
  /* brand-tinted lift for primary actions + hovered cards */
  --shadow-accent: 0 6px 20px -6px rgba(106, 85, 224, 0.45);
  --shadow-accent-lg: 0 14px 32px -10px rgba(106, 85, 224, 0.5);

  /* ── Flock field: the abstract shepherd motif ──
     A soft dot field standing in for a guided flock. Use at low opacity as a
     background layer — never as decoration on top of content. */
  --flock-size: 22px 22px; /* @kind other */
  --flock-dots: radial-gradient(circle at 1px 1px, rgba(106, 85, 224, 0.13) 1px, transparent 0); /* @kind other */

  /* ── Glass ── */
  --blur-sm: blur(8px);   /* @kind other */
  --blur-md: blur(14px);  /* @kind other */
  --glass: rgba(252, 251, 249, 0.78);

  /* ── Motion — calm, no bounce ── */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);     /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --dur-fast: 0.12s;                             /* @kind other */
  --dur: 0.2s;                                   /* @kind other */
  --dur-slow: 0.45s;                             /* @kind other */
  --transition-base: all 0.2s cubic-bezier(0.32, 0.72, 0.28, 1); /* @kind other */

  /* ── Layout ── */
  --container: 1160px;
  --container-wide: 1320px;
  --sidebar-w: 248px;
  --hit-target: 44px;
}

/* Dark theme: shadows deepen and lose their warm tint; the flock field cools. */
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 6px 20px -6px rgba(139, 118, 240, 0.5);
  --shadow-accent-lg: 0 14px 32px -10px rgba(139, 118, 240, 0.55);
  --flock-dots: radial-gradient(circle at 1px 1px, rgba(168, 155, 248, 0.11) 1px, transparent 0); /* @kind other */
  --glass: rgba(19, 17, 24, 0.78);
}