/* SANROK tokens — the one place the values are written down.

   SNAPSHOT of Figma `Oax8Y9aG4I7pMNrnTQS2rR`, read 2026-10-01: the collections
   `colour-primitives`, `colour-semantic`, `space`, `radius`, and the local text styles.
   Figma is the source. If this file and Figma disagree, Figma wins — re-read it and
   fix this file; never "correct" a value here by eye.

   Names are Figma's, 1:1: a `/` becomes a `-`, so `surface/base` is `--surface-base`.
   Use the JOB names (section 2 onward) in product code. The primitives in section 1
   exist so the job names have something to point at; a component reaching for
   `--paper-300` directly is skipping a decision.

   Snapshot now, polish later (san, 2026-10-01): the name-vs-job review in
   colour-rebuild-brief.md is still open, so a few names may change. Items marked
   OPEN below are known, not forgotten.

   Not in here, because Figma does not hold them as tokens yet:
   - motion (durations, easing) — see components.md
   - effects (shadows, the scrim's blur) — Figma has no effect styles
   - the old `colours` collection (`100`, `1000_15%`…) — legacy, being retired;
     never write a new `--100` or `--c100`

   Fonts — both apps load 300 only, which cannot draw `action` (Platypi 500):
   <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300&family=Platypi:wght@300;500&display=swap" rel="stylesheet">
*/

