/* =========================================================================
   netex · tokens.css (Foundation)
   1. Cascade-layer order (declared once, first stylesheet that defines layers).
   2. Design bible §2.1 `:root` block, VERBATIM inside @layer tokens.
   3. Role-token defaults + header field mapping (additions, after the verbatim block).
   4. Field classes §2.2 and chamfer helpers (in @layer components, as the bible writes them).
   Page CSS reads ROLE tokens (--bg, --fg, --fg-2, --rule, --link, --focus, --sig, --leak, --cut-b,
   --line-art) set by the section's field class. Never raw hex in page CSS (SVG art excepted).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

/* ---- 2. Bible §2.1 (verbatim) ---------------------------------------- */
@layer tokens {
:root {
  /* ===== GEOMETRY · the only angle ===================================== */
  --nx-angle: 47deg;                 /* logo diagonal, rising left→right (measured) */
  --nx-tan: 1.0724;                  /* tan 47°: vertical rise per 1px horizontal */
  --nx-cot: 0.9325;                  /* cot 47°: horizontal run per 1px vertical */
  --ch: clamp(40px, 7vw, 152px);             /* section chamfer, horizontal leg */
  --ch-v: calc(var(--ch) * var(--nx-tan));   /* section chamfer, vertical leg  */
  --ch-ui: 10px;                     /* buttons, inputs, chips (rect), readouts */
  --ch-sheet: 28px;                  /* paper sheets, work order, viewer panes   */
  --vt-run: calc(100vh * var(--nx-cot));     /* page-transition edge run          */

  /* ===== COLOUR · raw palette (do not use directly in page CSS) =========== */
  --ink:        #08090E;  /* stage black; videos' #000 disappears into it (screen) */
  --ink-2:      #10121A;  /* raised dark surface, shift board, film              */
  --ink-3:      #1A1D28;  /* hover on dark, input on dark                         */
  --paper:      #F1EEE6;  /* datasheet paper                                      */
  --paper-2:    #E6E2D7;  /* secondary surface, light table, FAQ                  */
  --paper-3:    #D6D0C2;  /* pressed paper, rules on paper-2, sheet edge          */
  --indigo:     #2A2C7A;  /* logo wordmark · brand field · headings on paper      */
  --indigo-2:   #1E2061;  /* pressed / deeper indigo                              */
  --cyan:       #02A8E9;  /* logo signal · machine sight · ON DARK ONLY           */
  --cyan-deep:  #076294;  /* cyan as text/links on paper & paper-2                */
  --molten:     #FF5A1F;  /* money/time leak + the one next action · ≤5% viewport */
  --molten-deep:#B23A0A;  /* molten as text on paper (cost figures, errors)       */
  --amber:      #FFA51F;  /* heat-scale midpoint ONLY                             */
  --silver:     #BCBCBC;  /* logo strokes, line art on dark                       */
  --steel:      #8B91A0;  /* meta text on dark                                    */
  --steel-dark: #545A68;  /* secondary text on paper                              */
  --paper-72:   #B0AEAA;  /* paper @72% over ink, flattened (secondary on dark)   */
  --paper-78i:  #C5C3CE;  /* paper @78% over indigo, flattened                    */
  --rule-dark:  rgb(241 238 230 / .14);
  --rule-light: rgb(8 9 14 / .14);

  /* the ONLY gradient: N-bar objects (logo bar, seam, cut edge, progress) */
  --n-grad: linear-gradient(47deg, #2A2C7A 0%, #1572BD 50%, #02A8E9 100%);

  /* X-ray heat scale: 5 DISCRETE steps, never interpolated (it is a data scale) */
  --heat-0: #E6E2D7;  --heat-1: #F2C48A;  --heat-2: #FFA51F;  --heat-3: #FF7E1F;  --heat-4: #FF5A1F;
  /* hidden-cost section hatch (drafting convention for a cut surface). A gradient angle of 47deg
     draws stripes that FALL at 47° (the mirror of the logo's rising cut), the only sanctioned use of −47°. */
  --hatch: repeating-linear-gradient(47deg, currentColor 0 1px, transparent 1px 7px);

  /* ===== TYPE · families ============================================= */
  --f-sans:  'Commissioner', 'Commissioner Fallback', 'Segoe UI', Arial, sans-serif;
  --f-serif: 'Literata Text', 'Literata Fallback', Georgia, 'Times New Roman', serif;
  --f-mono:  'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --f-dot:   'Handjet', 'JetBrains Mono', monospace;   /* ONE readout per page */

  /* Commissioner axes: set --flar/--volm on the element, never on body */
  --flar: 0; --volm: 0;

  /* ===== TYPE · fluid scale (360 → 1440 px; EN values, EL overrides below) */
  --t-mega:    clamp(3.5rem, 1.2rem + 9.6vw, 11rem);     /* door words, offices, 404, P·A·T·H */
  --t-display: clamp(2.5rem, 1.35rem + 4.9vw, 6.5rem);   /* H1 line 1, hub displays (40→92→104) */
  --t-h1-sub:  clamp(1.375rem, 1.05rem + 1.35vw, 2.375rem); /* H1 line 2 (22→36)               */
  --t-h2:      clamp(2rem, 1.2rem + 3.2vw, 4.5rem);      /* section display (32→65→72)          */
  --t-h3:      clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);/* 22→33                               */
  --t-h4:      clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --t-lead:    clamp(1.125rem, 1.02rem + .5vw, 1.4375rem); /* Literata Text, 18→23              */
  --t-body:    clamp(1rem, .97rem + .14vw, 1.0625rem);   /* 16→17                               */
  --t-small:   .875rem;
  --t-label:   .75rem;     /* mono, uppercase, tracked */
  --t-micro:   .6875rem;   /* mono, plate captions, legal fine print */
  --t-readout: clamp(2.25rem, 1.4rem + 3.6vw, 5rem);     /* stamped numbers / Handjet */

  --lh-mega: .84; --lh-display: .94; --lh-h2: .98; --lh-h3: 1.12;
  --lh-lead: 1.45; --lh-body: 1.58; --lh-label: 1.3;
  --tr-mega: -.035em; --tr-display: -.028em; --tr-h2: -.02em; --tr-h3: -.01em;
  --tr-label: .08em;  --tr-caps: .04em;
  --w-display: 820; --w-h2: 760; --w-h3: 640; --w-ui: 560; --w-body: 400; --w-strong: 640;

  /* ===== SPACE ===================================================== */
  --s-0: 2px;  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --sec-y: clamp(88px, 6vw + 64px, 184px);        /* section padding block */
  --sec-y-tight: clamp(56px, 4vw + 40px, 120px);
  --margin: clamp(16px, 4vw, 56px);               /* exactly 16px at 360–400 */
  --gutter: clamp(16px, 1.6vw, 28px);
  --max: 1440px;                                  /* content width (excl. margins) */
  --measure: 64ch; --measure-lead: 44ch; --measure-long: 68ch;
  --header-h: 64px;

  /* ===== SHAPE ===================================================== */
  --r-0: 0; --r-1: 2px; --r-pill: 999px;          /* nothing else */
  --bw: 1px; --bw-2: 1.5px; --bw-focus: 2px; --focus-offset: 3px;
  --shadow-print: 10px 10px 0 var(--indigo);      /* reel frame, work order, active sheet */
  --shadow-print-ink: 4px 4px 0 var(--ink);       /* primary button on paper (1.4.11)    */

  /* ===== DEPTH ===================================================== */
  --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-stage-ui: 20;
  --z-header: 100; --z-panel: 200; --z-chip: 300; --z-dialog: 400;
  --z-cut-edge: 900; --z-skip: 1000;

  /* ===== MOTION ==================================================== */
  --ease-cut:   cubic-bezier(.77, 0, .18, 1);     /* wipes, lens, transitions, menu  */
  --ease-snap:  cubic-bezier(.16, 1, .3, 1);      /* headline lock, chips, N-bar snap */
  --ease-mech:  cubic-bezier(.65, 0, .35, 1);     /* AI pillar: index, slide, ratchet */
  --ease-ink:   cubic-bezier(.22, 1.25, .36, 1);  /* Marketing pillar: springy, fluid */
  --ease-scan:  linear;                           /* beams, scan lines, film scrub    */
  --ease-stamp: steps(3, jump-end);               /* numbers, found blocks, verdicts  */
  --ease-ratchet: steps(6, jump-end);             /* gear/index moves                 */
  --dur-instant: 90ms;  --dur-stamp: 240ms; --dur-mech: 280ms; --dur-ui: 200ms;
  --dur-cut: 640ms;     --dur-ink: 720ms;   --dur-wipe: 900ms; --dur-scan: 1600ms;
  --dur-intro-max: 1200ms;  --stagger: 40ms;

  /* ===== MEDIA ===================================================== */
  --ar-hero: 16 / 9; --ar-reel: 9 / 16; --ar-photo: 3 / 2; --ar-card: 4 / 5; --ar-square: 1 / 1;
}

/* Greek: long words, accents, no all-caps tonos. Slightly smaller display, looser tracking. */
html[lang="el"] {
  --t-mega:    clamp(3.125rem, 1.1rem + 8.4vw, 9.5rem);
  --t-display: clamp(2.375rem, 1.3rem + 4.4vw, 5.875rem);
  --t-h2:      clamp(1.875rem, 1.15rem + 2.9vw, 4.125rem);
  --lh-display: .98; --lh-h2: 1.02; --lh-mega: .88;
  --tr-mega: -.018em; --tr-display: -.012em; --tr-h2: -.008em;
}
@media (max-width: 767px) { :root { --header-h: 56px; } }

/* Reduced motion (OS setting OR the «Λιγότερη κίνηση» toggle → html.rm) */
/* html.rm is set before first paint by the head bootstrap (§5.4) from the OS setting or the stored toggle. */
html.rm {
  --dur-instant: .01ms; --dur-stamp: .01ms; --dur-mech: .01ms; --dur-ui: .01ms;
  --dur-cut: .01ms; --dur-ink: .01ms; --dur-wipe: .01ms; --dur-scan: .01ms;
}
} /* end @layer tokens */

