/* The system's tokens: every value the sheets read, and the dark theme's overrides. */

:root{
  color-scheme:light;
  /* ── ground and ink ── */
  --ground:      #EEF3F8;
  --raised:      #F9FBFE;
  --sunken:      #E2EAF2;
  --line:        #D4DFE9;
  --line-strong: #ACBDCD;
  --ink:         #0E1B28;
  --ink-quiet:   #3E5265;
  /* Holds contrast on --sunken, the darkest ground it sits on. */
  --ink-faint:   #53677A;

  /* ── accent ── */
  --accent:      #1863C6;
  --accent-soft: #E0ECFB;
  --on-accent:   #FFFFFF;
  --focus:       #1863C6;
  /* The second accent describes the plan (a lighter training); --accent follows the reader. */
  --accent-2:      #8A5D00;

  /* ── hatch ── */
  /* Stripe width is --edge. */
  --hatch-quiet: repeating-linear-gradient(135deg,
    transparent 0 var(--edge),
    color-mix(in srgb, var(--ink) 10%, transparent) var(--edge) calc(var(--edge) * 2));

  /* ── ring ── */
  /* A routine's ring computes only the hue; lightness and chroma are these two. */
  --tone-l: 0.55;
  --tone-c: 0.09;
  --accent-2-soft: #FAEFCF;
  /* Ground for finished work, not --kept; --ink-faint must hold on it. */
  --done-soft:   #DCF2E7;

  /* ── gradients ── */
  /* One angle for every gradient. */
  --sweep: 115deg;

  /* The sweep's second stop, not the second accent; must hold the accent's contrast against --on-accent. */
  --accent-lit:    #3A85E6;
  --edge-quiet:  linear-gradient(var(--sweep),
      var(--line-strong) 0%, var(--line) 48%, var(--line-strong) 100%);
  --edge-accent: linear-gradient(var(--sweep), var(--accent-lit), var(--accent));
  /* An edge the pointer is over: the accent mixed into the line. */
  --edge-lit:    color-mix(in srgb, var(--accent) var(--tint-edge), var(--line));
  --edge-soft:   linear-gradient(var(--sweep), var(--edge-lit) 0%, var(--line) var(--fade-at));
  --fill-accent: linear-gradient(var(--sweep), var(--accent), var(--accent-lit));

  /* ── zorza: the aurora behind every screen, the glass on it, the progress sweep ── */
  /* The light behind the app; a screen never paints over it with an opaque ground of its own. */
  --aurora: radial-gradient(75% 34% at 5% 0%, rgba(45,212,191,.22), transparent 70%),
            radial-gradient(75% 36% at 100% 8%, rgba(96,165,250,.22), transparent 70%),
            radial-gradient(70% 30% at 30% 100%, rgba(45,212,191,.12), transparent 70%);
  /* A card on the aurora: lets it through. Overlays and pinned bars keep --raised, which is opaque. */
  --glass:      rgba(255,255,255,.62);
  --glass-edge: rgba(255,255,255,.95);
  /* Progress only: sea to the accent, pinned to the track, so the colour says how far. */
  --prog-start: #138FA6;
  --prog: linear-gradient(90deg, var(--prog-start), var(--accent));
  /* The accent's light: a control that is the act, the place that is now. */
  --glow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 40%, transparent);
  /* The act: tinted glass in the accent, lit from above - never a flat fill. Mixed into --raised, never
     into transparent: a control's rim is painted under its face and would show through. */
  --act-face: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, var(--raised)), color-mix(in srgb, var(--accent) 12%, var(--raised)));
  --act-rim:  color-mix(in srgb, var(--accent) 55%, transparent);
  --on-act:   #0B3A78;
  /* A layer that floats over the page (the tab bar, the rest): nearly opaque, the page blurred behind. */
  --float: color-mix(in srgb, var(--raised) 86%, transparent);
  --see-through: 72%;   /* how much ground a pinned bar keeps, the rest is the blurred page */
  --blur: 24px;

  /* ── tints: how much of a tone a mix takes ── */
  --tint-ground: 12%;   /* the ground of a mark in a tone */
  --tint-light:  20%;   /* the active light, a wash, a flash, an alarm's ground */
  --tint-edge:   50%;   /* an edge drawn in a tone */
  --fade-at:     70%;   /* where a light or an edge's sweep has faded out */

  /* ── plates: categorical, never semantic ── */
  --plate-25: #C8102E;
  --plate-20: #0067B1;
  --plate-15: #E8B500;
  --plate-10: #00873E;
  --plate-5:  #8C979E;

  /* ── semantic tones ── */
  --refused: #B3392F;   /* an act the app would not perform */
  --kept:    #087246;   /* written down, and it reached the disk */
  --pending: #9C4F17;   /* written and not yet sent */
  /* Exercises done in turn: a superset, a circuit. */
  --together: #4F6379;

  /* ── type ── */
  --face-name: 'Figtree', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --face-read: 'Figtree', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --face-data: 'Figtree', system-ui, 'Helvetica Neue', Arial, sans-serif;

  --t-page:    24px;   /* the page's own name */
  --t-section: 18px;   /* a section of it */
  --t-part:    15px;   /* a part of a section — body size, heavier */
  --t-body:    14px;   /* what is read */
  --t-detail:  13px; /* what stands beside it */
  --t-label:   11px; /* what a value IS — capitals, tracked, quiet */
  /* A letter inside a mark; stays below --t-label. */
  --t-mark:    10px;
  --t-figure:  34px;   /* a reading's own number */
  /* Stays 16px: smaller makes iOS Safari zoom the page on focus. */
  --t-input:   16px;

  --w-read:  400;   /* what is read */
  --w-mark:  500;   /* a value inside a line of data */
  --w-part:  600;   /* a part of a section — the rank carried by weight, not size */
  --w-name:  600;   /* a name, a heading, a figure */
  --w-page:  700;   /* the page's own name, and nothing else */

  --lead-tight: 1.1;    /* a figure, standing alone */
  --lead-flat:  1.25;   /* a heading, a row of one or two lines */
  --lead-read:  1.5;    /* a paragraph */
  --lead-tile:  1.05;   /* a figure over the word that names it, in a row of such tiles */
  --lead-mark:  1;      /* a mark or a single character: the box is the glyph */
  --lead-none:  0;      /* a box holding a drawing and no text: no line box of its own */

  --track-label: .06em;
  --track-caps:  .02em;
  /* Lifts capitals to offset the missing descenders. */
  --cap-drop: 1px;
  --track-page: -.01em;

  /* ── interaction ── */
  --lift:  color-mix(in srgb, var(--ink) 6%, transparent);  /* hover: the ground rises */
  --press: 1px;                                             /* active: the thing moves down */
  --ring:  2px;                                             /* focus: a ring, always visible */
  --ring-gap: 2px;
  --off-ink: var(--ink-faint);   /* disabled: quiet ink, and a sentence says why */

  /* ── opacity ── */
  --o-off:   .5;    /* a control that will not answer, with the words that go with it */
  --o-dot:   .55;   /* one reading in a dense run of them, so the run stays a run */
  --o-glow:  .45;   /* a light that only agrees with what already says the thing */
  --o-aside: .78;   /* the controls beside a reading, on a ground of their own */

  /* ── layers ── */
  --z-under: -1;    /* under its own box's content, inside a box that isolates it */
  --z-sticky: 10;   /* a bar that stays while the page moves under it */
  --z-pop: 15;      /* what hangs off a field, over the page and its pinned bars */
  --z-sheet: 20;    /* a layer the page waits behind */
  --z-tip: 30;      /* a word held down over everything */
  --scrim: color-mix(in srgb, var(--ink) 86%, transparent);
  --shadow-raise: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  /* 1 inverts the favicon's black square on a light ground; 0 in dark. */
  --icon-invert: 1;
  --shadow-sheet: 0 -2px 24px color-mix(in srgb, #000 22%, transparent);

  /* ── space ── */
  --s0: 2px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px;

  --gap-within:  var(--s0);   /* parts of one object: a label and its figure */
  --gap-line:    var(--s1);   /* things sitting on one line: a mark and its word */
  --gap-row:     var(--s2);   /* two rows of a list separated by SPACE alone */
  --gap-head:    var(--s3);   /* a heading and the block it heads */
  --gap-block:   var(--s4);   /* two blocks inside a section */
  --gap-section: var(--s6);   /* two sections of a page */
  --pad-row:     var(--s2);   /* above and below the hairline of a ruled list */
  --pad-card:    var(--s3);   /* inside anything with an edge */
  --pad-page:    var(--s4);   /* the page's own margin */

  /* ── marks ── */
  --mk-s: 14px;   /* beside body text, or inside a control that is mostly text */
  --mk:   16px;   /* alone inside a `--tap-tight` control */
  --mk-l: 22px;   /* the control's whole point, with only a label under it */
  /* Arms of the checkbox tick, drawn inside a --mk-s box. */
  --tick-long:  6px;
  --tick-short: 3px;
  /* The calendar's routine mark: a disc carrying one letter. */
  --rt:   14px;

  /* ── corners ── */
  /* Smaller than a finger: a swatch, a bar, a cell of the week rail. */
  --r-mark:  4px;
  --r-card:  16px;    /* anything with an edge AND content: a card, a field, a button */
  /* Fully round: a thing that holds a value (chip, grid cell) or whose shape is a circle. */
  --r-pill:  999px;
  --r-sheet: 24px;   /* a layer's top corners */
  /* --r-cell (a calendar day, two card corners) and --r-cell-out (--r-cell plus the gap) are defined by the calendar's sheet. */

  /* ── widths ── */
  /* The coloured edge: says what kind of thing this is. */
  --edge:    3px;
  /* Blur radii of the clearing around a mark on a hatch; not --edge. */
  --halo:      3px;
  --halo-wide: 6px;

  /* Media queries cannot read custom properties: breakpoints stay literals (560, 700, 800). */
  --tap:       44px; /* anything a thumb aims at on its own */
  --tap-tight: 32px; /* a control sharing a row with others */
  /* The widest the app grows. Not --w-, which is the weight scale. */
  --frame:    430px;
  /* Padding that holds a band's content inside --frame; 100% is the band's own width. */
  --hold: max(var(--pad-page), calc((100% - var(--frame)) / 2 + var(--pad-page)));

  /* ── motion ── */
  --m-tap:   90ms;   /* under the finger */
  --m-state: 160ms;  /* a thing changing state: a colour, an edge, a mark */
  --m-layer: 240ms;  /* a layer arriving or leaving; nothing is slower */
  --m-turn:  720ms;  /* one turn of the working mark — a loop, not a transition */
  --m-hold:  1s;     /* a colour held to be seen */
  --m-read:  8s;     /* a notice that asks nothing, left up to be read */

  --ease-out:  cubic-bezier(.16,.84,.44,1);  /* arriving, responding — quick, then settling */
  --ease-in:   cubic-bezier(.6,0,.84,.4);    /* leaving */
  --ease-move: cubic-bezier(.4,0,.2,1);      /* changing in place */

  /* Animate only color, background-color, border-color, opacity, transform. */
}

