/* ============================================================
   KREAMOS — Design Foundations
   Color + Type tokens (base + semantic)
   Aesthetic: Swiss minimal · deep confident blue · expressive display
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------
     1. BASE PALETTE  (raw values — do not use directly in UI)
     ---------------------------------------------------------- */

  /* Ink — near-black with a faint blue cast (Swiss "black") */
  --ink:        #0A0E1A;
  --ink-soft:   #161B2B;

  /* Paper — warm-neutral whites */
  --white:      #FFFFFF;
  --paper:      #F5F5F1;   /* canvas / off-white sections */
  --paper-2:    #ECECE6;   /* alt canvas */

  /* Brand blue — deep, trustworthy cobalt with ambition energy */
  --blue-50:    #EDF0FF;
  --blue-100:   #D8DFFF;
  --blue-200:   #B2C0FF;
  --blue-300:   #859AFF;
  --blue-400:   #5571FF;
  --blue-500:   #2742EA;   /* PRIMARY — confident cobalt */
  --blue-600:   #1B30C8;
  --blue-700:   #15269B;
  --blue-800:   #101D6E;
  --blue-900:   #0B1342;   /* deep navy — dark sections */
  --blue-950:   #070C29;

  /* Neutral greys — faint cool cast to harmonize with blue */
  --grey-100:   #F1F1EF;
  --grey-200:   #E2E2DE;
  --grey-300:   #CBCBC5;
  --grey-400:   #A6A6A0;
  --grey-500:   #7B7B75;
  --grey-600:   #57574F;
  --grey-700:   #3A3A33;
  --grey-800:   #262620;

  /* Functional accents (used sparingly — system stays blue) */
  --signal-positive: #18794E;
  --signal-warning:  #B45309;
  --signal-error:    #C0362C;

  /* ----------------------------------------------------------
     2. SEMANTIC TOKENS  (use THESE in UI)
     ---------------------------------------------------------- */

  /* Surfaces */
  --bg:            var(--white);
  --bg-canvas:     var(--paper);
  --bg-canvas-2:   var(--paper-2);
  --bg-inverse:    var(--blue-950);
  --bg-brand:      var(--blue-500);

  /* Foreground / text */
  --fg:            var(--ink);
  --fg-muted:      var(--grey-600);
  --fg-subtle:     var(--grey-500);
  --fg-inverse:    var(--white);
  --fg-inverse-muted: rgba(255,255,255,0.62);
  --fg-brand:      var(--blue-500);

  /* Borders / lines (Swiss systems lean on hairlines, not shadows) */
  --border:        var(--grey-200);
  --border-strong: var(--ink);
  --border-inverse: rgba(255,255,255,0.16);
  --hairline:      1px solid var(--border);
  --rule:          2px solid var(--ink);

  /* Brand interaction states */
  --brand:         var(--blue-500);
  --brand-hover:   var(--blue-600);
  --brand-active:  var(--blue-700);

  /* ----------------------------------------------------------
     3. TYPE FAMILIES
     ---------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   900;

  /* ----------------------------------------------------------
     4. TYPE SCALE  (display is tight & heavy; body is calm)
     ---------------------------------------------------------- */
  --text-display-1: 900 clamp(56px, 9vw, 132px)/0.92 var(--font-display);
  --text-display-2: 900 clamp(44px, 6.5vw, 92px)/0.94 var(--font-display);
  --text-h1:        800 clamp(38px, 4.6vw, 64px)/1.0  var(--font-display);
  --text-h2:        800 clamp(30px, 3.2vw, 44px)/1.04 var(--font-display);
  --text-h3:        700 clamp(23px, 2vw, 30px)/1.1   var(--font-display);
  --text-h4:        700 20px/1.2 var(--font-display);
  --text-body-lg:   400 clamp(18px, 1.5vw, 21px)/1.55 var(--font-body);
  --text-body:      400 17px/1.6 var(--font-body);
  --text-body-sm:   400 15px/1.55 var(--font-body);
  --text-caption:   500 13px/1.4 var(--font-body);
  --text-eyebrow:   600 12px/1.2 var(--font-mono);  /* uppercase, tracked */

  /* Tracking */
  --track-display: -0.03em;
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-eyebrow: 0.16em;

  /* ----------------------------------------------------------
     5. SPACING  (4px base grid)
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ----------------------------------------------------------
     6. RADII  (Swiss = mostly sharp; tiny softening only)
     ---------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     7. ELEVATION  (used rarely — borders preferred)
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10,14,26,0.06);
  --shadow-sm: 0 2px 8px rgba(10,14,26,0.07);
  --shadow-md: 0 12px 32px rgba(10,14,26,0.10);
  --shadow-lg: 0 28px 70px rgba(11,19,66,0.18);

  /* ----------------------------------------------------------
     8. MOTION
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* default — confident settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   520ms;

  --maxw: 1320px;  /* content max-width */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (opt-in via classes / element tags)
   ============================================================ */

.k-display-1 { font: var(--text-display-1); letter-spacing: var(--track-display); color: var(--fg); text-wrap: balance; }
.k-display-2 { font: var(--text-display-2); letter-spacing: var(--track-display); color: var(--fg); text-wrap: balance; }
.k-h1 { font: var(--text-h1); letter-spacing: var(--track-display); color: var(--fg); text-wrap: balance; }
.k-h2 { font: var(--text-h2); letter-spacing: var(--track-tight); color: var(--fg); text-wrap: balance; }
.k-h3 { font: var(--text-h3); letter-spacing: var(--track-tight); color: var(--fg); }
.k-h4 { font: var(--text-h4); letter-spacing: var(--track-tight); color: var(--fg); }

.k-body-lg { font: var(--text-body-lg); color: var(--fg); }
.k-body    { font: var(--text-body); color: var(--fg); }
.k-body-sm { font: var(--text-body-sm); color: var(--fg-muted); }
.k-caption { font: var(--text-caption); color: var(--fg-subtle); }

.k-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Lead-in / measure helpers */
.k-measure { max-width: 62ch; }
.k-measure-tight { max-width: 44ch; }