/* ============================================================
   VERBAFY DESIGN SYSTEM — Colors & Typography
   v1.0 · April 2026
   ============================================================ */

/* Google Fonts — substitutions for brand fonts
   FLAG: DM Serif Display, Plus Jakarta Sans, JetBrains Mono
   loaded from Google Fonts. Replace with licensed originals if available. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {

  /* --- Primary Purple Scale --- */
  --color-primary-50:  oklch(97% 0.04 288);
  --color-primary-100: oklch(93% 0.07 288);
  --color-primary-200: oklch(86% 0.11 288);
  --color-primary-300: oklch(77% 0.14 288);
  --color-primary-400: oklch(66% 0.16 288);
  --color-primary-500: oklch(54% 0.17 288);   /* Brand primary */
  --color-primary-600: oklch(46% 0.17 288);
  --color-primary-700: oklch(38% 0.16 288);
  --color-primary-800: oklch(30% 0.14 288);
  --color-primary-900: oklch(22% 0.10 288);

  /* --- Neutral / Pure Grey Scale --- */
  --color-neutral-50:  oklch(98.5% 0 0);
  --color-neutral-100: oklch(95.5% 0 0);
  --color-neutral-200: oklch(90%   0 0);
  --color-neutral-300: oklch(82%   0 0);
  --color-neutral-400: oklch(70%   0 0);
  --color-neutral-500: oklch(58%   0 0);
  --color-neutral-600: oklch(46%   0 0);
  --color-neutral-700: oklch(36%   0 0);
  --color-neutral-800: oklch(26%   0 0);
  --color-neutral-900: oklch(16%   0 0);

  /* --- Accent Gold / Amber --- */
  --color-accent-50:   oklch(97% 0.04 65);
  --color-accent-100:  oklch(93% 0.08 65);
  --color-accent-200:  oklch(87% 0.12 65);
  --color-accent-300:  oklch(80% 0.14 65);
  --color-accent-400:  oklch(74% 0.14 65);
  --color-accent-500:  oklch(68% 0.14 65);   /* Achievement / progress */
  --color-accent-600:  oklch(58% 0.14 65);
  --color-accent-700:  oklch(48% 0.13 65);

  /* --- Semantic Colors --- */
  --color-success-100: oklch(93% 0.06 150);
  --color-success-500: oklch(56% 0.15 150);
  --color-success-700: oklch(40% 0.13 150);

  --color-warning-100: oklch(95% 0.06 75);
  --color-warning-500: oklch(72% 0.14 75);
  --color-warning-700: oklch(52% 0.14 75);

  --color-error-100:   oklch(94% 0.06 25);
  --color-error-500:   oklch(56% 0.18 25);
  --color-error-700:   oklch(40% 0.16 25);

  /* --- Surfaces & Backgrounds --- */
  --color-surface:          oklch(99% 0.008 288);   /* Near-white, warm purple tint */
  --color-surface-subtle:   oklch(97% 0.018 288);   /* Slight purple wash */
  --color-surface-muted:    oklch(94% 0.030 288);   /* Section backgrounds */
  --color-surface-dark:     oklch(20% 0.12 288);    /* Deep navy-purple hero */
  --color-surface-dark-2:   oklch(26% 0.10 288);    /* Slightly lighter dark */

  /* --- Foreground / Text --- */
  --color-fg-primary:   oklch(14% 0 0);   /* near-black */
  --color-fg-secondary: oklch(38% 0 0);
  --color-fg-tertiary:  oklch(58% 0 0);
  --color-fg-inverse:   oklch(98% 0 0);
  --color-fg-accent:    var(--color-primary-500);

  /* --- Borders --- */
  --color-border-subtle: oklch(91% 0 0);
  --color-border:        oklch(82% 0 0);
  --color-border-strong: oklch(68% 0 0);

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     BORDER RADII
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-low:  0 1px 3px oklch(0% 0 0 / 7%), 0 1px 2px oklch(0% 0 0 / 4%);
  --shadow-mid:  0 4px 16px oklch(0% 0 0 / 10%), 0 2px 6px oklch(0% 0 0 / 6%);
  --shadow-high: 0 20px 48px oklch(0% 0 0 / 15%), 0 8px 16px oklch(0% 0 0 / 8%);
  --shadow-primary: 0 4px 20px oklch(54% 0.17 288 / 28%);
  --shadow-primary-high: 0 8px 32px oklch(54% 0.17 288 / 36%);

  /* ============================================================
     TYPOGRAPHY — Base Families
     ============================================================ */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ============================================================
     TYPOGRAPHY — Scale (fluid-friendly base)
     ============================================================ */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  /* --- Line Heights --- */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Letter Spacing --- */
  --tracking-tight:  -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ============================================================
     SEMANTIC TYPE STYLES
     ============================================================ */

  /* Display heading (hero, section openers) */
  --h-display-font:    var(--font-display);
  --h-display-size:    var(--text-5xl);
  --h-display-weight:  400;
  --h-display-leading: var(--leading-tight);
  --h-display-tracking: var(--tracking-tight);

  /* H1 */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-4xl);
  --h1-weight:  400;
  --h1-leading: var(--leading-tight);

  /* H2 */
  --h2-font:    var(--font-display);
  --h2-size:    var(--text-3xl);
  --h2-weight:  400;
  --h2-leading: var(--leading-snug);

  /* H3 */
  --h3-font:    var(--font-body);
  --h3-size:    var(--text-xl);
  --h3-weight:  700;
  --h3-leading: var(--leading-snug);

  /* H4 */
  --h4-font:    var(--font-body);
  --h4-size:    var(--text-lg);
  --h4-weight:  600;
  --h4-leading: var(--leading-normal);

  /* Body */
  --p-font:    var(--font-body);
  --p-size:    var(--text-base);
  --p-weight:  400;
  --p-leading: var(--leading-relaxed);

  /* Label / UI */
  --label-font:    var(--font-body);
  --label-size:    var(--text-sm);
  --label-weight:  600;
  --label-leading: var(--leading-normal);

  /* Caption */
  --caption-font:    var(--font-body);
  --caption-size:    var(--text-xs);
  --caption-weight:  400;
  --caption-leading: var(--leading-normal);

  /* Code */
  --code-font:    var(--font-mono);
  --code-size:    var(--text-sm);
  --code-weight:  400;
  --code-leading: var(--leading-relaxed);

  /* ============================================================
     ANIMATION
     ============================================================ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro:  150ms;
  --duration-fast:   250ms;
  --duration-normal: 400ms;
  --duration-slow:   600ms;
}

/* ============================================================
   GLOBAL RESETS & BASE STYLES
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-primary);
  background: var(--color-surface);
}

/* Semantic type elements */
h1, .h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h2, .h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}

h3, .h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}

h4, .h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
}

p, .p {
  font-family: var(--p-font);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-primary);
}

small, .caption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  line-height: var(--leading-normal);
  color: var(--color-fg-secondary);
}

code, pre {
  font-family: var(--code-font);
  font-size: var(--code-size);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-fg-accent);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-in-out);
}
a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}