/* Clarity identity tokens · v2 (12 Sep 2026)
   Single source of truth for colour, type, shape and motion.
   Documented in brand/IDENTITY.md. The desktop app mirrors the colour and
   motion values in desktop/clarity/ui/shared/base.css; it uses the system
   font, not the web faces (see IDENTITY.md §4). */

:root {
  /* ---- colour · sampled from the app icon */
  --c-ink:        #0e141c;   /* ground · the bottom of the icon's gradient. Never #000. */
  --c-ink-2:      #141c26;   /* raised surface: code blocks, inputs */
  --c-ink-3:      #1b2531;   /* panels, callouts */
  --c-slate:      #3a4553;   /* mid-tone of the icon square */
  --c-haze:       #a9b4c3;   /* top-left of the icon square */
  --c-mist:       #eaf0f4;   /* primary text */
  --c-mist-70:    rgba(234, 240, 244, 0.70);  /* secondary text, slogan */
  --c-mist-45:    rgba(234, 240, 244, 0.45);  /* fine print, labels */
  --c-mist-25:    rgba(234, 240, 244, 0.25);  /* keycap borders */
  --c-line:       rgba(234, 240, 244, 0.10);  /* hairlines */
  --c-line-2:     rgba(234, 240, 244, 0.20);
  --c-mint:       #6fd1bd;   /* THE accent · the magnifier's handle. One button per screen. */
  --c-mint-ink:   #0b1b18;   /* text on mint */
  --c-lens:       #589da1;   /* glass · secondary */
  --c-glass-hi:   #cff8e7;   /* glass highlight · math and emphasis on dark */
  --c-danger:     #ff8a8a;   /* errors only */
  --c-paper:      #f7f5ef;   /* the "problem set" card in demos: warm paper, not white */
  /* ---- light sections (About alternates dark and light) */
  --c-paper-2:    #ffffff;   /* ground of light sections */
  --c-ink-on-paper: #121b26; /* text on light sections */
  --c-mint-on-paper: #3fb39b;/* mint darkened for contrast on white */
  --c-lens-on-paper: #3d8d90;

  /* ---- the app's own window tokens (base.css), used when the site shows the app */
  --app-panel:    rgba(20, 20, 24, 0.92);
  --app-text:     rgba(255, 255, 255, 0.92);
  --app-text-dim: rgba(255, 255, 255, 0.55);
  --app-text-faint: rgba(255, 255, 255, 0.38);
  --app-stroke:   rgba(255, 255, 255, 0.10);
  --app-field:    rgba(255, 255, 255, 0.07);
  --app-radius:   12px;
  --app-shadow:   0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- type */
  --f-sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-math:    "STIX Two Text", "Times New Roman", serif;
  --f-app:     -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;  /* inside app-window replicas only */
  --display-stretch: 100%;
  --display-weight: 500;
  --display-track: -0.02em;
  --fs-wordmark: clamp(64px, 8.4vw, 124px);
  --fs-slogan:   clamp(18px, 1.5vw, 22px);   /* Fragment Mono 400 */
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-nav:      13px;                        /* Fragment Mono 400, +0.01em */
  --fs-fine:     12.5px;                      /* Fragment Mono 400, +0.01em */
  --lh-body:     1.5;

  /* ---- shape */
  --r-control:   10px;     /* buttons */
  --r-panel:     12px;     /* app windows, cards */
  --r-glass:     999px;    /* the floating menu */
  --r-icon:      22.37%;   /* macOS icon corner ratio */

  /* ---- motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);   /* arriving */
  --ease-in:   cubic-bezier(0.6, 0, 0.9, 0.4);   /* leaving */
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);   /* moving while on screen */
  --t-tap:     100ms;   /* keycap press */
  --t-hover:   160ms;   /* hover, menu pill */
  --t-spot-in: 180ms;   /* the app's spotlight box arriving (ease-out, scale .96→1) */
  --t-spot-out: 120ms;  /* leaving (ease-in, scale .98) */
  --t-result:  150ms;   /* the app's result window fading in */
  --t-word:    640ms;   /* the wordmark's blur-in */
  --blur-focus: 8px;    /* start radius of any blur-to-focus. Never above 12. */
}