/* ============================================================
   NORIKAI — Design Tokens: Color & Type
   Japanese minimalism · warm off-white · forest green · gold
   ============================================================ */

/* Plus Jakarta Sans — primary typeface (self-hosted, variable).
   Two variable files cover the full 200–800 weight range, upright + italic. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* ---------------------------------------------------------
     1. PALETTE — raw color ramps
     --------------------------------------------------------- */

  /* Forest (primary) — deep, calm, confident */
  --forest-50:  #EEF3F0;
  --forest-100: #D7E3DC;
  --forest-200: #AEC7BA;
  --forest-300: #7FA593;
  --forest-400: #4F8169;
  --forest-500: #2E6149;
  --forest-600: #235039;
  --forest-700: #1B4332; /* ← brand primary */
  --forest-800: #143326;
  --forest-900: #0E2419;

  /* Gold (accent) — used sparingly, as punctuation */
  --gold-50:  #FBF7EC;
  --gold-100: #F3E9CB;
  --gold-200: #E6D29A;
  --gold-300: #D9BC6E;
  --gold-400: #C9A84C; /* ← brand accent */
  --gold-500: #B08F35;
  --gold-600: #8C7029;
  --gold-700: #6A551F;

  /* Neutrals — warm, paper-toned (not pure gray) */
  --warm-0:   #FFFFFF;
  --warm-50:  #FAFAF8; /* ← app background */
  --cream:    #F8F4ED; /* ← grounded panel / section fill */
  --warm-100: #F2F1EC;
  --warm-200: #E7E5DD; /* ← default hairline border */
  --warm-300: #D6D3C8; /* ← strong border */
  --warm-400: #B3AFA2;
  --warm-500: #8A867A;
  --warm-600: #635F55;
  --warm-700: #45423B;
  --warm-800: #2A2823;
  --warm-900: #1A1A1A; /* ← primary text */

  /* Semantic status — muted & earthy to fit the palette */
  --success: #2E6149;
  --success-soft: #EAF1ED;
  --warning: #B08F35;
  --warning-soft: #FBF3DC;
  --error:   #B14B42;
  --error-soft: #F7E9E7;
  --info:    #3D6A86;
  --info-soft: #E9F0F4;

  /* ---------------------------------------------------------
     2. SEMANTIC ROLES — reference these in product code
     --------------------------------------------------------- */
  --bg:            var(--warm-50);
  --bg-sunken:     var(--cream);
  --surface:       var(--warm-0);
  --surface-hover: var(--warm-100);

  --primary:        var(--forest-700);
  --primary-hover:  var(--forest-800);
  --primary-active: var(--forest-900);
  --primary-soft:   var(--forest-50);
  --on-primary:     #FAFAF8;

  --accent:       var(--gold-400);
  --accent-hover: var(--gold-500);
  --accent-soft:  var(--gold-50);

  --fg:    var(--warm-900); /* primary text */
  --fg-2:  var(--warm-600); /* secondary text */
  --fg-3:  var(--warm-500); /* tertiary / captions */
  --fg-on-dark: #F2F1EC;

  --border:        var(--warm-200);
  --border-strong: var(--warm-300);
  --ring:          var(--forest-400);

  /* ---------------------------------------------------------
     3. TYPE — Plus Jakarta Sans
     --------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* fluid-ish fixed scale (px) */
  --t-display: 56px;  --lh-display: 1.05; --ls-display: -0.022em;
  --t-h1: 40px;       --lh-h1: 1.1;       --ls-h1: -0.02em;
  --t-h2: 32px;       --lh-h2: 1.15;      --ls-h2: -0.018em;
  --t-h3: 24px;       --lh-h3: 1.25;      --ls-h3: -0.012em;
  --t-h4: 20px;       --lh-h4: 1.3;       --ls-h4: -0.008em;
  --t-body-lg: 18px;  --lh-body-lg: 1.6;  --ls-body-lg: 0;
  --t-body: 16px;     --lh-body: 1.6;     --ls-body: 0;
  --t-body-sm: 14px;  --lh-body-sm: 1.55; --ls-body-sm: 0;
  --t-caption: 13px;  --lh-caption: 1.45; --ls-caption: 0.002em;
  --t-overline: 12px; --lh-overline: 1.2; --ls-overline: 0.14em;

  /* ---------------------------------------------------------
     4. SPACING — 4px base
     --------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------
     5. RADII — restrained
     --------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------------------------------------------------------
     6. SHADOWS — soft, light, low-contrast
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.05), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 4px 14px rgba(26,26,26,0.06), 0 1px 3px rgba(26,26,26,0.04);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.08), 0 2px 8px rgba(26,26,26,0.04);
  --shadow-focus: 0 0 0 3px rgba(79,129,105,0.28);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly in markup
   ============================================================ */
.t-display {
  font: var(--w-bold) var(--t-display)/var(--lh-display) var(--font-sans);
  letter-spacing: var(--ls-display); color: var(--fg);
}
.t-h1 {
  font: var(--w-bold) var(--t-h1)/var(--lh-h1) var(--font-sans);
  letter-spacing: var(--ls-h1); color: var(--fg);
}
.t-h2 {
  font: var(--w-semibold) var(--t-h2)/var(--lh-h2) var(--font-sans);
  letter-spacing: var(--ls-h2); color: var(--fg);
}
.t-h3 {
  font: var(--w-semibold) var(--t-h3)/var(--lh-h3) var(--font-sans);
  letter-spacing: var(--ls-h3); color: var(--fg);
}
.t-h4 {
  font: var(--w-semibold) var(--t-h4)/var(--lh-h4) var(--font-sans);
  letter-spacing: var(--ls-h4); color: var(--fg);
}
.t-body-lg {
  font: var(--w-regular) var(--t-body-lg)/var(--lh-body-lg) var(--font-sans);
  color: var(--fg);
}
.t-body {
  font: var(--w-regular) var(--t-body)/var(--lh-body) var(--font-sans);
  color: var(--fg);
}
.t-body-sm {
  font: var(--w-regular) var(--t-body-sm)/var(--lh-body-sm) var(--font-sans);
  color: var(--fg-2);
}
.t-caption {
  font: var(--w-medium) var(--t-caption)/var(--lh-caption) var(--font-sans);
  color: var(--fg-3);
}
.t-overline {
  font: var(--w-semibold) var(--t-overline)/var(--lh-overline) var(--font-sans);
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--fg-3);
}