/* sioma.ai's copy, cut to the tokens the page, its legal pages and its bot read; the rest, and [data-theme], which nothing here sets, are
   the repo's tokens.css's. */
/* Sioma UI tokens. One source of truth. Nothing here is decorative.

   Every themed value is written once, with light-dark(). The theme comes from
   color-scheme, so a token cannot land in one theme and
   not the other. Every colour is named for what it means, never for what it looks
   like: a screen never asks for "the grey", it asks for provenance, or a line, or
   the one thing to press. Every pair below is measured by check.mjs against the
   law in DESIGN.md before it ships. */

:root { color-scheme: light dark; }

:root {
  /* Ground. Warm, never pure. --surface is what a dock or a card sits on, and
     it is where most provenance is read, so every ink is measured on it too.
     The light page stands a step under white, where --sunken stood, and --sunken and --hairline a step under it: at #fbfaf8 the page
     and a white row, field or tile were one colour, and the light theme read as the dark one with its inks turned over (Sagi,
     2026-10-01: "we need to see more in the colors", UI-66). The step cost three inks a shade each, below, to hold 4.5:1 on --sunken */
  --ground:  light-dark(#f3f1ec, #141311);
  --surface: light-dark(#ffffff, #1b1a17);
  --sunken:  light-dark(#eae8e3, #100f0e);   /* a code block, a press held down, what is disabled: below the surface, not above it */

  /* Ink. Three weights and no more. Each meets 4.5:1 on --ground and on --surface. */
  --ink:       light-dark(#1a1917, #ece9e3);
  --ink-muted: light-dark(#66645e, #a8a49c);   /* the second thing on a line */
  --ink-faint: light-dark(#6a675e, #928e86);   /* the least an ink is allowed to be; still 4.5:1 */

  /* Meaning. One colour, one meaning, used nowhere else. These are the semantic
     tier: a screen reaches for the meaning and never for the ink behind it. */
  --live:           light-dark(#02756a, #4ec9b8);   /* a channel a message has gone through; the one thing to press */
  --live-ink:       light-dark(#ffffff, #101010);   /* text on --live */
  --live-hover:     color-mix(in oklab, var(--live) 86%, var(--ink));
  --live-active:    color-mix(in oklab, var(--live) 74%, var(--ink));
  --failed:          light-dark(#a33a30, #e08b82);  /* a post-condition that did not hold. Law 5. Always with the reason. */
  --held:            light-dark(#2f6b3a, #86c48f);  /* a post-condition that held. A sentence, never a tick on its own. */
  --look:   var(--ink);      /* what the pointer rests on: the base colour at full strength, brightness and never a hue. The accent itself read as a choice (grilled 2026-09-14); lilac and then the accent's own kin were each tried for an hour on 2026-09-17 and neither looked right, so a look is ink and every hover, a button's edge included, takes it whole (Sagi) */

  /* Lines. Two jobs, and they are not the same job.
     --hairline separates things and is quiet on purpose.
     --hairline-strong bounds anything a person can press and clears 3:1 on
     --ground, --surface and --sunken. A control on --hairline is the mistake this
     split exists to stop, and no check catches it: look. */
  --hairline:        light-dark(#dcd9d2, #2c2a26);
  --hairline-strong: light-dark(#87837b, #736f67);

  /* Focus. Written once, on --ring, never removed, never a browser default. */
  --ring: var(--ink);   /* not the accent: a focused chosen control was teal on teal (grilled 2026-09-14) */
  --focus-w: 2px;
  --focus-offset: 1px;

  /* Type. Two families. The ramp is in rem so a browser font-size preference
     does what the person asked; 1rem is the browser's own body size. Weight and
     colour carry hierarchy, not size: most of a screen sits on --text-body. */
  --font-sans: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs:   0.8125rem;  /* 13: a provenance line, a key. The smallest thing on screen. */
  --text-sm:   0.875rem;   /* 14: a chip, a note */
  --text-body: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18: the one line a dock leads with */
  --text-xl:   1.5rem;     /* 24: a screen's single heading */
  --text-2xl:  2.25rem;    /* 36: one question on a whole display and nothing competing. Not for a dense screen. */
  --weight-body: 400;
  --weight-strong: 500;
  --leading: 1.5;
  --leading-tight: 1.35;
  --track-mono: 0.04em;

  /* Space. A soft ramp, not a grid: two adjacent steps are always distinguishable. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 40px;
  --space-7: 60px;       /* the next step of the same ramp, half again: where the rail's first dot stands under a pane's heading. It was calc(--space-6 * 1.5) written where it was needed */

  /* Shape. Concentric: an inner radius is the outer minus the padding between. */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 7px;      /* the outer of a pair whose inner is --radius-sm */
  --radius-pill: 999px;

  /* Reach. A drawn box may be smaller; the pressable box never is. */
  --hit-touch: 44px;     /* anywhere a finger lands */

  /* Icons. One 20x20 grid, one stroke, currentColor. The default reads as the
     same weight as the word beside it, not as a hint of one. */
  --icon-sm: 16px;
  --icon: 20px;
  --icon-stroke: 1.4;

  /* Motion. One duration, one curve. Reduced motion sets --dur to zero, once,
     below; a duration written anywhere else bypasses that. */
  --dur: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bot-blink: 7s;       /* how often an agent's eyes blink, the logo's own interval (sioma.ai/logo.svg); zero under reduced motion with the rest (Sagi, 2026-09-22) */

  /* Depth. Hairlines everywhere; one shadow, for the one thing that floats. */
  --shadow-color: light-dark(rgba(26, 25, 23, 0.1), rgba(0, 0, 0, 0.5));
  --shadow-pop: 0 6px 24px var(--shadow-color);

  /* Layout. */
  --measure: 42rem;      /* the longest a line of prose is allowed to run */

  /* The map. Every distance the canvas draws is in world units and scales with
     the camera; a radius in pixels is a bug. */
  --map-mark: 28px;      /* a system, an agent: one square. Holds a brand path. */
  --radius-mark: 5px;    /* off the 3/4/7 ramp on purpose: a mark, not a box */
  --map-glyph: 17px;
  /* Text over the map is haloed, never boxed, so the marks stay visible through it. */
  --halo: 0 0 3px var(--ground), 0 0 3px var(--ground), 0 0 6px var(--ground);

  /* The bot (bot/, UI-46, UI-83). An agent's tile is Sagi's first aurabot card: four lights turning in a front card, the colours of a
     feeling, each feeling its own four from this palette, the first aurabot's own colours per state (bot.css says which). Not themed, a
     picture as a photo is: the card is frosted white on any page and the eye is white on it. No ratio is held on a picture; the row's word
     says the state (Sagi, 2026-10-03, replacing the one pastel to a feeling of 2026-09-22) */
  --aura-violet:     #9147ff;
  --aura-green:      #34d399;
  --aura-rosa:       #ec4899;
  --aura-cyan:       #05e0f5;
  --aura-sun:        #facc15;
  --aura-sky:        #22d3ee;
  --aura-lime:       #a3e635;
  --aura-blue:       #60a5fa;
  --aura-indigo:     #6366f1;
  --aura-pale:       #93c5fd;
  --aura-night:      #2a0167;
  --aura-deep:       #003f64;
  --aura-orange:     #ff6f00;
  --aura-amber:      #ffaf25;
  --aura-yellow:     #fff351;
  --aura-wine:       #a60053;
  --aura-red:        #ff3434;
  --aura-slate:      #94a3b8;
  --aura-steel:      #64748b;
  --aura-periwinkle: #a5b4fc;
  --aura-mist:       #cbd5e1;
  --aura-lavender:   #a78bfa;
  --bot-eye:   #ffffff;
  --bot-frost: rgb(255 255 255 / 0.7);   /* the card's frosted white over the aura, the first aurabot's 0.8 a little thinner so the colour carries */
  --bot-plate: light-dark(#dedfe0, #2c2b28);   /* the plate behind the card, neutral: the first aurabot's grey, and a step off the dark ground */
  --bot-lift:  rgb(0 0 60 / 0.25);       /* the card's shadow while it is pointed at, the first aurabot's */
}

/* The one themed value that is not a colour, so light-dark() cannot carry it.
   The globe is dots of --ink on --ground and the same alpha does not buy the same
   presence both ways: dark ink laid thinly on a light ground loses more than light
   ink on dark. These land within a tenth of 2.8:1 in both themes and check.mjs
   measures it. */
:root { --map-dot-max-opacity: 0.32; }
@media (prefers-color-scheme: dark) { :root { --map-dot-max-opacity: 0.24; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --bot-blink: 0ms; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-muted: var(--ink);
    --ink-faint: var(--ink);
    --hairline: var(--hairline-strong);
  }
}