/* indonesian.work — design tokens
 * CSS variables for color, type, spacing, radii, shadow, motion.
 * Import this file at the top of any HTML in the project.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ────────── Color: base palette ────────── */
  --sogan:   #B8531A;  /* primary terracotta */
  --sogan-dark: #8E3F12;
  --sogan-light: #D67338;

  --indigo:  #1F3A5F;  /* deep secondary */
  --indigo-dark: #14253D;
  --indigo-light: #38567E;

  --coffee:  #3D2817;  /* deepest text */
  --clay:    #A8896C;  /* muted, dividers */
  --clay-light: #C7AE93;

  --cream:   #F5EFE4;  /* page background */
  --ivory:   #FBF8F1;  /* card surface */
  --paper:   #FFFDF8;  /* lightest, rarely used */

  --jade:    #4A7C59;  /* success / secondary accent */
  --jade-dark: #2F5A3F;
  --saffron: #E8A33D;  /* highlight / badge */
  --rust:    #C04A2B;  /* warning / error */

  /* ────────── Color: semantic ────────── */
  --bg:           var(--cream);
  --bg-raised:    var(--ivory);
  --bg-overlay:   rgba(61, 40, 23, 0.40);

  --fg:           var(--coffee);
  --fg-muted:     #6B5944;
  --fg-subtle:    var(--clay);
  --fg-on-dark:   var(--cream);

  --border:       #DDC9AE;
  --border-strong: var(--clay);
  --border-focus:  var(--sogan);

  --accent:       var(--sogan);
  --accent-fg:    var(--ivory);

  --success:      var(--jade);
  --warning:      var(--saffron);
  --error:        var(--rust);

  /* ────────── Typography: families ────────── */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ────────── Typography: scale ────────── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   84px;
  --text-6xl:   112px;

  /* ────────── Spacing (4px base) ────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ────────── Radii ────────── */
  --r-img:    4px;
  --r-input:  6px;
  --r-card:   8px;
  --r-panel:  12px;
  --r-pill:   999px;

  /* ────────── Shadows (warm, coffee-tinted) ────────── */
  --shadow-sm: 0 1px 2px rgba(61, 40, 23, 0.06), 0 1px 3px rgba(61, 40, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(61, 40, 23, 0.08), 0 12px 32px rgba(61, 40, 23, 0.06);
  --shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.10), 0 24px 60px rgba(61, 40, 23, 0.08);

  /* ────────── Motion ────────── */
  --ease:       cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 480ms;

  /* ────────── Layout ────────── */
  --content-max:  1200px;
  --hero-max:     1440px;
  --reading-max:  720px;
  --nav-h:        64px;
  --side-nav-w:   240px;
}

/* ────────── Base resets / page ────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ────────── Semantic typography ────────── */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, var(--text-6xl));
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--indigo);
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--indigo);
  font-variation-settings: 'opsz' 96;
  text-wrap: balance;
  margin: 0 0 var(--s-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--indigo);
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--indigo);
  text-wrap: balance;
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--coffee);
  margin: 0 0 var(--s-2);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--coffee);
  margin: 0 0 var(--s-2);
}

p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
}

.lede, p.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--fg-muted);
  font-variation-settings: 'opsz' 36;
}

small, .text-small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sogan);
}

.section-marker {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  font-variation-settings: 'opsz' 24;
  font-feature-settings: 'tnum';
  color: var(--clay);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--coffee);
}

a {
  color: var(--sogan);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

::selection {
  background: var(--saffron);
  color: var(--coffee);
}