/*
 * sonik-tokens.css
 * Sonik design tokens — all brand colours, typography, spacing, and component variables
 * Drop this file into your project and import it at the top of your main CSS.
 * Generated May 2026
 */

:root {

  /* ============================================================
     Colours — core palette
     ============================================================ */

  /* Primary — deep brown */
  --sonik-brown-900:  #1A1410;
  --sonik-brown-800:  #2E2418;
  --sonik-brown-700:  #3A2E24;
  --sonik-brown-600:  #4A3828;
  --sonik-brown-500:  #5C4A3A;   /* PRIMARY ACCENT — buttons, links, mark on light */
  --sonik-brown-400:  #7A6050;
  --sonik-brown-300:  #8A7868;   /* muted text, secondary labels */
  --sonik-brown-200:  #C4BAB0;
  --sonik-brown-100:  #D4C8BC;
  --sonik-brown-50:   #E0D9D0;   /* borders */

  /* Sand — warm neutrals */
  --sonik-sand-900:   #1A1410;
  --sonik-sand-800:   #2E2820;   /* dark mode surface */
  --sonik-sand-700:   #1C1C1A;   /* dark mode background */
  --sonik-sand-200:   #EDE8E2;
  --sonik-sand-100:   #F4EFE8;   /* primary background */
  --sonik-sand-50:    #FAFAF8;   /* secondary background / nav */

  /* Stone */
  --sonik-stone-200:  #D4C8BC;
  --sonik-stone-100:  #E0D8D0;
  --sonik-stone-50:   #E8E4DF;   /* tertiary fills */

  /* Gold — use on dark backgrounds only */
  --sonik-gold-400:   #B88A5A;
  --sonik-gold-300:   #D4A97A;   /* PRIMARY GOLD — mark on dark, accents */
  --sonik-gold-200:   #E8C89A;
  --sonik-gold-100:   #F5E4C8;

  /* Cream */
  --sonik-cream:      #FAF8F5;   /* text and mark on dark/accent backgrounds */

  /* ============================================================
     Semantic colour aliases
     — use these in your components, not the raw palette above
     ============================================================ */

  /* Backgrounds */
  --sonik-bg-page:        var(--sonik-sand-50);      /* #FAFAF8 — main page background */
  --sonik-bg-surface:     var(--sonik-sand-100);     /* #F4EFE8 — cards, section fills */
  --sonik-bg-tertiary:    var(--sonik-stone-50);     /* #E8E4DF — subtle fills */
  --sonik-bg-accent:      var(--sonik-brown-500);    /* #5C4A3A — dark accent sections */
  --sonik-bg-dark:        var(--sonik-sand-700);     /* #1C1C1A — dark mode page */
  --sonik-bg-dark-surface:var(--sonik-sand-800);     /* #2E2820 — dark mode cards */

  /* Text */
  --sonik-text-primary:   var(--sonik-brown-900);    /* #1A1410 — headlines, body */
  --sonik-text-secondary: var(--sonik-brown-300);    /* #8A7868 — captions, nav links */
  --sonik-text-muted:     var(--sonik-brown-200);    /* #C4BAB0 — hints, placeholders */
  --sonik-text-on-dark:   var(--sonik-cream);        /* #FAF8F5 — text on dark bg */
  --sonik-text-on-accent: var(--sonik-cream);        /* #FAF8F5 — text on brown bg */

  /* Borders */
  --sonik-border-subtle:  var(--sonik-brown-50);     /* #E0D9D0 — default borders */
  --sonik-border-medium:  var(--sonik-brown-100);    /* #D4C8BC — hover borders */
  --sonik-border-strong:  var(--sonik-brown-200);    /* #C4BAB0 — emphasis borders */

  /* Brand accent */
  --sonik-accent:         var(--sonik-brown-500);    /* #5C4A3A */
  --sonik-accent-dark:    var(--sonik-brown-700);    /* #3A2E24 — hover state */
  --sonik-accent-gold:    var(--sonik-gold-300);     /* #D4A97A — on dark only */

  /* ============================================================
     Typography
     ============================================================ */

  --sonik-font-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sonik-font-mono:  "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* Scale */
  --sonik-text-xs:    11px;
  --sonik-text-sm:    13px;
  --sonik-text-base:  15px;
  --sonik-text-md:    16px;
  --sonik-text-lg:    18px;
  --sonik-text-xl:    22px;
  --sonik-text-2xl:   28px;
  --sonik-text-3xl:   36px;
  --sonik-text-4xl:   46px;

  /* Weight */
  --sonik-weight-regular: 400;
  --sonik-weight-medium:  500;   /* primary weight — headings, wordmark, buttons */

  /* Tracking */
  --sonik-tracking-tight:  -0.03em;   /* large headings */
  --sonik-tracking-normal: -0.01em;   /* body headings */
  --sonik-tracking-wide:    0.06em;   /* labels, eyebrows */
  --sonik-tracking-wider:   0.08em;   /* uppercase labels */

  /* Line height */
  --sonik-leading-tight:  1.1;
  --sonik-leading-snug:   1.4;
  --sonik-leading-normal: 1.55;
  --sonik-leading-relaxed:1.7;

  /* ============================================================
     Spacing
     ============================================================ */

  --sonik-space-1:   4px;
  --sonik-space-2:   8px;
  --sonik-space-3:   12px;
  --sonik-space-4:   16px;
  --sonik-space-5:   20px;
  --sonik-space-6:   24px;
  --sonik-space-8:   32px;
  --sonik-space-10:  40px;
  --sonik-space-12:  48px;
  --sonik-space-16:  64px;
  --sonik-space-20:  80px;

  /* ============================================================
     Border radius
     ============================================================ */

  --sonik-radius-sm:   6px;
  --sonik-radius-md:   8px;
  --sonik-radius-lg:   12px;
  --sonik-radius-xl:   18px;   /* app icon container */
  --sonik-radius-full: 9999px; /* pills, tags */

  /* ============================================================
     Borders
     ============================================================ */

  --sonik-border:        0.5px solid var(--sonik-border-subtle);
  --sonik-border-hover:  0.5px solid var(--sonik-border-medium);
  --sonik-border-strong: 0.5px solid var(--sonik-border-strong);

  /* ============================================================
     Component tokens
     ============================================================ */

  /* Nav */
  --sonik-nav-height:      60px;
  --sonik-nav-bg:          var(--sonik-bg-page);
  --sonik-nav-border:      var(--sonik-border);
  --sonik-nav-link-color:  var(--sonik-text-secondary);
  --sonik-nav-link-hover:  var(--sonik-text-primary);

  /* Buttons — primary */
  --sonik-btn-bg:          var(--sonik-accent);
  --sonik-btn-bg-hover:    var(--sonik-accent-dark);
  --sonik-btn-text:        var(--sonik-cream);
  --sonik-btn-radius:      var(--sonik-radius-md);
  --sonik-btn-padding:     10px 24px;
  --sonik-btn-font-size:   var(--sonik-text-sm);
  --sonik-btn-weight:      var(--sonik-weight-medium);

  /* Buttons — ghost */
  --sonik-btn-ghost-bg:        transparent;
  --sonik-btn-ghost-border:    var(--sonik-border-medium);
  --sonik-btn-ghost-text:      var(--sonik-accent);
  --sonik-btn-ghost-bg-hover:  var(--sonik-bg-surface);

  /* Cards / feature tiles */
  --sonik-card-bg:        var(--sonik-bg-surface);
  --sonik-card-border:    var(--sonik-border);
  --sonik-card-radius:    var(--sonik-radius-lg);
  --sonik-card-padding:   20px;

  /* Tags / protocol pills */
  --sonik-tag-bg:         var(--sonik-stone-50);
  --sonik-tag-border:     var(--sonik-border-medium);
  --sonik-tag-text:       var(--sonik-accent);
  --sonik-tag-radius:     var(--sonik-radius-full);
  --sonik-tag-padding:    4px 12px;
  --sonik-tag-font-size:  var(--sonik-text-sm);

  /* Quote / dark section */
  --sonik-quote-bg:       var(--sonik-bg-accent);
  --sonik-quote-text:     var(--sonik-cream);
  --sonik-quote-sub:      #C4A888;
  --sonik-quote-mark:     var(--sonik-accent-gold);

  /* Footer */
  --sonik-footer-bg:      var(--sonik-bg-surface);
  --sonik-footer-border:  var(--sonik-border);
  --sonik-footer-text:    var(--sonik-text-secondary);
  --sonik-footer-domain:  var(--sonik-accent);
}

