/*
 * Kopal Design System — CSS Custom Properties
 * Fonts: Playfair Display (→ Anthropic Serif), DM Sans (→ Anthropic Sans), JetBrains Mono (→ Anthropic Mono)
 * Import via Google Fonts before using this file.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────
   FONTS
───────────────────────────────────────────── */
:root {
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ─────────────────────────────────────────────
   COLOR PRIMITIVES
───────────────────────────────────────────── */
:root {
  /* Brand */
  --color-terracotta:       #c96442;   /* Primary CTA, peak brand moments */
  --color-coral:            #5e5c5c;   /* Text accents, links on dark */

  /* Dark surfaces */
  --color-near-black:       #141413;   /* Primary text, dark page bg */
  --color-dark-surface:     #30302e;   /* Dark containers, nav border */
  --color-dark-warm:        #3d3d3a;   /* Dark text links, secondary emphasis */

  /* Light surfaces */
  --color-parchment:        #f5f4ed;   /* Primary light bg — the emotional core */
  --color-ivory:            #faf9f5;   /* Card surfaces on parchment */
  --color-white:            #ffffff;   /* Button surfaces, max contrast */
  --color-warm-sand:        #e8e6dc;   /* Button backgrounds, interactive surfaces */

  /* Neutrals (all warm-toned) */
  --color-charcoal-warm:    #4d4c48;   /* Button text on light */
  --color-olive-gray:       #5e5d59;   /* Secondary body text */
  --color-stone-gray:       #87867f;   /* Tertiary text, footnotes */
  --color-warm-silver:      #b0aea5;   /* Text on dark surfaces */

  /* Borders */
  --color-border-cream:     #f0eee6;   /* Standard light border */
  --color-border-warm:      #e8e6dc;   /* Prominent light border */
  --color-border-dark:      #30302e;   /* Dark surface border */

  /* Rings / interactive */
  --color-ring-warm:        #d1cfc5;   /* Button hover/focus ring */
  --color-ring-subtle:      #dedc01;   /* Secondary ring variant (unused typically) */
  --color-ring-deep:        #c2c0b6;   /* Active/pressed ring */

  /* Semantic */
  --color-error:            #b53333;   /* Error states */
  --color-focus:            #3898ec;   /* Input focus ring — only cool color */
}

/* ─────────────────────────────────────────────
   SEMANTIC COLOR ALIASES
───────────────────────────────────────────── */
:root {
  --fg-primary:             var(--color-near-black);
  --fg-secondary:           var(--color-olive-gray);
  --fg-tertiary:            var(--color-stone-gray);
  --fg-on-dark:             var(--color-ivory);
  --fg-muted-on-dark:       var(--color-warm-silver);
  --fg-accent:              var(--color-terracotta);
  --fg-accent-light:        var(--color-coral);

  --bg-page:                var(--color-parchment);
  --bg-card:                var(--color-ivory);
  --bg-elevated:            var(--color-white);
  --bg-interactive:         var(--color-warm-sand);
  --bg-page-dark:           var(--color-near-black);
  --bg-card-dark:           var(--color-dark-surface);

  --border-light:           var(--color-border-cream);
  --border-prominent:       var(--color-border-warm);
  --border-dark:            var(--color-border-dark);

  --shadow-ring:            0px 0px 0px 1px var(--color-ring-warm);
  --shadow-ring-deep:       0px 0px 0px 1px var(--color-ring-deep);
  --shadow-whisper:         rgba(0,0,0,0.05) 0px 4px 24px;
  --shadow-inset:           inset 0px 0px 0px 1px rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────────────
   TYPE SCALE
───────────────────────────────────────────── */
:root {
  /* Sizes */
  --text-micro:    0.6rem;    /*  9.6px */
  --text-overline: 0.63rem;   /* 10.0px */
  --text-label:    0.75rem;   /* 12.0px */
  --text-caption:  0.88rem;   /* 14.0px */
  --text-sm:       0.94rem;   /* 15.0px */
  --text-base:     1rem;      /* 16.0px */
  --text-body:     1.06rem;   /* 17.0px */
  --text-lg:       1.25rem;   /* 20.0px */
  --text-feature:  1.3rem;    /* 20.8px */
  --text-sub-sm:   1.6rem;    /* 25.6px */
  --text-sub:      2rem;      /* 32.0px */
  --text-sub-lg:   2.3rem;    /* 36.8px */
  --text-section:  3.25rem;   /* 52.0px */
  --text-display:  4rem;      /* 64.0px */

  /* Line heights */
  --lh-tight:      1.10;
  --lh-snug:       1.20;
  --lh-heading:    1.30;
  --lh-ui:         1.25;
  --lh-base:       1.43;
  --lh-body:       1.60;

  /* Letter spacing */
  --ls-tight:      -0.32px;
  --ls-normal:     normal;
  --ls-label:      0.12px;
  --ls-overline:   0.50px;
  --ls-micro:      0.096px;

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPE ROLES
───────────────────────────────────────────── */
:root {
  /* Headline styles (all Serif, weight 500) */
  --type-display:     var(--fw-medium) var(--text-display)/var(--lh-tight) var(--font-serif);
  --type-section:     var(--fw-medium) var(--text-section)/var(--lh-snug) var(--font-serif);
  --type-sub-lg:      var(--fw-medium) var(--text-sub-lg)/var(--lh-heading) var(--font-serif);
  --type-sub:         var(--fw-medium) var(--text-sub)/var(--lh-tight) var(--font-serif);
  --type-sub-sm:      var(--fw-medium) var(--text-sub-sm)/var(--lh-snug) var(--font-serif);
  --type-feature:     var(--fw-medium) var(--text-feature)/var(--lh-snug) var(--font-serif);

  /* Body / UI styles (all Sans) */
  --type-body-serif:  var(--fw-regular) var(--text-body)/var(--lh-body) var(--font-serif);
  --type-body-lg:     var(--fw-regular) var(--text-lg)/var(--lh-body) var(--font-sans);
  --type-body:        var(--fw-regular) var(--text-body)/var(--lh-body) var(--font-sans);
  --type-body-base:   var(--fw-regular) var(--text-base)/var(--lh-body) var(--font-sans);
  --type-body-sm:     var(--fw-regular) var(--text-sm)/var(--lh-body) var(--font-sans);
  --type-caption:     var(--fw-regular) var(--text-caption)/var(--lh-base) var(--font-sans);
  --type-label:       var(--fw-medium) var(--text-label)/var(--lh-ui) var(--font-sans);
  --type-overline:    var(--fw-regular) var(--text-overline)/var(--lh-body) var(--font-sans);
  --type-micro:       var(--fw-regular) var(--text-micro)/var(--lh-body) var(--font-sans);
  --type-code:        var(--fw-regular) var(--text-sm)/var(--lh-body) var(--font-mono);
}

/* ─────────────────────────────────────────────
   SPACING SCALE
───────────────────────────────────────────── */
:root {
  --space-1:    3px;
  --space-2:    4px;
  --space-3:    6px;
  --space-4:    8px;
  --space-5:    10px;
  --space-6:    12px;
  --space-8:    16px;
  --space-10:   20px;
  --space-12:   24px;
  --space-15:   30px;
  --space-16:   32px;
  --space-20:   40px;
  --space-24:   48px;
  --space-32:   64px;
  --space-40:   80px;
  --space-48:   96px;
  --space-60:   120px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS SCALE
───────────────────────────────────────────── */
:root {
  --radius-sharp:    4px;
  --radius-subtle:   6px;
  --radius-sm:       8px;
  --radius-base:     12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-full:     9999px;
}

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
:root {
  --container-max:  1200px;
  --container-pad:  var(--space-12);
}

/* ─────────────────────────────────────────────
   BASE RESETS (optional, apply to body)
───────────────────────────────────────────── */
.kopal-base {
  font: var(--type-body);
  color: var(--fg-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

/* Typography utility classes */
.type-display   { font: var(--type-display); }
.type-section   { font: var(--type-section); }
.type-sub-lg    { font: var(--type-sub-lg); }
.type-sub       { font: var(--type-sub); }
.type-sub-sm    { font: var(--type-sub-sm); }
.type-feature   { font: var(--type-feature); }
.type-body-lg   { font: var(--type-body-lg); }
.type-body      { font: var(--type-body); }
.type-body-base { font: var(--type-body-base); }
.type-body-sm   { font: var(--type-body-sm); }
.type-caption   { font: var(--type-caption); }
.type-label     { font: var(--type-label); letter-spacing: var(--ls-label); }
.type-overline  { font: var(--type-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; }
.type-code      { font: var(--type-code); letter-spacing: var(--ls-tight); }