/* Enkidu / Miovski Group — design tokens and mode plumbing.
   Tokens and modes ONLY. No component styles belong in this file. */

:root {
  /* ---- Surfaces: basalt (dark, performing) ---- */
  --basalt-page:            #0F0E0C;
  --basalt-card:            #131311;
  --basalt-raised:          #1B1A17;
  --basalt-deep:            #232119;
  --basalt-border:          #2A2824;
  --basalt-border-strong:   #3A372F;

  /* ---- Surfaces: tablet (light, reading) ---- */
  --tablet-page:            #F5F1E8;
  --tablet-card:            #FBF9F4;
  --tablet-tint:            #EDE7DA;
  --tablet-deep:            #E2DBCB;
  --tablet-border:          #DCD6C8;
  --tablet-border-strong:   #C8C1B0;

  /* ---- Text ---- */
  --text-dark-primary:      #F2F0EA;
  --text-dark-secondary:    #B5B1A6;
  --text-dark-muted:        #8F8B80;
  --text-light-primary:     #1C1B18;
  --text-light-secondary:   #57544C;
  --text-light-muted:       #8A8578;

  /* ---- Brand accents: two stops each ---- */
  --enkidu-accent-dark:     #C1683C;   /* fired clay on basalt */
  --enkidu-accent-light:    #A8552F;   /* fired clay on tablet */
  --mg-accent-dark:         #B08D57;   /* bronze on basalt */
  --mg-accent-light:        #8A6D2F;   /* bronze on tablet */

  /* ---- Support: raw clay ---- */
  --support-dark:           #D9BFA0;
  --support-light:          #B8A583;

  /* ---- Semantic states, warm-calibrated ---- */
  --success-dark:           #5B8A50;
  --success-light:          #3F6B37;
  --warning-dark:           #C99A3B;
  --warning-light:          #8F6A1E;
  --danger-dark:            #C05038;
  --danger-light:           #9A3A26;
}

/* ============================================================
   MODES — resolve surface, text, border and accent-stop choice.
   mode-basalt performs; mode-tablet reads.
   ============================================================ */

.mode-basalt {
  --surface-page:           var(--basalt-page);
  --surface-card:           var(--basalt-card);
  --surface-raised:         var(--basalt-raised);
  --surface-deep:           var(--basalt-deep);
  --border:                 var(--basalt-border);
  --border-strong:          var(--basalt-border-strong);

  --text-primary:           var(--text-dark-primary);
  --text-secondary:         var(--text-dark-secondary);
  --text-muted:             var(--text-dark-muted);
  --text-faint:             var(--text-dark-muted);

  --support:                var(--support-dark);
  /* lifted from #5B8A50: the dark stop is only 3.99 on --surface-deep, which the
     stepped card stacks now use as their front layer */
  --success:                #6FA862;
  --warning:                var(--warning-dark);
  --danger:                 var(--danger-dark);

  /* Two stops stay distinct. On basalt the bright stop carries everything,
     including accent text; --accent-deep is reserved for the rare case that
     needs a recessive accent against a raised surface. */
  --accent-stop-bright:     var(--brand-accent-dark);
  --accent-stop-deep:       var(--brand-accent-light);
  --accent-rule:            var(--brand-accent-dark);
}

.mode-tablet {
  --surface-page:           var(--tablet-page);
  --surface-card:           var(--tablet-card);
  --surface-raised:         var(--tablet-tint);
  --surface-deep:           var(--tablet-deep);
  --border:                 var(--tablet-border);
  --border-strong:          var(--tablet-border-strong);

  --text-primary:           var(--text-light-primary);
  --text-secondary:         var(--text-light-secondary);
  /* Small labels (10.5-11px mono eyebrows, meta, ordinals) are pervasive and
     #8A8578 is only 3.26-3.50:1 on tablet surfaces, so muted ink resolves to the
     secondary stop here. --text-faint keeps the true muted value for non-text use. */
  --text-muted:             var(--text-light-secondary);
  --text-faint:             var(--text-light-muted);

  --support:                var(--support-light);
  --success:                var(--success-light);
  --warning:                var(--warning-light);
  --danger:                 var(--danger-light);

  /* On light surfaces accent TEXT must use the light (deep-calibrated) stop.
     --accent-rule keeps the brighter stop for hairlines and large elements. */
  --accent-stop-bright:     var(--brand-accent-light);
  --accent-stop-deep:       var(--brand-accent-light);
  --accent-rule:            var(--brand-accent-dark);
}