/* ── dark theme (neon): the same values twice, by system preference and by explicit choice ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#06101A; --raised:#0C1925; --sunken:#040B12;
    --line:#16273A; --line-strong:#24394F;
    --ink:#EBF3F7; --ink-quiet:#A1B4C3; --ink-faint:#7C8F9D;
    --accent:#50A8FF; --accent-soft:#0B2540; --on-accent:#04182E; --focus:#50A8FF;
    --accent-2:#F5C451; --accent-2-soft:#2A2410; --done-soft:#0B2A1F;
    --icon-invert:0;
    --tone-l:0.76; --tone-c:0.07;
    --plate-25:#E4586C; --plate-20:#3E93DA; --plate-15:#F0C63C; --plate-10:#3BB56B; --plate-5:#7C878E;
    --refused:#FF8F8F; --kept:#26E085; --pending:#F0A35E; --together:#9FB3C8;
    --accent-lit:#7CBCFF;
    --scrim: color-mix(in srgb, var(--sunken) 82%, transparent);
    --aurora: radial-gradient(75% 34% at 5% 0%, rgba(20,184,166,.34), transparent 70%),
              radial-gradient(75% 36% at 100% 8%, rgba(59,130,246,.30), transparent 70%),
              radial-gradient(70% 30% at 30% 100%, rgba(20,184,166,.14), transparent 70%);
    --glass:rgba(160,210,255,.07); --glass-edge:rgba(160,210,255,.14);
    --prog-start:#49C9D9;
    --glow: 0 0 18px -4px color-mix(in srgb, var(--accent) 65%, transparent);
    --act-face: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, var(--raised)), color-mix(in srgb, var(--accent) 20%, var(--raised)));
    --act-rim: color-mix(in srgb, var(--accent) 70%, var(--ink)); --on-act:#F2F8FF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#06101A; --raised:#0C1925; --sunken:#040B12;
  --line:#16273A; --line-strong:#24394F;
  --ink:#EBF3F7; --ink-quiet:#A1B4C3; --ink-faint:#7C8F9D;
  --accent:#50A8FF; --accent-soft:#0B2540; --on-accent:#04182E; --focus:#50A8FF;
  --accent-2:#F5C451; --accent-2-soft:#2A2410; --done-soft:#0B2A1F;
  --icon-invert:0;
  --tone-l:0.76; --tone-c:0.07;
  --plate-25:#E4586C; --plate-20:#3E93DA; --plate-15:#F0C63C; --plate-10:#3BB56B; --plate-5:#7C878E;
  --refused:#FF8F8F; --kept:#26E085; --pending:#F0A35E; --together:#9FB3C8;
  --accent-lit:#7CBCFF;
  --scrim: color-mix(in srgb, var(--sunken) 82%, transparent);
  --aurora: radial-gradient(75% 34% at 5% 0%, rgba(20,184,166,.34), transparent 70%),
            radial-gradient(75% 36% at 100% 8%, rgba(59,130,246,.30), transparent 70%),
            radial-gradient(70% 30% at 30% 100%, rgba(20,184,166,.14), transparent 70%);
  --glass:rgba(160,210,255,.07); --glass-edge:rgba(160,210,255,.14);
  --prog-start:#49C9D9;
  --glow: 0 0 18px -4px color-mix(in srgb, var(--accent) 65%, transparent);
  --act-face: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, var(--raised)), color-mix(in srgb, var(--accent) 20%, var(--raised)));
  --act-rim: color-mix(in srgb, var(--accent) 70%, var(--ink)); --on-act:#F2F8FF;
  color-scheme:dark;
}

/* ── the end of a rest: the whole app says it (set on the root by the rest strip) ──
   The last seconds warm the light behind the app from below; the end turns the accent - the
   colour of "now" - into the second accent, so every control, the strip and the light say "your
   move". A warm screen in a cool app is the largest change of colour there is, seen from a bench
   a few metres off. */
