/* ============================================================
 * Baraya Edukasi — Design Tokens
 * Colors, typography, spacing, radius, shadow, motion.
 * Import this file once at the top of any HTML page.
 * ============================================================ */

/* ---------- Webfonts (Google Fonts substitutes) ----------
 * Plus Jakarta Sans — display + UI sans (Indonesian-designed family,
 *   excellent diacritic coverage, friendly geometric character that
 *   matches the rounded forms in the "baraya" wordmark).
 * Lora — secondary serif for editorial/quote moments (testimonials,
 *   curriculum descriptions, long-form). Warm, literary, calm.
 * JetBrains Mono — code/numeric display (schedules, prices, codes).
 * --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
   * COLOR — Brand
   * ============================================================ */
  --baraya-teal-50:   #e8f3f2;
  --baraya-teal-100:  #c8e2e0;
  --baraya-teal-200:  #94c5c2;
  --baraya-teal-300:  #5fa4a0;
  --baraya-teal-400:  #2f8884;
  --baraya-teal-500:  #0c6d6a;  /* ← primary brand */
  --baraya-teal-600:  #0a5957;
  --baraya-teal-700:  #084744;
  --baraya-teal-800:  #053432;
  --baraya-teal-900:  #032422;

  --brand:            var(--baraya-teal-500);
  --brand-hover:      var(--baraya-teal-600);
  --brand-press:      var(--baraya-teal-700);
  --brand-tint:       var(--baraya-teal-50);
  --brand-on:         #ffffff; /* foreground on brand fills */

  /* ============================================================
   * COLOR — Accents (sparingly used — never compete with teal)
   * ============================================================ */
  --accent-saffron:   #e8a13a; /* star/award/achievement — lifts from logo's "reaching for star" motif */
  --accent-saffron-tint: #fbf1de;
  --accent-coral:     #d96a52; /* alerts, "act now" lead-capture */
  --accent-coral-tint:#fbe6e0;
  --accent-sage:      #7ea688; /* progress / completed lessons */
  --accent-sage-tint: #e8f0ea;

  /* ============================================================
   * COLOR — Neutrals (warm, slightly green-leaning to harmonize)
   * ============================================================ */
  --ink-0:    #ffffff;
  --ink-25:   #fbfaf7;  /* page background — warm paper */
  --ink-50:   #f5f4ef;
  --ink-100:  #ebe9e2;
  --ink-200:  #d9d6cc;
  --ink-300:  #b8b4a7;
  --ink-400:  #8a8678;
  --ink-500:  #5f5c52;
  --ink-600:  #423f38;
  --ink-700:  #2d2b26;
  --ink-800:  #1a1917;
  --ink-900:  #0f0e0d;

  /* ============================================================
   * COLOR — Semantic
   * ============================================================ */
  --success:        #2f8a5b;
  --success-tint:   #e3f2ea;
  --warning:        #d49414;
  --warning-tint:   #fbf0d6;
  --danger:         #c94a3b;
  --danger-tint:    #fbe4e0;
  --info:           var(--baraya-teal-500);
  --info-tint:      var(--baraya-teal-50);

  /* ============================================================
   * COLOR — Foreground / Background tokens (use these in UI)
   * ============================================================ */
  --bg-page:        var(--ink-25);   /* warm paper, NOT pure white */
  --bg-surface:     #ffffff;          /* cards on page */
  --bg-sunken:      var(--ink-50);    /* inset / table rows */
  --bg-inverse:     var(--baraya-teal-800);

  --fg-1:           var(--ink-800);   /* primary text — headlines, body */
  --fg-2:           var(--ink-600);   /* secondary — meta, captions */
  --fg-3:           var(--ink-400);   /* tertiary — placeholder, disabled */
  --fg-on-brand:    #ffffff;
  --fg-on-inverse:  #f5f4ef;
  --fg-link:        var(--baraya-teal-600);
  --fg-link-hover:  var(--baraya-teal-700);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--baraya-teal-500);
  --focus-ring:     0 0 0 3px rgba(12, 109, 106, 0.28);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Lora', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Type scale — Major Third (1.25), capped sensibly for UI */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;  /* base */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* Line heights — tight for display, comfortable for body */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ============================================================
   * SPACING — 4px base, with comfortable mid-range
   * ============================================================ */
  --space-0:   0px;
  --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;
  --space-32:  128px;

  /* ============================================================
   * RADIUS — generous; the brand reads as "warm/friendly", not "techy/sharp"
   * ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* default for cards */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ============================================================
   * SHADOW — soft, tinted with brand teal (not pure black)
   * ============================================================ */
  --shadow-xs:  0 1px 2px rgba(8, 71, 68, 0.06);
  --shadow-sm:  0 2px 6px rgba(8, 71, 68, 0.07), 0 1px 2px rgba(8, 71, 68, 0.04);
  --shadow-md:  0 8px 18px rgba(8, 71, 68, 0.09), 0 2px 6px rgba(8, 71, 68, 0.05);
  --shadow-lg:  0 18px 36px rgba(8, 71, 68, 0.12), 0 6px 12px rgba(8, 71, 68, 0.06);
  --shadow-xl:  0 32px 64px rgba(8, 71, 68, 0.18), 0 12px 24px rgba(8, 71, 68, 0.08);
  --shadow-inset: inset 0 1px 2px rgba(8, 71, 68, 0.06);

  /* ============================================================
   * MOTION
   * ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ============================================================
   * LAYOUT
   * ============================================================ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;
}

/* ============================================================
 * BASE / RESET
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* ============================================================
 * SEMANTIC TYPE — use these classes or apply via SCSS-style compose
 * ============================================================ */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}
.h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
}

.p,  .body-md  { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-1); }
.body-lg       { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-1); }
.body-sm       { font-size: var(--text-sm); line-height: var(--lh-normal);  color: var(--fg-2); }
.caption       { font-size: var(--text-xs); line-height: var(--lh-normal);  color: var(--fg-2); }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a, .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--fg-link-hover); }

/* ============================================================
 * UTILITIES
 * ============================================================ */
.container        { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-6); }
.stack > * + *    { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.row              { display: flex; gap: var(--space-4); align-items: center; }
.center           { display: flex; align-items: center; justify-content: center; }

/* Focus ring — applied uniformly */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}