/* =============================================================================
   ENERSAN — design tokens. Single source of truth.
   -----------------------------------------------------------------------------
   Served at /welcome-assets/enersan-tokens.css (deployed by deploy/apply-welcome.sh)
   and linked from: the welcome page, the blog theme (via Website Settings head_html),
   the Taklifchi studio, the native /kurslar catalogue, and the LMS chrome skin.

   Every surface used to define the same values under its own names
   (--eb-ink / --ink / hardcoded hex). They agreed by accident, which is why they
   drifted. Surfaces now alias these tokens instead, so a change here is a change
   everywhere. Consumers keep a literal fallback — var(--es-ink, #21302B) — so a
   missing stylesheet degrades to today's colours rather than to nothing.

   Naming: --es-<role>. Roles are semantic (surface, ink, accent), never literal
   (never --es-orange), so dark mode or a rebrand only touches this file.

   Two layers:
     · PALETTE tokens (below) — raw, named by role.
     · SEMANTIC ROLE tokens (--es-bg/--es-fg/…) — what components consume; they
       flip between the light theme (:root) and dark editorial surfaces (.on-dark).
   Contrast: every text/UI colour is WCAG 2.1 AA-proven against its intended
   background. See docs/enersan-ui-identity.md §2 for the ratio table.
   ============================================================================= */
:root {
  /* ---- surfaces ------------------------------------------------------------ */
  --es-paper:        #FAF7F1;   /* page background, warm paper                  */
  --es-card:         #FFFFFF;   /* raised card on paper                         */
  --es-deep:         #21302B;   /* dark editorial surface (blog hero, footers)  */
  --es-navy:         #10182C;   /* deep navy — infographics, data surfaces      */
  --es-navy-panel:   #141B2F;   /* panel inside navy                            */

  /* ---- ink ----------------------------------------------------------------- */
  --es-ink:          #21302B;   /* primary text                    (12.9:1 pap) */
  --es-ink-2:        #5A6B64;   /* secondary text, nav links       (5.28:1 pap) */
  --es-ink-prose:    #2E3A34;   /* long-form article body          (11.1:1 pap) */
  --es-muted:        #66706A;   /* meta, dates, footer  (4.80:1 — was #8B968F)  */
  --es-faint:        #A9A294;   /* NON-TEXT only: disabled glyphs, hairlines    */
  --es-on-dark:      #F5F1E8;   /* text on --es-deep / --es-navy                */
  --es-on-dark-2:    #C4D2CB;   /* body text on dark                            */
  --es-on-dark-3:    #9AA3B8;   /* meta on dark                    (5.46:1 deep) */

  /* ---- lines --------------------------------------------------------------- */
  --es-line:         #EEE8DC;   /* card + section borders                       */
  --es-line-soft:    #F1EADD;   /* inner dividers                               */
  --es-line-strong:  #E4DED2;   /* chip / control outlines                      */
  --es-line-dark:    #26304D;   /* borders on navy surfaces                     */

  /* ---- accent + signal ----------------------------------------------------- */
  --es-accent:       #E8A13C;   /* brand amber — FILLS, on-dark text/links only  */
  --es-accent-hi:    #F2B95C;   /* hover fill                                    */
  --es-accent-700:   #C6791E;   /* pressed fill; large amber text on light (3:1) */
  --es-accent-ink:   #9A5A16;   /* amber-flavoured TEXT on light   (5.10:1 pap)  */
  --es-accent-soft:  #FBEED6;   /* tinted amber background                       */
  --es-warm:         #E8734A;   /* secondary accent — large/decorative only      */
  --es-green:        #1F6F4A;   /* text links on light             (5.72:1 pap)  */
  --es-green-hi:     #145235;   /* link hover                                    */
  --es-good:         #1E8E5A;   /* positive money — LARGE numbers  (3.87 large)  */
  --es-good-ink:     #157A49;   /* positive money — small text     (5.02:1 pap)  */
  --es-danger:       #C0392B;   /* errors, destructive             (5.09:1 pap)  */
  --es-danger-soft:  #FBE7E4;   /* error background                              */
  --es-info:         #1A3260;   /* informational; brand-mark navy  (11.8:1 pap)  */

  /* ---- brand mark (fixed asset colours — see identity §7) ------------------ */
  --es-mark:         #1A3260;   /* swoosh navy                                   */
  --es-mark-2:       #3B549A;   /* app-icon gradient top                         */

  /* ---- type ---------------------------------------------------------------- */
  --es-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --es-font-body:    'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --es-font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluid ramp. clamp() so headings shrink on phones without a breakpoint each. */
  --es-t-display: clamp(48px, 8vw, 116px);  /* marketing hero only              */
  --es-t-hero:   clamp(40px, 6.2vw, 76px);
  --es-t-h1:     clamp(30px, 3.6vw, 44px);
  --es-t-h2:     clamp(23px, 2.2vw, 30px);
  --es-t-h3:     20px;
  --es-t-body:   16.5px;
  --es-t-prose:  18px;
  --es-t-small:  14.5px;
  --es-t-meta:   13.5px;

  /* line-height + measure */
  --es-lh-tight: 1.05;   /* display */
  --es-lh-snug:  1.2;    /* headings */
  --es-lh-body:  1.55;
  --es-lh-prose: 1.75;
  --es-measure:        34em;   /* reading column */
  --es-measure-narrow: 24em;   /* intro / side text */

  /* ---- spacing (4px base) --------------------------------------------------- */
  --es-s-1: 4px;   --es-s-2: 8px;   --es-s-3: 12px;  --es-s-4: 16px;
  --es-s-5: 24px;  --es-s-6: 32px;  --es-s-7: 48px;  --es-s-8: 64px;
  --es-s-9: 90px;

  /* ---- radii + elevation ---------------------------------------------------- */
  --es-r-xs: 6px;
  --es-r-sm: 10px;
  --es-r:    16px;
  --es-r-lg: 22px;
  --es-r-pill: 999px;
  --es-shadow-sm: 0 2px 8px rgba(33,48,43,.06);
  --es-shadow:    0 8px 30px rgba(33,48,43,.08);
  --es-shadow-lg: 0 18px 50px rgba(33,48,43,.12);

  /* ---- layout --------------------------------------------------------------- */
  --es-wrap:     1200px;
  --es-wrap-pad: 40px;

  /* ---- motion ---------------------------------------------------------------
     Micro = feedback (hover), short = state change, medium = entrance.
     Animate transform/opacity only; never width/height/top/left.             */
  --es-dur-micro: 120ms;
  --es-dur-short: 240ms;
  --es-dur-med:   420ms;
  --es-ease-out:  cubic-bezier(.22,.61,.36,1);
  --es-ease-in:   cubic-bezier(.55,.06,.68,.19);

  /* ---- focus ---------------------------------------------------------------
     One visible focus treatment sitewide. The ring colour need only beat the
     surface it sits on; outline-offset shows the local bg for separation.
     Light: bronze #B26A12 (3.96:1 vs paper). Dark: amber (6.3:1 vs navy).     */
  --es-focus-ring: #B26A12;
  --es-focus: 0 0 0 3px rgba(232,161,60,.55);  /* deprecated alias, kept for legacy consumers */

  /* =========================================================================
     SEMANTIC ROLE TOKENS — light theme (default). Components consume THESE.
     ========================================================================= */
  --es-bg:             var(--es-paper);
  --es-surface:        var(--es-card);
  --es-surface-sunken: var(--es-paper);
  --es-fg:             var(--es-ink);
  --es-fg-2:           var(--es-ink-2);
  --es-fg-muted:       var(--es-muted);
  --es-border:         var(--es-line);
  --es-border-strong:  var(--es-line-strong);
  --es-link:           var(--es-green);
  --es-link-hover:     var(--es-green-hi);
  --es-accent-text:    var(--es-accent-ink);
}