/* ---- 3. Additions (Foundation): role defaults so components work outside a field ---- */
@layer tokens {
	:root {
		/* Default roles = Ink field (the body ground). */
		--bg: var(--ink); --bg-2: var(--ink-2); --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel);
		--rule: var(--rule-dark); --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan);
		--leak: var(--molten); --cut-b: var(--cyan); --line-art: var(--silver);
		--sel-bg: var(--cyan); --sel-fg: var(--ink);
		--ok: var(--cyan); --err: var(--molten);
		--wrap: min(100% - 2 * var(--margin), var(--max));
	}
	/* No JS: honour the OS setting even before/without the bootstrap. */
	@media (prefers-reduced-motion: reduce) {
		html:not(.js) {
			--dur-instant: .01ms; --dur-stamp: .01ms; --dur-mech: .01ms; --dur-ui: .01ms;
			--dur-cut: .01ms; --dur-ink: .01ms; --dur-wipe: .01ms; --dur-scan: .01ms;
		}
	}
}

/* ---- 4. Bible §2.2 field classes (verbatim) + chamfers ------------------------- */
@layer components {
.f-ink, .f-ink-2, .f-paper, .f-paper-2, .f-indigo { background: var(--bg); color: var(--fg); }
.f-ink    { --bg: var(--ink);    --bg-2: var(--ink-2);  --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel);
            --rule: var(--rule-dark);  --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan);
            --leak: var(--molten); --cut-b: var(--cyan); --line-art: var(--silver); }