/* ============================================================
   Dark mode overrides
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --sonik-bg-page:         var(--sonik-sand-700);       /* #1C1C1A */
    --sonik-bg-surface:      var(--sonik-sand-800);       /* #2E2820 */
    --sonik-bg-tertiary:     #252220;
    --sonik-text-primary:    var(--sonik-cream);          /* #FAF8F5 */
    --sonik-text-secondary:  #8A7868;
    --sonik-text-muted:      #5A4A3A;
    --sonik-border-subtle:   rgba(255, 248, 245, 0.08);
    --sonik-border-medium:   rgba(255, 248, 245, 0.14);
    --sonik-border-strong:   rgba(255, 248, 245, 0.22);
    --sonik-accent:          var(--sonik-gold-300);       /* #D4A97A — gold as primary on dark */
    --sonik-accent-dark:     var(--sonik-gold-400);
    --sonik-btn-text:        #1A1410;
    --sonik-btn-ghost-text:  var(--sonik-gold-300);
    --sonik-btn-ghost-border:rgba(212, 169, 122, 0.3);
    --sonik-nav-bg:          var(--sonik-sand-700);
    --sonik-footer-bg:       var(--sonik-sand-800);
    --sonik-tag-bg:          #2E2820;
    --sonik-tag-text:        var(--sonik-gold-300);
  }
}

