/* ============================================================
   ENTEL design tokens : canonical, shared.
   Single source of truth for ENTEL's brand variables.
   Mirrors the inline :root in index.html (the live homepage keeps
   its own inline copy so it never depends on a network request).
   New subpages @import or <link> this file, then link
   /entel-chrome.css for the shared nav.

   Human-readable reference: DESIGN-SYSTEM.md
   Do NOT introduce new colors here. Green is an accent, the dark
   greens are the brand mass, light greys are reading surfaces.
   ============================================================ */

:root {
  /* ---- COLOR : brand mass (dark greens) ---- */
  --dark:        #0f1f0f;   /* primary dark: chrome, hero, CTA, mock header */
  --dark-deep:   #0a160a;   /* deepest: quote strip, work strip, footer, mock bars */
  --dark-panel:  #14241a;   /* raised dark panel */

  /* ---- COLOR : green accent ramp ---- */
  --green:       #7aad6a;   /* the accent. eyebrows on dark, flags, buttons, dots */
  --green-bold:  #2f6e22;   /* accent on LIGHT surfaces (eyebrows, links). 5.54:1 on
                               --gray-light, 6.22:1 on white. Was #5c9e4a, which measured
                               2.90:1 and so failed the one job this token exists for. */
  --green-light: #d4e8cc;   /* pale green: left-border ticks, hairlines */
  --green-muted: #8a9e82;   /* desaturated green: meta text on dark */
  --green-line:  #1e3a1e;   /* green-black hairline on dark surfaces */
  --green-hi:    #8fc47d;   /* brighter green: hover state of buttons/links */

  /* ---- COLOR : neutrals ---- */
  --white:       #ffffff;   /* cards, text on dark */
  --off-white:   #f6f9f4;   /* faint green-white section band (timeline) */
  --gray-light:  #f2f2f0;   /* default page background, preview band */
  --gray-mid:    #e8e8e4;   /* dividers inside light cards */
  --rule:        #d8dcd2;   /* section rules, card borders on light */
  --text:        #1a1a1a;   /* body ink on light */
  --text-muted:  #666;      /* secondary ink */
  --text-faint:  #626a67;   /* tertiary ink, captions, source notes. 4.95:1 on paper,
                               5.56:1 on white. Was #999 (2.54:1). Quiet is a job for
                               weight, case and size, never for washing out the ink. */

  /* ---- TYPE : families ---- */
  --serif: 'Georgia', 'Times New Roman', serif;                                  /* headlines, decks, prose */
  --sans:  -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif; /* body, UI, tables */
  --mono:  'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;             /* kickers, data tables, URLs */

  /* ---- TYPE : scale (documented; fluid where the homepage is fluid) ----
     Kicker          : 11px mono, 0.14em, uppercase (the status line, .kicker)
     Section eyebrow : 14px sans, 500/600, -0.14px, sentence case, on a chip.
                       NOT the kicker's treatment: see DESIGN-SYSTEM.md section 5
     Hero headline   : --fs-hero
     Section title   : --fs-title
     Feature H2      : --fs-feature
     Body serif      : --fs-body (deck/prose)
     Body sans       : --fs-ui   (UI, table, captions)
     Meta / source   : --fs-meta */
  --fs-eyebrow:  11px;
  --fs-hero:     clamp(34px, 5.2vw, 54px);
  --fs-title:    clamp(24px, 3.4vw, 32px);
  --fs-feature:  clamp(26px, 3.6vw, 36px);
  --fs-issue:    clamp(30px, 5vw, 44px);   /* subpage issue/brief headline (a notch under hero) */
  --fs-body:     17px;
  --fs-ui:       14px;
  --fs-meta:     11px;

  /* ---- SPACING : section rhythm ---- */
  --pad-section:   72px;   /* vertical padding, standard light/dark section */
  --pad-feature:   80px;   /* vertical padding, feature band (companion tool) */
  --pad-x:         24px;   /* horizontal gutter, desktop */
  --pad-x-mobile:  18px;   /* horizontal gutter, <=540px */
  --pad-section-m: 52px;   /* vertical padding, mobile */

  /* ---- LAYOUT : max-widths ---- */
  --w-narrow: 720px;   /* centered reading column (section heads) */
  --w-wide:   1040px;  /* full band inner (two-column features) */
  --w-mock:   640px;   /* mock-email / issue-body reading width */
  --w-measure: 46em;   /* prose measure inside a wide band */

  /* ---- RADII ---- */
  --r-sm: 3px;   /* buttons, chips, flags */
  --r-md: 4px;   /* cards, mock panels */
  --r-lg: 5px;   /* mobile companion cards, rails */

  /* ---- MOTION : eases + reveal duration (Zajno-adapted, editorial) ----
     See .claude/rules/motion-principles.md */
  --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-dur: 0.7s;

  /* ============================================================
     APPLICATION LAYER
     Everything above dresses ENTEL the publication. Everything below
     dresses the ENTEL app: reading surfaces, a measured
     ink ramp, and the state colours. The app invented all of this inline
     before 2026-08-18, which is how it ended up with 20 font sizes and
     8 radii. It lives here so there is one guide, not two. Site pages
     ignore what they do not use; unused custom properties cost nothing.
     Written reference: DESIGN-SYSTEM.md section 7.
     ============================================================ */

  /* ---- SURFACES : paper is the page, dark green is the shell ---- */
  --paper:    #f3f2ea;   /* the reading surface */
  --paper-2:  #e9e8dd;   /* recessed paper: table hovers, day headers */
  --paper-3:  #e3e1d4;   /* header rows: the one plane above the data */
  --card:     #ffffff;   /* raised paper: rows, panels, records */
  --line:     #dcdccf;   /* hairline on paper */
  --rule-2:   #c9c9b8;   /* the firm 2px rule that closes a header row */
  --void:     #070d0a;   /* deepest instrument ground */
  --deep:     #0b1410;
  --panel:    #101c16;
  --panel-2:  #14241a;
  --panel-3:  #1b3023;   /* the raised CHROME plane, and the only dark surface that
                            has to read as ABOVE --dark rather than below it. The
                            four grounds above are the instrument, and they cluster
                            on purpose (--panel is 1.02:1 on --dark) because none of
                            them is ever asked to float over another. The mobile nav
                            menu is: it drops out of the bar and has to be a
                            different plane. 1.22:1 on --dark. Lifting it further is
                            what the ink costs: every step up drags the muted ink on
                            it toward the AA floor, and --green-muted lands at 4.88:1
                            here against 4.52:1 two steps lighter. */
  --edge:     #1c3025;
  --edge-hi:  #2a4634;

  /* ---- INK RAMP : every step clears WCAG AA (4.5:1) on --paper, --card
         and --paper-2. Measured 2026-08-18: 15.91, 7.07, 4.95 on paper. ---- */
  --ink:  #14181a;   /* primary */
  --ink2: #4a5350;   /* secondary */
  --ink3: #626a67;   /* tertiary: metadata, captions, muted labels */
  --glow: #9ede86;   /* accent on the instrument ground */
  --mute: #7d9a80;   /* meta text on dark. 5.56:1 on --dark */
  --dim:  #3d5240;   /* hairline on the instrument ground */

  /* ---- STATE : one colour per state, used identically on the map, the
         position bar, the timeline, the chips and the rulebook. These are
         the only colours in the app allowed to carry meaning. ---- */
  --w-open:  #2a6e1a;   /* open to you now, as text on paper (5.59:1) */
  --w-near:  #7a5c14;   /* within a year (5.55:1) */
  --w-later: #5b6f7d;   /* one to three years (4.66:1) */
  --w-shut:  #696e72;   /* not in scope (4.76:1) */
  --fill-open:  #3b7029; /* the same open state as a FILL carrying a white label.
                            #4a8b37 could not: 4.17:1 even in pure white. */
  --fill-near:  #cfe0c6;
  --fill-later: #e4e8dd;
  --alarm:      #ff6b52; /* status, on dark */
  --alarm-ink:  #b4402a; /* the same status, stepped for paper */

  /* ---- TYPE SCALE : the application's steps, measured 2026-08-18.
         The app used 23 distinct font sizes and 73 declarations below the floor,
         because it had a scale (above) and no component vocabulary to hang it
         on. These are the only text sizes it may use. --t-meta is the floor:
         nothing smaller, anywhere, at any breakpoint. ---- */
  --t-meta: 11px;     /* mono kickers, chip counts, metadata, captions */
  --t-sm:   12.5px;   /* secondary body, dense row detail */
  --t-ui:   14px;     /* body, UI, table cells, inputs */
  --t-lg:   17px;     /* serif decks, row headings, section subheads */
  --t-xl:   20px;     /* row figures, record headings */
  /* Display sizes stay literal: they belong to one component each (the hero
     line, the KPI figure, the page title) and naming them would imply reuse. */

  /* ---- MOTION : the application's own ease and spring ---- */
  --ease:   cubic-bezier(.22,1,.36,1);
  --spring: linear(0,.19 3.2%,.71 9.1%,.99 13.2%,1.09,1.13 18.6%,1.11 21.6%,1.03 27.6%,1 32.6%,1);
}