/* =========================================================================
   SEMANTIC ROLE TOKENS — dark editorial/data surfaces.
   Add class="on-dark" (or data-theme="dark") to any section/element and the
   same components render on navy with AA-proven light text. This is NOT a
   user-toggled dark mode — Enersan is light-first; this is how dark heroes,
   footers and infographic panels reuse one component stylesheet.
   ========================================================================= */
.on-dark, [data-theme="dark"] {
  --es-bg:             var(--es-deep);
  --es-surface:        var(--es-navy-panel);
  --es-surface-sunken: var(--es-navy);
  --es-fg:             var(--es-on-dark);
  --es-fg-2:           var(--es-on-dark-2);
  --es-fg-muted:       var(--es-on-dark-3);
  --es-border:         var(--es-line-dark);
  --es-border-strong:  var(--es-line-dark);
  --es-link:           var(--es-accent);
  --es-link-hover:     var(--es-accent-hi);
  --es-accent-text:    var(--es-accent);
  --es-focus-ring:     var(--es-accent);
}

@media (max-width: 860px) {
  :root { --es-wrap-pad: 20px; }
}

/* Global, cheap, and applies to every surface that links this file.
   outline (not box-shadow): the ring colour only needs to beat the surface it
   sits on, which --es-focus-ring does on both themes (fixes the old 2.05:1
   amber glow on light). offset shows the local bg for guaranteed separation. */
*:focus-visible {
  outline: 2px solid var(--es-focus-ring, #B26A12);
  outline-offset: 2px;
  border-radius: var(--es-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}