/* Ecliptic Studio — UI kit, layer 1: tokens
   P1 lane 1D. Built S05, 2026-09-09.
   Authority: ../BRAND-SYSTEM.md. Where this file and that one disagree, that one wins.

   Nothing in the interface hard-codes a value. Every component reads from here, which is
   what makes the face, the grays and the timing swappable later without a rewrite. */

:root {
  /* ---- Ground and ink -------------------------------------------------
     The six values and their roles are the brand system's, unchanged. Two
     tokens below it did not specify are marked ADDED. */

  --ec-black:        #000000;  /* The ground. Homepage only. Nothing else is this black */
  --ec-panel:        #0A0A0A;  /* Panels, interior page ground on dark */
  --ec-raised:       #111111;  /* Cards, and the nav bar when it sits over content */
  --ec-body:         #EDEDED;  /* Body text on dark. Never pure white */
  --ec-paper:        #F2F3F1;  /* Paper. Documents and interior pages. CHANGED S05 from the brief's
                                  #F5F5F3 — ash, one step further from white, cool bias kept */
  --ec-reserved:     #FFFFFF;  /* Wordmark, the reference rule, one headline per page */

  --ec-rule:         #26282A;  /* Hairlines on dark */
  --ec-muted:        #878B8F;  /* Microtype. Labels, captions, annotations */

  --ec-rule-paper:   #DCDEDB;  /* ADDED S05. Hairlines on paper. Same cool bias */

  /* The working ground. Approved S05: the site keeps the void, the screens someone sits in
     all day get three steps of lift so panels, cards and rules separate without white. */
  --ec-work:         #16181A;
  --ec-work-raised:  #1D2023;
  --ec-work-rule:    #2E3134;
  --ec-raised-paper: #FFFFFF;  /* ADDED S05. Cards on paper. The one place white is not reserved,
                                  because it is a ground and not a mark */

  /* Semantic, so components never name a gray directly. Reassigned per ground below. */
  --ec-ground:       var(--ec-panel);
  --ec-surface:      var(--ec-raised);
  --ec-ink:          var(--ec-body);
  --ec-ink-strong:   var(--ec-reserved);
  --ec-ink-muted:    var(--ec-muted);
  --ec-hairline:     var(--ec-rule);

  /* ---- State ----------------------------------------------------------
     The system carries no hue. State is a node point, a rule that thickens,
     and a microtype label that says the word. Colour is never the only carrier,
     which is also what makes it accessible.
     If a signal hue is ever approved, it enters here and nowhere else. */
  --ec-signal:       var(--ec-ink-strong);
  --ec-node:         var(--ec-ink-strong);

  /* ---- Type -----------------------------------------------------------
     Three faces, three jobs. Italiana is the mark and is not an interface face —
     it is not in any component in this kit, on purpose. */
  --ec-face-mark:   'Italiana', 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --ec-face-ui:     'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --ec-face-micro:  'Martian Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --ec-w-light:  300;
  --ec-w-reg:    400;
  --ec-w-semi:   600;

  /* Scale. 16px body, everything else a step off it. */
  --ec-t-micro:  11px;   /* Martian Mono ceiling is 12px. This is the working size */
  --ec-t-label:  12px;
  --ec-t-small:  14px;
  --ec-t-body:   16px;
  --ec-t-lead:   18px;
  --ec-t-h3:     22px;
  --ec-t-h2:     28px;
  --ec-t-h1:     40px;   /* Also the Italiana floor. Below 40px the mark is not used */
  --ec-t-display: 64px;

  --ec-track-micro: 0.16em;  /* Fixed by the brand system */
  --ec-track-ui:    0.01em;
  --ec-track-caps:  0.14em;  /* Jost in caps, for buttons and table heads */

  --ec-lh-tight: 1.15;
  --ec-lh-body:  1.55;

  /* ---- Space ----------------------------------------------------------
     4px base, 8px rhythm. Clear space around any mark is one ring diameter,
     which is --ec-clear, not a space step. */
  --ec-s1:  4px;
  --ec-s2:  8px;
  --ec-s3:  12px;
  --ec-s4:  16px;
  --ec-s5:  24px;
  --ec-s6:  32px;
  --ec-s7:  48px;
  --ec-s8:  64px;
  --ec-s9:  96px;
  --ec-s10: 128px;
  --ec-clear: 1em;         /* One ring diameter, relative to the mark's own size */

  /* ---- Line and edge --------------------------------------------------
     Radius is zero everywhere. The only curve in the system is a ring, and a
     ring is a mark, not a container. */
  --ec-radius: 0;
  --ec-hair:   1px;
  --ec-plane:  2px;        /* The reference rule, and the state rule under a field */

  /* ---- Motion ---------------------------------------------------------
     The five behaviors from the brand system and nothing else. */
  --ec-draw:     800ms;
  --ec-draw-ease: cubic-bezier(.16, 1, .3, 1);
  --ec-resolve:  600ms;
  --ec-resolve-ease: cubic-bezier(0, 0, .2, 1);
  --ec-register: 240ms;
  --ec-register-ease: cubic-bezier(0, 0, .2, 1);
  --ec-cross:    520ms;
  --ec-cross-ease: cubic-bezier(.4, 0, .2, 1);

  --ec-focus-ring: 2px;

  /* ---- Material -------------------------------------------------------
     Approved S05. One light source, fixed: above and slightly left, the way an
     eclipse is lit. Every material effect in the system derives from these two
     values, and the guard rail is absolute — material touches grounds and
     surfaces, never the mark, the plane, or type. */
  --ec-light-top:   rgba(255, 255, 255, 0.05);   /* the edge that catches light */
  --ec-light-under: rgba(0, 0, 0, 0.30);         /* the edge that loses it */

  /* ---- Layout ---------------------------------------------------------- */
  --ec-measure: 68ch;      /* Reading width. Body copy never runs wider */
  --ec-page:    1280px;
}