:root {

  /* 1 ─ PRIMITIVES — raw paint. Name the colour, not the job.
     Paper runs light to dark: 100 is the lightest. Ink is one colour at seven strengths. */

  --paper-100: #edeae6;
  --paper-200: #e5e2dd;
  --paper-300: #d9d7d2;
  --paper-400: #cfcdc8;
  --paper-400-a97: rgb(207 205 200 / 97%);
  --paper-300-a90: rgb(217 215 210 / 90%);

  --ink-a100: #293b3c;
  --ink-a90: rgb(41 59 60 / 90%);
  --ink-a75: rgb(41 59 60 / 75%);
  --ink-a50: rgb(41 59 60 / 50%);
  --ink-a35: rgb(41 59 60 / 35%);
  --ink-a15: rgb(41 59 60 / 15%);
  --ink-a7:  rgb(41 59 60 / 7%);
  --ink-alt: #4a5b5c;

  --violet-500: #706ce0;
  --violet-600: #4e42d1;
  --violet-a30: rgb(112 108 224 / 30%);
  --violet-a15: rgb(112 108 224 / 15%);
  --violet-a7:  rgb(112 108 224 / 7%);

  --red-500: #e23c2a;
  --red-a15: rgb(226 60 42 / 15%);
  --green-500: #298233;
  --green-a15: rgb(41 130 51 / 15%);
  --green-a7:  rgb(41 130 51 / 7%);
  --amber-500: #df930f;
  --amber-a15: rgb(223 147 15 / 15%);
  --blue-500: #1f59d5;
  --blue-a15: rgb(31 89 213 / 15%);


  /* 2 ─ SURFACE — the ground things sit IN. */

  --surface-base: var(--paper-300);        /* Main background. Also a border drawn in the page colour. */
  --surface-raised: var(--paper-200);      /* Primary card. */
  --surface-raised-2: var(--paper-100);    /* Secondary card; the ring between an avatar and its ground. OPEN: name provisional. */
  --surface-sunken: var(--paper-400);      /* Rare: a darkened area, e.g. a folder tab. */
  --surface-overlay: var(--paper-400-a97); /* Almost-solid background of an overlay panel. */
  --surface-inverse: var(--ink-a90);       /* Tooltip background. Text on it: --text-on-inverse. */
  --surface-backdrop: var(--ink-a100);     /* The dark ground a whole screen sits on (srk-editor artboards). Not inverse, which is a panel ON that ground. */
  --surface-skeleton: var(--paper-300-a90);/* Loading placeholder standing in for missing content. */
  --surface-tint: var(--ink-a7);           /* Faint ink wash behind a GROUP of controls, e.g. the segmented-control track. */
  --surface-hover: var(--ink-a7);          /* Wash laid OVER a surface to darken it on hover. Not a surface on its own. */
  --surface-selected: var(--ink-a15);      /* The chosen item in a hand-built picker, darkened (bucc0's align control). */
  --surface-scrim: var(--ink-a15);         /* Over the whole page behind a modal or flyout. In use it also carries a background blur. */


  /* 3 ─ TEXT */

  --text-primary: var(--ink-a100);         /* Content text. 7.41:1 on paper-400. */
  --text-secondary: var(--ink-a75);        /* Captions, details, the closed select's placeholder (it also shows the value). 4.41:1 on paper-300. OPEN: 75 vs 80 still to test. */
  --text-tertiary: var(--ink-a50);         /* Supporting text, text-field placeholders. 2.49:1, a deliberate exception: never for words someone must read to act. */
  --text-disabled: var(--ink-a35);         /* Disabled only. Exempt from contrast. */
  --text-separator: var(--ink-a15);        /* Typed separators, e.g. the / in breadcrumbs. */
  --text-on-inverse: var(--paper-100);     /* Text on surface-inverse or a solid colour. ≥7.18:1 over anything. */


  /* 4 ─ ICON — same strengths as text. */

  --icon-primary: var(--ink-a100);
  --icon-secondary: var(--ink-a75);        /* Resting interactive icons: checkbox, plus, search, play, drag handle. */
  --icon-tertiary: var(--ink-a50);
  --icon-disabled: var(--ink-a35);
  --icon-on-inverse: var(--paper-100);     /* Icons on solid ink or colour, e.g. the checkbox tick. */
  --icon-on-skeleton: var(--paper-400);    /* Drawn on surface-skeleton: the loading hourglass, the broken-image mark. */
  --icon-placeholder: var(--ink-a7);       /* Ghosted while loading, e.g. carousel arrows before the images arrive. Not disabled. */


  /* 5 ─ BORDER */

  --border-faint: var(--ink-a7);           /* Separator line. */
  --border-subtle: var(--ink-a15);         /* Hairline rules and outlines. Decorative. */
  --border-default: var(--ink-a35);        /* Section bumpers and control outlines. 1.80:1. OPEN: a border-strong is still to test. */
  --border-hover: var(--ink-a50);          /* Control outline on hover: text field, select, stepper, dropzone, search. */
  --border-active: var(--ink-a100);        /* Control outline when open, pressed, or being dropped onto. */
  --border-image: var(--paper-300);        /* The edge around a picture (photo, avatar, thumbnail, swatch). Softens the edge rather than drawing a line. */
  --border-seam: var(--paper-300);         /* Where two parts of one surface meet, so it looks cut in: stepper dividers, nav bumper lines. */


  /* 6 ─ INDICATOR — marks that report a state or a quantity. */

  --indicator-fill: var(--ink-a100);       /* The achieved part of a gauge in ink: played waveform bars, the ink bar on stroke buttons. */
  --indicator-track: var(--ink-a35);       /* The not-yet part. Not disabled: it just has not happened yet. */
  --indicator-fill-subtle: var(--ink-a15); /* The achieved part as a quiet bar: slider fills, the levels' clipped range. */
  --indicator-progress: var(--violet-a30); /* How far a RUNNING task has got. Violet because it is live; a settled value uses fill-subtle. */
  --indicator-scroll: var(--ink-a15);      /* Scroll bar thumb. */
  --indicator-inactive: var(--ink-a35);    /* A status dot that is OFF (offline, not present). The control stays live; that is the difference from disabled. On = --accent-solid. */
  --indicator-pin: var(--blue-500);        /* A place marker on a map (ornaments globe). Blue by job, not signal-info. */
  --indicator-leader: var(--ink-a50);      /* A line from a marker to its label or card. */


  /* 7 ─ ACCENT — "this is us". Violet. */

  --accent-solid: var(--violet-500);       /* Indicators, focus, identity. NOT words: 2.97:1 on base. OPEN: as a focus ring that is a hair under 3:1. */
  --accent-text: var(--violet-600);        /* Accent words, e.g. main-button labels. 4.83:1 on base, 5.38 on raised — 4.37 on sunken, so never on sunken. */
  --accent-wash: var(--violet-a15);        /* Fill behind accent content, e.g. a badge. */
  --accent-wash-subtle: var(--violet-a7);  /* Tinted card body. */


  /* 8 ─ NEUTRAL — the ground of an OBJECT that carries no colour meaning.
     Content sits INSIDE a surface, ON a neutral. */

  --neutral-wash: var(--ink-a15);          /* Quiet: a badge, an unchecked checkbox, a step marker. Carries text-primary. */
  --neutral-solid: var(--ink-a75);         /* Emphatic: solid badge, checked checkbox, completed step, selected page number. Carries text-on-inverse at 5.29:1. */


  /* 9 ─ SIGNAL — states. -solid is the state itself, -wash the fill behind its content. */

  --signal-danger-solid: var(--red-500);
  --signal-danger-wash: var(--red-a15);
  --signal-success-solid: var(--green-500);
  --signal-success-wash: var(--green-a15);
  --signal-success-wash-subtle: var(--green-a7); /* Tinted card body. */
  --signal-warning-solid: var(--amber-500);
  --signal-warning-wash: var(--amber-a15);
  --signal-info-solid: var(--blue-500);
  --signal-info-wash: var(--blue-a15);


  /* 10 ─ BRAND — the mark. All exempt from contrast. */

  --brand-logo: var(--ink-a100);           /* Logogram and logotype. */
  --brand-logo-secondary: var(--ink-a75);  /* A product's own lockup in its app chrome, e.g. BUCC0 in the bucc0 headbar. */
  --brand-logo-subtle: var(--ink-a50);     /* The logogram in navigation chrome — topbars, sidebar, footer. Quieter on purpose. */
  --brand-logo-on-inverse: var(--paper-100); /* The mark knocked out in paper on ink or solid colour. */
  --brand-favicon: var(--ink-alt);         /* Single-colour favicon that must read on light and dark. */


  /* 11 ─ SPACE — gaps and padding. Named by value: a gap has no job you cannot see.
     4, 6, 8 and 12 carry most of the system; the top of the scale is page layout.
     OPEN: 32 is thin on components (expected on pages, page scale unmeasured).
     A 2 is measured in use but never made a token — do not invent one. */

  --space-4: 4px;    /* The tight step: dense rows, small insets. */
  --space-6: 6px;    /* Between 4 and 8, where 4 reads tight and 8 reads loose. */
  --space-8: 8px;    /* The common small gap. */
  --space-12: 12px;  /* The most used value: default padding for a control or card. */
  --space-16: 16px;  /* Roomy padding, panel insets. */
  --space-24: 24px;  /* Separation between groups. */
  --space-32: 32px;  /* Section-level separation. */
  --space-48: 48px;  /* The largest step: page-level separation. */

  /* Owned by the button, NOT steps on the scale. Never use them for anything else. */
  --button-inset: 11px;       /* Asymmetric button padding: 11 on one side against 12 on the other. */
  --button-hover-inset: 5px;  /* Bottom padding on hover only, clearing the hover underline. */


  /* 12 ─ RADIUS — most of this system is square. */

  --radius-0: 0;       /* The default. */
  --radius-2: 2px;     /* Small objects, about 14–24px: shortcut chips, icon slots, the switch knob, step numbers. */
  --radius-4: 4px;     /* The workhorse, from about 18px up: text fields, tags, cards, checkboxes, tracks, images. */
  --radius-full: 999px;/* Pill: clamps to half the shorter side, so it stays round at any size. */


  /* 13 ─ TYPE — two faces. Chivo Mono does the work; Platypi speaks.
     Every style is the Light weight except `action`, at -1% tracking. */

  --font-mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Platypi', Georgia, 'Times New Roman', serif;
  --tracking: -0.01em;

  --type-body:       300 14px/1.2 var(--font-mono);  /* The default: interface and running text. */
  --type-body-prose: 300 14px/1.4 var(--font-mono);  /* Long-form reading. 12px between paragraphs. */
  --type-caption:    300 12px/1.2 var(--font-mono);  /* Tags and smaller details. */
  --type-key:        300 10px/1.2 var(--font-mono);  /* Shortcut keys. OPEN: cap-height trim, see typography-brief. */
  --type-heading:    300 18px/1.25 var(--font-serif);/* Card and featured titles, pull quotes. */
  --type-action:     500 18px/1.25 var(--font-serif);/* Main links and buttons. OPEN: are buttons caps by definition? */
  --type-figure:     300 28px/1.25 var(--font-serif);/* Big numbers that are the point: stats, prices. */
  --type-wordmark:   300 18px/1.25 var(--font-serif);/* The name set beside the logogram. ALWAYS uppercase. */
}


/* A Figma text style is a bundle — face, size, leading, tracking, case. The classes
   keep the bundle together so nobody sets the font and forgets the tracking.
   brand-guide's own `guide/context` and `guide/section` styles are left out on
   purpose: they are the document's furniture, not product type. */

.type-body,
.type-body-prose,
.type-caption,
.type-key,
.type-heading,
.type-action,
.type-figure,
.type-wordmark { letter-spacing: var(--tracking); }

.type-body       { font: var(--type-body); }
.type-body-prose { font: var(--type-body-prose); }
.type-body-prose p + p { margin-top: 12px; }
.type-caption    { font: var(--type-caption); }
.type-key        { font: var(--type-key); }
.type-heading    { font: var(--type-heading); }
.type-action     { font: var(--type-action); }
.type-figure     { font: var(--type-figure); }
.type-wordmark   { font: var(--type-wordmark); text-transform: uppercase; }