/* ============================================================
   Base resets and defaults
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--sonik-font-sans);
  font-size: var(--sonik-text-base);
  font-weight: var(--sonik-weight-regular);
  color: var(--sonik-text-primary);
  background: var(--sonik-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Utility classes
   ============================================================ */

.sonik-btn {
  display: inline-block;
  padding: var(--sonik-btn-padding);
  background: var(--sonik-btn-bg);
  color: var(--sonik-btn-text);
  font-size: var(--sonik-btn-font-size);
  font-weight: var(--sonik-btn-weight);
  border: none;
  border-radius: var(--sonik-btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.sonik-btn:hover { background: var(--sonik-btn-bg-hover); }

.sonik-btn-ghost {
  display: inline-block;
  padding: var(--sonik-btn-padding);
  background: var(--sonik-btn-ghost-bg);
  color: var(--sonik-btn-ghost-text);
  font-size: var(--sonik-btn-font-size);
  font-weight: var(--sonik-weight-regular);
  border: var(--sonik-btn-ghost-border);
  border-radius: var(--sonik-btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.sonik-btn-ghost:hover { background: var(--sonik-btn-ghost-bg-hover); }

.sonik-tag {
  display: inline-block;
  padding: var(--sonik-tag-padding);
  background: var(--sonik-tag-bg);
  color: var(--sonik-tag-text);
  font-size: var(--sonik-tag-font-size);
  border: var(--sonik-tag-border);
  border-radius: var(--sonik-tag-radius);
}

.sonik-card {
  background: var(--sonik-card-bg);
  border: var(--sonik-card-border);
  border-radius: var(--sonik-card-radius);
  padding: var(--sonik-card-padding);
}

.sonik-eyebrow {
  font-size: var(--sonik-text-xs);
  color: var(--sonik-text-secondary);
  letter-spacing: var(--sonik-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--sonik-weight-medium);
}