/* Paper ground. Put .ec-paper-ground on the section or the page that turns
   informational — the brand system's split, expressed as a scope rather than a
   viewer preference, because the ground is chosen by the page and not by the reader. */
.ec-paper-ground {
  --ec-ground:     var(--ec-paper);   /* Fixed S05. Without this a primary button on paper is
                                         near-black type on a near-black fill, because --ec-ground
                                         is what a filled control uses for its own label */
  --ec-surface:    var(--ec-raised-paper);
  --ec-ink:        var(--ec-raised);
  --ec-ink-strong: var(--ec-black);
  --ec-ink-muted:  #6E7276;      /* ADDED S05. --ec-muted fails contrast on paper */
  --ec-hairline:   var(--ec-rule-paper);
  --ec-signal:     var(--ec-black);
  --ec-node:       var(--ec-black);

  /* The same light source, inverted. On a light ground the lit edge is white and the
     lost edge is a faint shade — a printed card rather than a lit panel. */
  --ec-light-top:   rgba(255, 255, 255, 0.9);
  --ec-light-under: rgba(0, 0, 0, 0.06);

  /* Both of these are required, not tidiness. A ground scope only redefines variables;
     `color` and `background` were already computed further up and do not re-resolve on
     their own, so body copy inside a paper section keeps the dark ground's near-white ink
     and disappears. That was the unreadable text on the first kit page. */
  color: var(--ec-ink);
  background: var(--ec-ground);
}

/* Homepage only. The one place the ground is pure black. */
.ec-home-ground { --ec-ground: var(--ec-black); background: var(--ec-ground); color: var(--ec-ink); }

/* The working interface. Backend and portal. Approved S05. */
.ec-work-ground {
  --ec-ground:   var(--ec-work);
  --ec-surface:  var(--ec-work-raised);
  --ec-hairline: var(--ec-work-rule);
  color: var(--ec-ink);
  background: var(--ec-ground);
}

/* ---- Hue, held in reserve ---------------------------------------------
   Approved S05 as a reserve, not as part of the system. Nothing here is active.
   Six values, none above 22% saturation, named for parts of an eclipse.

   Four rules, which matter more than the hexes:
     1. One hue per surface. Two in the same field of view and this is a colour scheme
     2. Roughly 8% of the visible area, ceiling. Hue is a mark, never a ground
     3. Never on the wordmark, never on the plane, never the only carrier of a state
     4. Signature surfaces only — a hero, a transition, one moment on a page.
        Not the backend, not a document, not a client system

   To use one, set --ec-signal and --ec-node on the surface. That is the whole cost. */
.ec-palette-reserve {
  --ec-umbra:        #151A1F;  /* Deep blue-black. An interior ground, never a stand-in for #000 */
  --ec-penumbra:     #5B6672;  /* Cool blue-grey. Fills and edges. Fails as body text on dark */
  --ec-corona:       #B5A791;  /* Pale muted gold. The one warm value. Emphasis, never large */
  --ec-chromosphere: #9E6B5F;  /* Muted rust. If an alert hue is ever approved, this is it */
  --ec-aurora:       #7C9382;  /* Desaturated green. Confirmations, alongside the word */
  --ec-albedo:       #E8E5DE;  /* Warm off-white. A paper that reads as material */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ec-draw: 1ms; --ec-resolve: 1ms; --ec-register: 1ms; --ec-cross: 1ms;
  }
}