/* ==========================================================================
   KNĀ LABS — Design System Foundation
   "Energy without the noise."
   Botanical energy for calm focus, clear thinking, and modern work rituals.
   Calm · Premium · Minimal · Modern · Intelligent · Clean · Botanical.
   Import once; everything downstream reads the custom properties.
   ========================================================================== */

/* Satoshi via Fontshare · IBM Plex Mono via Google Fonts · White Sign (uploaded) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'White Sign';
  src: url('../fonts/WhiteSign.woff') format('woff'),
       url('../fonts/WhiteSign.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     CORE — the brand colours. Deep Slate · Porcelain White · Muted Gold.
     ------------------------------------------------------------------ */
  --slate-ink:  #2C3137;   /* Deep Slate — headlines, dark surfaces, logo */
  --porcelain:  #FAF7F1;   /* Porcelain White — primary raised surface */
  --bone:       #F2EFE7;   /* warm page background */
  --gold:       #B89150;   /* Muted Gold — the single accent */

  /* ------------------------------------------------------------------
     SLATE RAMP
     ------------------------------------------------------------------ */
  --slate-900: #1B2024;
  --slate-800: #21262C;
  --slate-700: #2C3137;   /* = --slate-ink */
  --slate-600: #383F46;
  --slate-500: #4D545B;
  --slate-400: #6E6B61;   /* warm muted body text on light */
  --slate-300: #8A8579;   /* captions / meta on light */
  --slate-200: #B6B1A4;

  /* ------------------------------------------------------------------
     PAPER RAMP — porcelain / linen neutrals
     ------------------------------------------------------------------ */
  --paper-50:  #FFFFFF;
  --paper-100: #FAF7F1;   /* = --porcelain */
  --paper-200: #F2EFE7;   /* = --bone */
  --paper-300: #ECE7DC;   /* sunken */
  --line:      #DCD5C7;   /* default hairline on light */
  --line-soft: #E6E0D4;

  /* ------------------------------------------------------------------
     GOLD + BOTANICAL SECONDARIES
     ------------------------------------------------------------------ */
  --gold-deep: #9C7A3C;
  --gold-300:  #CBA968;
  --gold-100:  #E8DCC2;   /* tint */
  --gold-50:   #F3ECDD;
  --sage:      #A8B89A;
  --sage-deep: #8B9E7B;
  --clay:      #C7B49A;

  /* dark-surface chrome */
  --on-slate-fg:    #F2EFE7;
  --on-slate-muted: #9DA09A;
  --on-slate-line:  rgba(242,239,231,0.14);

  /* ------------------------------------------------------------------
     SEMANTIC TOKENS
     ------------------------------------------------------------------ */
  --bg:          var(--bone);
  --bg-raised:   var(--porcelain);
  --bg-sunken:   var(--paper-300);
  --bg-inverse:  var(--slate-ink);

  --fg:          var(--slate-ink);
  --fg-muted:    var(--slate-400);
  --fg-quiet:    var(--slate-300);
  --fg-inverse:  var(--on-slate-fg);

  --border:        var(--line);
  --border-strong: var(--slate-200);
  --border-inverse:var(--on-slate-line);

  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-tint: var(--gold-50);
  --on-accent:   var(--slate-ink);

  /* Functional — kept muted to fit the brand */
  --success: #6E7F60;
  --warning: #B89150;
  --danger:  #C0492B;   /* warm rust-red — confident pop, still on-brand */

  /* ------------------------------------------------------------------
     TYPE — families
     Primary   : Satoshi        (clean · modern · confident)
     Secondary : IBM Plex Mono  (technical · precise · functional)
     Accent    : White Sign     (human · signature · warm)
     ------------------------------------------------------------------ */
  --font-primary: 'Satoshi', 'Geist', system-ui, -apple-system, sans-serif;
  --font-sans:    var(--font-primary);
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --font-script:  'White Sign', 'Segoe Script', cursive;

  /* ------------------------------------------------------------------
     TYPE SCALE — generous, editorial
     ------------------------------------------------------------------ */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  22px;
  --text-xl:  28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 88px;
  --text-6xl: 120px;

  --leading-tight:  1.02;
  --leading-snug:   1.16;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.2em;    /* mono labels / stamps */

  /* ------------------------------------------------------------------
     SPACING — 8px base grid (scale spacing by 8)
     ------------------------------------------------------------------ */
  --sp-0: 0;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;
  --sp-10: 192px;

  /* ------------------------------------------------------------------
     RADII — square-shouldered, minimal
     ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------
     SHADOWS — very quiet. Luxury, not SaaS.
     ------------------------------------------------------------------ */
  --shadow-xs: 0 1px 0 0 rgba(44,49,55,0.04);
  --shadow-sm: 0 1px 2px 0 rgba(44,49,55,0.06);
  --shadow-md: 0 4px 12px -2px rgba(44,49,55,0.08), 0 2px 4px -1px rgba(44,49,55,0.05);
  --shadow-lg: 0 16px 40px -8px rgba(44,49,55,0.14), 0 6px 12px -4px rgba(44,49,55,0.06);
  --shadow-inset: inset 0 0 0 1px rgba(44,49,55,0.06);

  /* ------------------------------------------------------------------
     MOTION — short, confident, ease-out. No bounces.
     ------------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* global base reset */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }