/* ==========================================================================
   Sacred Valley Tech — Design Tokens
   Color + Typography system for digital / web use.
   Source: Sacred Valley Tech Brand Manual v1.0 (Gen X Soft Club edition)

   Usage: link this file before your site stylesheet.
   <link rel="stylesheet" href="tokens.css">
   <link rel="stylesheet" href="site.css">

   Naming: --svt-{category}-{name}
   Primitives (raw colors) live under --svt-color-*.
   Roles (what components should actually reference) live under
   --svt-bg-*, --svt-text-*, --svt-border-*, --svt-fill-*.
   Always build UI against role tokens, not primitives directly —
   it's what lets the dark theme work by flipping one attribute.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted
   Saira → display/headline/UI-chrome face. Work Sans → body/long-form face.
   @font-face declarations live in fonts.css, not here — every page that
   loads tokens.css already loads fonts.css too, and declaring the same
   family+weight twice added duplicate parse work at exactly the moment
   (page load) where font-loading jank is most visible. If you're using
   tokens.css standalone (e.g. style-guide.html), link fonts.css alongside
   it.
   -------------------------------------------------------------------------- */

:root {

  /* ------------------------------------------------------------------
     1. COLOR PRIMITIVES
     Primary palette (2 required blues live here: Deep Navy + Circuit Teal).
     Accent palette is the researched Gen X Soft Club set — cool green,
     blue-grey, natural tan, and ink black. Never more than two accents
     in one composition; accents should stay under ~20% of a layout.
     ------------------------------------------------------------------ */

  /* primary */
  --svt-color-ink-navy:     #0A0E1C; /* near-black, backgrounds & headlines */
  --svt-color-deep-navy:    #16283F; /* blue 1 — primary surfaces */
  --svt-color-circuit-teal: #17404A; /* blue 2 — secondary surfaces, links */
  --svt-color-fog-grey:     #A6A9A2; /* cool neutral — muted UI, captions */
  --svt-color-paper:        #F1F0EA; /* light backgrounds */
  --svt-color-white:        #FFFFFF;

  /* accent — "soft club": natural greens/beiges/tans/greys/black, no bling */
  --svt-color-moss:         #7E8F72; /* plants, nature, calm */
  --svt-color-tan:          #C7B99B; /* natural leather, duster jackets */
  --svt-color-steel:        #8996A0; /* subway / platform steel */
  --svt-color-ink-black:    #17181A; /* Helvetica-style typographic contrast */

  /* accessible text variants — primitives above are tuned for large fills;
     these are darkened/lightened for AA-contrast body text use */
  --svt-color-grey-text:    #5C5F59; /* fog grey, darkened for text-on-light */
  --svt-color-moss-text:    #55624C; /* moss, darkened for text-on-light */
  --svt-color-tan-text:     #6B5E44; /* tan, darkened for text-on-light */

  /* ------------------------------------------------------------------
     1b. CONTRAST-VERIFIED "ON-COLOR" PAIRS
     Rule: every background primitive above has exactly one designated
     text color for use on top of it. Always reach for --svt-on-* rather
     than freehanding a text color onto a fill — that's what guarantees
     text-on-background contrast never falls below WCAG AA.

     Ratios below are computed (WCAG relative-luminance formula) and
     verified by contrast-check.js at the repo root — run `node
     contrast-check.js` after touching any primitive above. AA normal
     text needs 4.5:1, AA large text (≥24px, or ≥19px bold) and UI
     components/focus indicators need 3:1.

       token                    pair                     ratio    level
       --svt-on-ink-navy        paper on ink-navy        16.84    AAA
       --svt-on-deep-navy       paper on deep-navy       13.05    AAA
       --svt-on-circuit-teal    paper on circuit-teal     9.84    AAA
       --svt-on-fog-grey        ink-navy on fog-grey       8.07    AAA
       --svt-on-paper           ink-navy on paper         16.84    AAA
       --svt-on-white           ink-navy on white         19.22    AAA
       --svt-on-moss            ink-navy on moss           5.55    AA
       --svt-on-tan             ink-navy on tan            9.92    AAA
       --svt-on-steel           ink-navy on steel          6.35    AA
       --svt-on-ink-black       paper on ink-black        15.56    AAA

     Muted/secondary text (grey-text, moss-text, tan-text) is verified
     against paper/white only — 5.56–5.68:1, AA for normal text. Do not
     use these darkened variants on any of the dark primaries; they were
     not tuned for that pairing and will fail.

     Explicitly disallowed: text in one accent color set directly on the
     fill of a different accent (e.g. tan-text on moss, or any accent-on-
     accent combination). None of these were verified and several fail
     outright (e.g. moss background with tan-text ≈ 1.8:1). If a design
     needs an accent-colored background, the text on it is --svt-on-*
     for that accent — full stop, not another accent's text color.
     ------------------------------------------------------------------ */

  --svt-on-ink-navy:     var(--svt-color-paper);
  --svt-on-deep-navy:    var(--svt-color-paper);
  --svt-on-circuit-teal: var(--svt-color-paper);
  --svt-on-fog-grey:     var(--svt-color-ink-navy);
  --svt-on-paper:        var(--svt-color-ink-navy);
  --svt-on-white:        var(--svt-color-ink-navy);
  --svt-on-moss:         var(--svt-color-ink-navy);
  --svt-on-tan:          var(--svt-color-ink-navy);
  --svt-on-steel:        var(--svt-color-ink-navy);
  --svt-on-ink-black:    var(--svt-color-paper);

  /* ------------------------------------------------------------------
     2. COLOR ROLES (light theme — default)
     Components should reference these, not the primitives directly.
     ------------------------------------------------------------------ */

  --svt-bg-page:            var(--svt-color-paper);
  --svt-bg-surface:         var(--svt-color-white);
  --svt-bg-surface-inverted: var(--svt-color-deep-navy);
  --svt-bg-inverted:        var(--svt-color-ink-navy);

  --svt-text-primary:       var(--svt-color-ink-navy);
  --svt-text-secondary:     var(--svt-color-grey-text);
  --svt-text-inverted:      var(--svt-color-paper);
  --svt-text-inverted-muted: var(--svt-color-fog-grey);
  --svt-text-link:          var(--svt-color-circuit-teal);
  --svt-text-link-hover:    var(--svt-color-deep-navy);

  --svt-border-default:     rgba(10, 14, 28, 0.14);
  --svt-border-strong:      rgba(10, 14, 28, 0.28);
  --svt-border-inverted:    rgba(241, 240, 234, 0.18);

  --svt-fill-primary:       var(--svt-color-ink-navy);
  --svt-fill-primary-hover: var(--svt-color-deep-navy);
  --svt-on-fill-primary:    var(--svt-color-paper);

  --svt-fill-secondary:     transparent;
  --svt-border-secondary:   var(--svt-color-circuit-teal);
  --svt-text-secondary-btn: var(--svt-color-circuit-teal);

  /* accent roles — use sparingly, per brand pairing guidance */
  --svt-accent-moss:        var(--svt-color-moss);
  --svt-accent-tan:         var(--svt-color-tan);
  --svt-accent-steel:       var(--svt-color-steel);
  --svt-accent-ink-black:   var(--svt-color-ink-black);

  --svt-focus-ring:         var(--svt-color-circuit-teal);

  /* ------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------ */

  --svt-font-display: "Saira", "Arial Narrow", sans-serif;
  --svt-font-body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --svt-weight-body-light:   300; /* default body weight — brand voice */
  --svt-weight-body-regular: 400; /* small UI text / below 14px, for legibility */
  --svt-weight-body-medium:  500;
  --svt-weight-display-semibold: 600;
  --svt-weight-display-bold:     700;

  /* type scale — rem, 16px base */
  --svt-text-xs:   0.75rem;   /* 12px — captions, fine print */
  --svt-text-sm:   0.875rem;  /* 14px — UI labels, secondary text */
  --svt-text-base: 1rem;      /* 16px — body copy */
  --svt-text-md:   1.125rem;  /* 18px — lead paragraphs */
  --svt-text-lg:   1.25rem;   /* 20px — small headlines / H4 */
  --svt-text-xl:   1.5rem;    /* 24px — H3 */
  --svt-text-2xl:  2rem;      /* 32px — H2 */
  --svt-text-3xl:  2.5rem;    /* 40px — H1 */
  --svt-text-4xl:  3.25rem;   /* 52px — hero display */

  --svt-leading-tight:  1.15; /* display headlines */
  --svt-leading-snug:   1.35; /* small headings */
  --svt-leading-normal: 1.6;  /* body copy, long-form */
  --svt-leading-loose:  1.8;  /* airy captions */

  --svt-tracking-tight:   -0.01em; /* large display type */
  --svt-tracking-normal:  0em;
  --svt-tracking-wide:    0.02em;
  --svt-tracking-eyebrow: 0.12em;  /* all-caps labels, e.g. "01 — OVERVIEW" */

  /* ------------------------------------------------------------------
     4. SPACING (4px base grid)
     ------------------------------------------------------------------ */

  --svt-space-1: 0.25rem;  /* 4px */
  --svt-space-2: 0.5rem;   /* 8px */
  --svt-space-3: 0.75rem;  /* 12px */
  --svt-space-4: 1rem;     /* 16px */
  --svt-space-5: 1.5rem;   /* 24px */
  --svt-space-6: 2rem;     /* 32px */
  --svt-space-7: 3rem;     /* 48px */
  --svt-space-8: 4rem;     /* 64px */
  --svt-space-9: 6rem;     /* 96px */

  /* ------------------------------------------------------------------
     5. RADIUS + BORDERS
     GXSC direction is urban/minimal, not soft-rounded — keep radii small.
     Reserve larger radii for badges/pills only, used sparingly.
     ------------------------------------------------------------------ */

  --svt-radius-sm:   2px;
  --svt-radius-md:   4px;
  --svt-radius-lg:   8px;
  --svt-radius-pill: 999px;

  --svt-border-width: 1px;

  /* ------------------------------------------------------------------
     6. LAYOUT REFERENCE
     var() cannot be used inside @media conditions — these are reference
     values for JS (matchMedia) or container queries, not for @media rules.
     -------------------------------------------------------------------- */

  --svt-breakpoint-sm: 480px;
  --svt-breakpoint-md: 768px;
  --svt-breakpoint-lg: 1024px;
  --svt-breakpoint-xl: 1280px;

  /* ------------------------------------------------------------------
     7. MOTION
     ------------------------------------------------------------------ */

  --svt-duration-fast: 120ms;
  --svt-duration-base: 200ms;
  --svt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Dark theme
   Apply via <html data-theme="dark"> or prefers-color-scheme.
   Sacred Valley Tech's identity is already navy-heavy, so "dark mode" here
   is closer to the brand's natural resting state than an inverted palette.
   ========================================================================== */

[data-theme="dark"] {
  --svt-bg-page:             var(--svt-color-ink-navy);
  --svt-bg-surface:          var(--svt-color-deep-navy);
  --svt-bg-surface-inverted: var(--svt-color-paper);
  --svt-bg-inverted:         var(--svt-color-paper);

  --svt-text-primary:        var(--svt-color-paper);
  --svt-text-secondary:      var(--svt-color-fog-grey);
  --svt-text-inverted:       var(--svt-color-ink-navy);
  --svt-text-link:           var(--svt-color-steel);
  --svt-text-link-hover:     var(--svt-color-paper);

  --svt-border-default:      rgba(241, 240, 234, 0.16);
  --svt-border-strong:       rgba(241, 240, 234, 0.32);

  --svt-fill-primary:        var(--svt-color-paper);
  --svt-fill-primary-hover:  var(--svt-color-fog-grey);
  --svt-on-fill-primary:     var(--svt-color-ink-navy);

  --svt-border-secondary:    var(--svt-color-steel);
  --svt-text-secondary-btn:  var(--svt-color-steel);

  --svt-focus-ring:          var(--svt-color-steel);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --svt-bg-page:             var(--svt-color-ink-navy);
    --svt-bg-surface:          var(--svt-color-deep-navy);
    --svt-bg-surface-inverted: var(--svt-color-paper);
    --svt-bg-inverted:         var(--svt-color-paper);

    --svt-text-primary:        var(--svt-color-paper);
    --svt-text-secondary:      var(--svt-color-fog-grey);
    --svt-text-inverted:       var(--svt-color-ink-navy);
    --svt-text-link:           var(--svt-color-steel);
    --svt-text-link-hover:     var(--svt-color-paper);

    --svt-border-default:      rgba(241, 240, 234, 0.16);
    --svt-border-strong:       rgba(241, 240, 234, 0.32);

    --svt-fill-primary:        var(--svt-color-paper);
    --svt-fill-primary-hover:  var(--svt-color-fog-grey);
    --svt-on-fill-primary:     var(--svt-color-ink-navy);

    --svt-border-secondary:    var(--svt-color-steel);
    --svt-text-secondary-btn:  var(--svt-color-steel);

    --svt-focus-ring:          var(--svt-color-steel);
  }
}

/* ==========================================================================
   Base element mapping
   A minimal, opinionated baseline showing how roles get consumed.

   Scoped under .svt-scope (applied to style-guide.html's <body>), NOT
   global. This is a demo baseline for projects starting from scratch —
   this repo already hand-rolls its own component system per page
   (design-tokens.css's --color-* aliases, index.css, uberuns.css, etc.),
   which don't participate in the dark-theme variables below. Bare tag
   selectors here (h1-h4, body, a) would directly match real headings/
   links on every real page regardless of specificity, since a direct
   tag match always wins over inheriting a page's own color. That's
   exactly how this surfaced: uberuns.html's "Unsere Geschichte" H1 has
   no color of its own, so it inherits from its .u-white ancestor
   (ink-navy) — until this block's bare "h1 { color: var(--svt-text-
   primary) }" matched it directly instead, and --svt-text-primary
   flips to Paper under prefers-color-scheme:dark, while .u-white's
   background stays hardcoded white — pale text on a white background
   for anyone with dark mode on. If you want this baseline for a new
   project, delete the .svt-scope prefixes below; if you want real
   sitewide dark-mode support here, every page's own CSS needs to
   consume these role tokens too, not just this one demo layer.
   ========================================================================== */

.svt-scope {
  background: var(--svt-bg-page);
  color: var(--svt-text-primary);
  font-family: var(--svt-font-body);
  font-weight: var(--svt-weight-body-light);
  font-size: var(--svt-text-base);
  line-height: var(--svt-leading-normal);
  -webkit-font-smoothing: antialiased;
}

.svt-scope h1, .svt-scope h2, .svt-scope h3, .svt-scope h4 {
  font-family: var(--svt-font-display);
  font-weight: var(--svt-weight-display-bold);
  line-height: var(--svt-leading-tight);
  letter-spacing: var(--svt-tracking-tight);
  color: var(--svt-text-primary);
}

.svt-scope h1 { font-size: var(--svt-text-3xl); }
.svt-scope h2 { font-size: var(--svt-text-2xl); }
.svt-scope h3 { font-size: var(--svt-text-xl); }
.svt-scope h4 { font-size: var(--svt-text-lg); }

.svt-scope p { margin: 0 0 var(--svt-space-4); }

.svt-scope a {
  color: var(--svt-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.svt-scope a:hover { color: var(--svt-text-link-hover); }

.svt-eyebrow {
  font-family: var(--svt-font-display);
  font-weight: var(--svt-weight-display-bold);
  font-size: var(--svt-text-xs);
  letter-spacing: var(--svt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--svt-text-link);
}

.svt-scope button, .svt-btn {
  font-family: var(--svt-font-display);
  font-weight: var(--svt-weight-display-semibold);
  font-size: var(--svt-text-sm);
  border-radius: var(--svt-radius-md);
  padding: var(--svt-space-3) var(--svt-space-5);
  border: var(--svt-border-width) solid transparent;
  cursor: pointer;
  transition: background var(--svt-duration-base) var(--svt-ease-out),
              color var(--svt-duration-base) var(--svt-ease-out),
              border-color var(--svt-duration-base) var(--svt-ease-out);
}

.svt-btn--primary {
  background: var(--svt-fill-primary);
  color: var(--svt-on-fill-primary);
}
.svt-btn--primary:hover { background: var(--svt-fill-primary-hover); }

.svt-btn--secondary {
  background: var(--svt-fill-secondary);
  color: var(--svt-text-secondary-btn);
  border-color: var(--svt-border-secondary);
}
.svt-btn--secondary:hover { background: var(--svt-border-default); }

.svt-btn--accent {
  /* one accent-filled CTA per view, max — see brand manual pairing rules.
     Text color comes from --svt-on-moss, not a hardcoded value — swap
     --svt-accent-moss for --svt-accent-tan or --svt-accent-steel and the
     matching --svt-on-* token if you change which accent is used here. */
  background: var(--svt-accent-moss);
  color: var(--svt-on-moss);
}

.svt-scope :focus-visible {
  outline: 2px solid var(--svt-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ==========================================================================
   Fill utilities
   Each pairs a background primitive with its verified --svt-on-* text
   color in one class. Use these instead of setting background-color and
   color separately — it's the fastest way to make the contrast rule
   impossible to get wrong by hand.
   ========================================================================== */

.svt-fill-ink-navy     { background: var(--svt-color-ink-navy);     color: var(--svt-on-ink-navy); }
.svt-fill-deep-navy    { background: var(--svt-color-deep-navy);    color: var(--svt-on-deep-navy); }
.svt-fill-circuit-teal { background: var(--svt-color-circuit-teal); color: var(--svt-on-circuit-teal); }
.svt-fill-fog-grey     { background: var(--svt-color-fog-grey);     color: var(--svt-on-fog-grey); }
.svt-fill-paper        { background: var(--svt-color-paper);        color: var(--svt-on-paper); }
.svt-fill-white        { background: var(--svt-color-white);        color: var(--svt-on-white); }
.svt-fill-moss         { background: var(--svt-color-moss);         color: var(--svt-on-moss); }
.svt-fill-tan          { background: var(--svt-color-tan);          color: var(--svt-on-tan); }
.svt-fill-steel        { background: var(--svt-color-steel);        color: var(--svt-on-steel); }
.svt-fill-ink-black    { background: var(--svt-color-ink-black);    color: var(--svt-on-ink-black); }