:root[data-rest="soon"]{
  --aurora: radial-gradient(75% 34% at 5% 0%, rgba(45,212,191,.20), transparent 70%),
            radial-gradient(75% 36% at 100% 8%, rgba(96,165,250,.20), transparent 70%),
            radial-gradient(100% 48% at 50% 100%, rgba(245,170,60,.30), transparent 72%);
}
:root[data-rest="over"]{
  --accent: var(--accent-2); --focus: var(--accent-2); --accent-lit: var(--accent-2);
  --accent-soft: var(--accent-2-soft); --on-act: #4A3200; --prog-start: #B4561A;
  --aurora: radial-gradient(80% 36% at 5% 0%, rgba(245,160,60,.30), transparent 70%),
            radial-gradient(80% 38% at 100% 8%, rgba(245,196,81,.30), transparent 70%),
            radial-gradient(80% 34% at 40% 100%, rgba(245,170,60,.20), transparent 70%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-rest="soon"]{
    --aurora: radial-gradient(75% 34% at 5% 0%, rgba(20,184,166,.30), transparent 70%),
              radial-gradient(75% 36% at 100% 8%, rgba(59,130,246,.26), transparent 70%),
              radial-gradient(100% 48% at 50% 100%, rgba(245,170,60,.42), transparent 72%);
  }
  :root:not([data-theme="light"])[data-rest="over"]{
    --on-act: #FFF8E6; --prog-start: #F08A3C;
    --aurora: radial-gradient(80% 36% at 5% 0%, rgba(245,160,60,.34), transparent 70%),
              radial-gradient(80% 38% at 100% 8%, rgba(245,196,81,.32), transparent 70%),
              radial-gradient(80% 34% at 40% 100%, rgba(245,170,60,.22), transparent 70%);
  }
}
:root[data-theme="dark"][data-rest="soon"]{
  --aurora: radial-gradient(75% 34% at 5% 0%, rgba(20,184,166,.30), transparent 70%),
            radial-gradient(75% 36% at 100% 8%, rgba(59,130,246,.26), transparent 70%),
            radial-gradient(100% 48% at 50% 100%, rgba(245,170,60,.42), transparent 72%);
}
:root[data-theme="dark"][data-rest="over"]{
  --on-act: #FFF8E6; --prog-start: #F08A3C;
  --aurora: radial-gradient(80% 36% at 5% 0%, rgba(245,160,60,.34), transparent 70%),
            radial-gradient(80% 38% at 100% 8%, rgba(245,196,81,.32), transparent 70%),
            radial-gradient(80% 34% at 40% 100%, rgba(245,170,60,.22), transparent 70%);
}