/* =====================================================================
   ARFA DIGITAL CONSULTING — design tokens

   Two themes, one reserved accent. Light is bone paper / navy ink; dark
   inverts to navy paper / bone ink. Ratios are measured, not estimated —
   run `node build/contrast.mjs` after any colour edit.

   The dark block appears twice on purpose: once behind
   prefers-color-scheme for visitors with no stored choice, once behind
   [data-theme="dark"] for an explicit override. The :not([data-theme="light"])
   guard is what lets the toggle force light on a dark-mode OS.
   ===================================================================== */

:root{
  /* ---- Surfaces & ink (light) ----------------------------------- */
  --paper:       #E9E7E1;
  --paper-raise: #F2F0EB;
  --paper-deep:  #DFDCD4;
  --ink:         #1F2A44;  /* worst-case 10.40:1 */
  --ink-soft:    #4A5468;  /* worst-case  5.55:1 */
  --ink-faint:   #545C6C;  /* worst-case  4.91:1 */
  --rule:        #C9C5BB;
  --rule-strong: #A9A498;

  /* Reserved accent — three uses site-wide: link underline on hover,
     the availability dot, the active nav mark. Non-text only (3.64:1). */
  --accent:      #8A6A3B;
  --danger:      #8C2F2A;

  /* ---- Inverted band: navy on a bone page ---------------------- */
  --i-bg:     #1F2A44;
  --i-ink:    #E9E7E1;
  --i-soft:   #B9BECB;
  --i-faint:  #8D95A6;
  --i-accent: #C39A5F;
  --i-rule:   rgba(233,231,225,.22);
  --i-raise:  rgba(233,231,225,.05);

  /* ---- Type ----------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(31px, 7.6vw, 92px);
  --t-title:   clamp(32px, 5vw, 64px);
  --t-section: clamp(26px, 3.2vw, 42px);
  --t-card:    21px;
  --t-quote:   clamp(20px, 2.4vw, 30px);
  --t-lead:    19px;
  --t-body:    16px;
  --t-small:   14px;
  --t-label:   11px;

  /* ---- Space ---------------------------------------------------- */
  --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:176px;

  --section-y:       clamp(96px, 14vw, 200px);
  --section-y-tight: clamp(64px, 8vw, 112px);

  /* ---- Layout --------------------------------------------------- */
  --wrap:    1440px;
  --gutter:  clamp(20px, 5vw, 72px);
  --measure: 62ch;
  --cols:    6;
  --header-h: 62px;

  /* ---- Motion --------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  900ms;

  color-scheme: light dark;
}

/* ---- Dark: OS preference, unless the toggle forced light ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:       #151B2A;
    --paper-raise: #1D2435;
    --paper-deep:  #111624;
    --ink:         #E9E7E1;  /* worst-case 12.52:1 */
    --ink-soft:    #B7BECD;  /* worst-case  8.30:1 */
    --ink-faint:   #8F97A8;  /* worst-case  5.28:1 */
    --rule:        #2E3648;
    --rule-strong: #414B61;
    --accent:      #C39A5F;  /* lightened — #8A6A3B is invisible on navy */

    /* The band flips: a bone panel on a navy page, so the light/dark
       alternation that stands in for photography survives both themes. */
    --i-bg:     #E9E7E1;
    --i-ink:    #1F2A44;
    --i-soft:   #4A5468;
    --i-faint:  #545C6C;
    --i-accent: #8A6A3B;
    --i-rule:   rgba(31,42,68,.22);
    --i-raise:  rgba(31,42,68,.05);
  }
}

/* ---- Dark: explicit override ------------------------------------- */
:root[data-theme="dark"]{
  --paper:       #151B2A;
  --paper-raise: #1D2435;
  --paper-deep:  #111624;
  --ink:         #E9E7E1;
  --ink-soft:    #B7BECD;
  --ink-faint:   #8F97A8;
  --rule:        #2E3648;
  --rule-strong: #414B61;
  --accent:      #C39A5F;

  --i-bg:     #E9E7E1;
  --i-ink:    #1F2A44;
  --i-soft:   #4A5468;
  --i-faint:  #545C6C;
  --i-accent: #8A6A3B;
  --i-rule:   rgba(31,42,68,.22);
  --i-raise:  rgba(31,42,68,.05);
}

@media (max-width:820px){ :root{ --cols:4 } }
@media (max-width:520px){ :root{ --cols:3 } }