/* ============================================================
   BRAND — sets which accent the page may use. One per page.
   Fired clay never on a Miovski page; bronze never on Enkidu.
   ============================================================ */

/* Enkidu accent — fired clay. Decision recorded, final. */
.brand-enkidu {
  --brand-accent-dark:      #C1683C;
  --brand-accent-light:     #A8552F;
}

.brand-mg {
  --brand-accent-dark:      var(--mg-accent-dark);
  --brand-accent-light:     var(--mg-accent-light);
}

/* Resolved accent aliases — what page markup references. */
.brand-enkidu,
.brand-mg {
  --accent:                 var(--accent-stop-bright);
  --accent-deep:            var(--accent-stop-deep);
  --accent-support:         var(--support);
}

/* ============================================================
   CHROME — nav and footer always carry basalt surfaces, on every
   page, whatever the body mode. Accent arrives via var() from the
   page's brand class, so the chrome files hold no brand colour.
   ============================================================ */

#ee-nav,
#mg-nav,
#mg-nav-root,
footer,
.site-chrome {
  --surface-page:           var(--basalt-page);
  /* chrome cards sit on the darkest surface so accent text clears AA (4.88 vs 4.40) */
  --surface-card:           var(--basalt-page);
  --surface-raised:         var(--basalt-raised);
  --surface-deep:           var(--basalt-deep);
  --border:                 var(--basalt-border);
  --border-strong:          var(--basalt-border-strong);

  --text-primary:           var(--text-dark-primary);
  --text-secondary:         var(--text-dark-secondary);
  --text-muted:             var(--text-dark-muted);

  --accent-stop-bright:     var(--brand-accent-dark);
  --accent-stop-deep:       var(--brand-accent-dark);
  --accent:                 var(--brand-accent-dark);
  --accent-deep:            var(--brand-accent-light);
  --accent-support:         var(--support-dark);

  /* chrome sets its own inherited colour too, so untagged text in the
     nav/footer never inherits a tablet page’s dark ink onto basalt */
  color: var(--text-dark-primary);
}

/* Cross-brand links (the "Miovski Group" nav entry, the footer's Enkidu
   column) are accent-neutral by construction: the gold demotion maps them
   to var(--text-primary)/(--text-secondary), so no extra selector is needed. */

/* Link affordance. The token spec allocates accent to link hover; nothing
   implemented it before. Standalone card links carry accent colour (they are
   interactive, not general text); prose links carry an accent underline. */
a { transition: color .2s, border-color .2s; }
/* The site styles anchors inline, so hover must out-rank an inline declaration.
   !important is required here — not a shortcut: without it the spec's
   "accent = link hover" allocation cannot exist at all. */
a:hover:not([style*="background: var(--accent)"]) { color: var(--accent) !important; }
a:hover[style*="border-bottom"] { border-bottom-color: var(--accent-deep) !important; }
/* Filled CTAs already sit on the accent: lift the fill to raw clay, keep the label
   readable (darkening to --accent-deep would drop contrast below AA). Never re-colour their text to the accent — that is 1.00 contrast. */
a[style*="background: var(--accent)"]:hover { background: var(--accent-support) !important; }

/* Tablet bodies: the same inline label resolves LIGHT, so the fill must be the
   deep stop, and hover must darken further rather than lifting to raw clay.
   Chrome keeps basalt vars (dark label), so it is excluded here. */
.mode-tablet a[style*="background: var(--accent)"]:not(#ee-nav a):not(footer a) {
  background: var(--accent-deep) !important;
  color: var(--tablet-card) !important;
}
.mode-tablet a[style*="background: var(--accent)"]:not(#ee-nav a):not(footer a):hover {
  background: color-mix(in srgb, var(--accent-deep) 78%, var(--text-light-primary)) !important;
}

/* Reveal-on-scroll: the DC runtime re-renders and strips the JS-added .in class,
   so content must never depend on it. Precedent accepted on the pilot: lose the
   animation, keep the content. */
[data-reveal] { opacity: 1 !important; transform: none !important; }

/* Page ground. Body colour comes from the page's mode class. */
html {
  background: var(--basalt-page);
}