/*
  tokens.css - Cohere-locked design tokens for the client portal.
  Every value below traces to either:
    (a) DESIGN-cohere.md (front matter / body), or
    (b) _research/design-lock-reference.html :root block (line ~14-30).
  No invented values.
*/
:root {
  /* ── Colors - reference.html :root (lines 14-21); base hexes match DESIGN-cohere.md colors: block ── */
  --color-primary: #17171c;      /* reference --primary / design doc primary */
  --color-black: #000000;        /* reference --black / design doc cohere-black */
  --color-ink: #212121;          /* reference --ink / design doc ink */
  --color-deep-green: #003c33;   /* reference --deep-green / design doc deep-green */
  --color-green-mid: #0a5c4d;    /* reference --green-mid (bar gradient endpoint) */
  --color-canvas: #ffffff;       /* reference --canvas / design doc canvas */
  --color-stone: #eeece7;        /* reference --stone / design doc soft-stone */
  --color-pale-green: #edfce9;   /* reference --pale-green / design doc pale-green */
  --color-pale-blue: #f1f5ff;    /* reference --pale-blue / design doc pale-blue */
  --color-sidebar: #faf9f6;      /* reference --sidebar (hover surface inside nav/content) */
  --color-sidebar-chrome: #fbfbfa; /* reference .sb{background:#fbfbfa} - light chrome sidebar bg */
  --color-hairline: #d9d9dd;     /* reference --hairline / design doc hairline */
  --color-border-light: #e5e7eb; /* reference --border-light / design doc border-light */
  --color-card-border: #f2f2f2;  /* reference --card-border / design doc card-border */
  --color-muted: #93939f;        /* reference --muted / design doc muted */
  --color-slate: #75758a;        /* reference --slate / design doc slate */
  --color-body-muted: #616161;   /* reference --body-muted / design doc body-muted */
  --color-link: #1863dc;         /* reference --link / design doc action-blue */
  --color-coral: #ff7759;        /* reference --coral / design doc coral */
  --color-coral-soft: #ffad9b;   /* reference --coral-soft / design doc coral-soft */
  --color-ok: #1a7d4f;           /* reference --ok */
  --color-ok-bg: rgba(26, 125, 79, 0.10); /* reference --ok-bg */
  --color-warn: #a3690f;         /* reference --warn */
  --color-warn-bg: rgba(163, 105, 15, 0.10); /* reference --warn-bg */
  --color-on-dark: #ffffff;      /* reference --on-dark / design doc on-dark */
  --color-focus: #4c6ee6;        /* reference :focus-visible outline / design doc focus-blue */

  /* ── Fonts - reference.html --display/--ui/--mono (lines 23-25); font-loading via Google Fonts link in HTML ── */
  --font-display: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-ui: Inter, Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Type scale - DESIGN-cohere.md typography: block (section-heading/card-heading/body/caption/mono-label) ── */
  --text-section-heading: 48px; /* typography.section-heading fontSize */
  --text-card-heading: 32px;    /* typography.card-heading fontSize */
  --text-feature-heading: 24px; /* typography.feature-heading fontSize */
  --text-body-large: 18px;      /* typography.body-large fontSize */
  --text-body: 16px;            /* typography.body fontSize */
  --text-button: 14px;          /* typography.button fontSize */
  --text-caption: 14px;         /* typography.caption fontSize */
  --text-mono-label: 14px;      /* typography.mono-label fontSize */
  --text-micro: 12px;           /* typography.micro fontSize */

  /* ── Radii - reference.html --r-* (line 26) / design doc rounded: block ── */
  --radius-xs: 4px;   /* rounded.xs */
  --radius-sm: 8px;   /* rounded.sm */
  --radius-md: 16px;  /* rounded.md */
  --radius-lg: 22px;  /* rounded.lg */
  --radius-xl: 30px;  /* rounded.xl */
  --radius-pill: 32px; /* rounded.pill */
  --radius-full: 9999px; /* rounded.full */

  /* ── Spacing - DESIGN-cohere.md spacing: block ── */
  --space-xxs: 2px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 80px;

  /* ── Layout constants - reference.html (line 28: --sb; line 78: topbar height 60px) ── */
  --sidebar-width: 238px;    /* reference --sb */
  --topbar-height: 60px;     /* reference .topbar{height:60px} */

  /* ── Motion - reference.html --ease-out (line 27); durations match cohere-tokens.css --dur-* ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 0.18s;
  --dur: 0.3s;
  --dur-slow: 0.42s;

  /* ── Bar gradients - cohere-tokens.css --grad-* block ── */
  --grad-green: linear-gradient(90deg, #1a7d4f, #3aa876);
  --grad-deep: linear-gradient(90deg, var(--color-deep-green), var(--color-green-mid));
  --grad-coral: linear-gradient(90deg, var(--color-coral), var(--color-coral-soft));
  --grad-ring: linear-gradient(135deg, var(--color-deep-green), #2fa05f);
}