.f-ink-2  { --bg: var(--ink-2);  --bg-2: var(--ink-3);  --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel);
            --rule: var(--rule-dark);  --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan);
            --leak: var(--molten); --cut-b: var(--cyan); --line-art: var(--silver); }
.f-paper  { --bg: var(--paper);  --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark);
            --rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep);
            --leak: var(--molten-deep); --cut-b: var(--indigo); --line-art: var(--ink); }
.f-paper-2{ --bg: var(--paper-2);--bg-2: var(--paper);   --fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark);
            --rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep);
            --leak: var(--molten-deep); --cut-b: var(--indigo); --line-art: var(--ink); }
.f-indigo { --bg: var(--indigo); --bg-2: var(--indigo-2); --fg: var(--paper); --fg-2: var(--paper-78i); --fg-3: var(--paper-78i);
            --rule: rgb(241 238 230 / .2); --link: var(--paper); --focus: var(--paper); --sig: var(--cyan);
            --leak: var(--molten); --cut-b: var(--cyan) /* display ≥24px only */; --line-art: var(--paper); }
/* Molten fills (buttons, leak bars, coupon) keep ink text on every field. */

.ch-tl { clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch-v)); margin-top: calc(-1 * var(--ch-v)); }
.ch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-v)), calc(100% - var(--ch)) 100%, 0 100%); }
.ch-ui { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-ui) * var(--nx-tan)), calc(100% - var(--ch-ui)) 100%, 0 100%); }

/* ---- Foundation additions to the field system ---- */
/* Selection and success/error roles per ground. */
.f-paper, .f-paper-2 { --sel-bg: var(--indigo); --sel-fg: var(--paper); --ok: var(--cyan-deep); --err: var(--molten-deep); }
.f-ink, .f-ink-2 { --sel-bg: var(--cyan); --sel-fg: var(--ink); --ok: var(--cyan); --err: var(--molten); }
.f-indigo { --sel-bg: var(--paper); --sel-fg: var(--indigo); --ok: var(--cyan); --err: var(--molten); }

/* The header reads the field under it (data-field), WITHOUT painting its background (it stays transparent over heroes). */
[data-field="ink"]     { --bg: var(--ink);    --bg-2: var(--ink-2);  --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel); --rule: var(--rule-dark); --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan); --cut-b: var(--cyan); --line-art: var(--silver); }
[data-field="ink-2"]   { --bg: var(--ink-2);  --bg-2: var(--ink-3);  --fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel); --rule: var(--rule-dark); --link: var(--cyan); --focus: var(--cyan); --sig: var(--cyan); --cut-b: var(--cyan); --line-art: var(--silver); }
[data-field="paper"]   { --bg: var(--paper);  --bg-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark); --rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep); --cut-b: var(--indigo); --line-art: var(--ink); }
[data-field="paper-2"] { --bg: var(--paper-2); --bg-2: var(--paper); --fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark); --rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep); --cut-b: var(--indigo); --line-art: var(--ink); }
[data-field="indigo"]  { --bg: var(--indigo); --bg-2: var(--indigo-2); --fg: var(--paper); --fg-2: var(--paper-78i); --fg-3: var(--paper-78i); --rule: rgb(241 238 230 / .2); --link: var(--paper); --focus: var(--paper); --sig: var(--cyan); --cut-b: var(--cyan); --line-art: var(--paper); }

/* A .ch-tl section keeps its content out of the notch. */
.nx-section.ch-tl { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.nx-section--tight.ch-tl { padding-top: calc(var(--sec-y-tight) + var(--ch-v)); }
.nx-section.ch-br { padding-bottom: calc(var(--sec-y) + var(--ch-v) * .5); }
}