/* o1tean · design tokens
   Source of truth: 03-master/metrics.json (colours, cell, rule) and 05-motion/motion-spec.md (motion).
   node 04-system/build.mjs copies every custom property below into brand.json "tokens" -> export digital/brand-tokens.css.

   Status
     measured     colours, cell radius / walls / split, liquid rule: read from metrics.json, final.
     final        every motion token: copied from 05-motion/motion-spec.md ("Tokens", after Revision 7).
                  The flap's gravity and the liquid's settle are formulas, not beziers (see the spec); --o1-ease-fall
                  is the rotateX fit.

   Units: 1 kit unit (u) = 1/100 of the x-height. In CSS that is .01ex, so every shape token scales with the
   x-height of the text it sits in (Hack: 1ex = .547em). Pink is the logo's cell: one pink element per view. */

:root {
  /* colour · measured (metrics.json palette) */
  --o1-void:   #07050a;  /* canvas */
  --o1-plum:   #2b0f3f;  /* tracks, hairlines, the character grid (1.5:1 on void: decorative only) */
  --o1-violet: #8b5cf6;  /* idle tiles, secondary text (4.96:1 on void) */
  --o1-orchid: #d97cff;  /* the liquid rule: link underline, progress (8.28:1 on void) */
  --o1-pink:   #ff5fd2;  /* the logo's cell only (7.55:1 on void; 2.33:1 on paper: never on light grounds) */
  --o1-blush:  #ffe3f6;  /* letters and text on dark (16.97:1 on void) */
  --o1-paper:  #f4ecf8;  /* light canvas: logo in mono void (17.58:1) */

  /* roles */
  --o1-cell:   var(--o1-pink);    /* the one accent: the switched character in the logo */
  --o1-liquid: var(--o1-orchid);  /* the fluid half: rules, underlines, progress */

  /* shape · measured (metrics.json cell, 160 u tall) */
  --o1-u: .01ex;                                       /* 1 kit unit */
  --o1-radius: calc(12 * var(--o1-u));                 /* the only radius in the system */
  --o1-wall: max(1px, calc(10 * var(--o1-u)));         /* cell wall at flag, top, bottom (1 px floor) */
  --o1-wall-foot: max(1px, calc(16 * var(--o1-u)));    /* cell wall beside the foot; side wall of text tiles */
  --o1-split: max(1px, calc(6 * var(--o1-u)));         /* split-flap gap at the hinge (lockup) */
  --o1-split-icon: max(1px, calc(8 * var(--o1-u)));    /* split in the icon / large tiles */
  --o1-stroke-idle: max(1px, calc(5 * var(--o1-u)));   /* hollow (idle) cell: stroke = clearance = wall / 2 */
  --o1-cell-h: calc(160 * var(--o1-u));                /* cell height = 1.6 x-height */
  --o1-cell-w: calc(100 * var(--o1-u));                /* logo cell width = 1 x-height; text cells are 1ch wide */

  /* liquid rule · measured (02-explore/02-flow: bar H 19, gap R - H 32.5, round end r 9.5) */
  --o1-rule: max(1px, calc(19 * var(--o1-u)));               /* weight = the logo's bar (≈ .1em in Hack) */
  --o1-rule-offset: calc(32.5 * var(--o1-u));                /* baseline to the top of the rule (≈ .18em in Hack) */
  --o1-rule-end: round;                                      /* the ONE liquid terminal: plain round end, r = half the rule. No drop head */

  /* motion · final (05-motion/motion-spec.md, Revision 7; the same numbers drive every render) */
  --o1-ease-enter:   cubic-bezier(.16, 1, .3, 1);       /* E.out: the cell opening, the o's seed and counter, fillets, panels arriving */
  --o1-ease-pop:     cubic-bezier(.333, 1.3, .667, 1);  /* E.back(.9): the o and t e a n; one 3.0 % overshoot */
  --o1-ease-spread:  cubic-bezier(.25, .15, .7, .86);   /* liquid spreading: the pour, the rule loader, the underline in */
  --o1-ease-retract: cubic-bezier(.55, 0, .45, 1);      /* the rule loader drawing back, the underline out */
  --o1-ease-drain:   cubic-bezier(.32, 0, .67, 0);      /* the sting's drain: accelerates all the way home */
  --o1-ease-drip:    cubic-bezier(.333, 0, .667, .333); /* the bead falling from rest */
  --o1-ease-fall:    cubic-bezier(.1, 0, .46, .08);     /* flap angle θ = π·u^1.7 (≤ 0.1 % off), for rotateX; scaleY = cos θ needs sampled stops */
  --o1-ease-catch:   cubic-bezier(.61, 1, .88, 1);      /* anticipation, sin(π/2·u) */

  --o1-dur-catch:      67ms;    /* anticipation, 4 f */
  --o1-dur-flap:       267ms;   /* one card, 16 f @ 60 (loops, loaders) */
  --o1-dur-flap-hero:  280ms;   /* the sting's one flap */
  --o1-dur-click:      90ms;    /* the click: light only, nothing moves */
  --o1-dur-hover:      450ms;   /* nav logo 1 -> l -> 1 */
  --o1-dur-hover-card: 195ms;   /* one card in the hover */
  --o1-dur-pop:        300ms;   /* one pop (the o from its seed, each letter) */
  --o1-dur-open:       360ms;   /* the cell growing open from its hinge */
  --o1-dur-spread:     400ms;   /* link underline (UI length, not the loader's) */
  --o1-dur-read:       640ms;   /* "oltean" still before the flap */

  --o1-click-shade:    .12;     /* landed card toward plum at the dip; contact shadow .35 for 2 f */
}

/* Not tokens (put these in the product stylesheet):
   @media (prefers-reduced-motion: reduce) { :root { --o1-dur-hover: 0ms; --o1-dur-spread: 0ms; } }
   keep colour feedback; the logo shows its final lockup (rests on the 1, never on the l). */