/* ============================================================
   Mirai Eduventure Indonesia — Design tokens
   Source of truth: Claude Design "Mirai Eduventure Design System"
   (warm terracotta/cream palette, Jost + Hanken Grotesk, 4px grid)
   Do not hand-edit colors/type here without checking the design
   system in _ds/ in the project source — keep both in sync.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Hanken+Grotesk:wght@400;500&display=swap");

:root{
  /* Sunrise gradient stops — the brand's core hue family */
  --sunrise-1:#C04840;--sunrise-2:#C96B5A;--sunrise-3:#E8916B;--sunrise-4:#F5B885;
  --gradient-sunrise:linear-gradient(135deg,#C04840 0%,#C96B5A 38%,#E8916B 72%,#F5B885 100%);
  --gradient-sunrise-h:linear-gradient(90deg,#C04840 0%,#C96B5A 38%,#E8916B 72%,#F5B885 100%);

  /* Terracotta ramp (flat fills) */
  --terracotta-50:#FBEDE8;--terracotta-100:#F6D9CE;--terracotta-200:#EFBCA9;
  --terracotta-300:#E8916B;--terracotta-400:#C96B5A;--terracotta-500:#C04840;
  --terracotta-600:#A63A33;--terracotta-700:#7E2E28;

  /* Ink / neutrals — warm-tinted, never pure grey */
  --ink-900:#331A16;--ink-800:#4A241E;--ink-700:#6B3A31;--ink-600:#8A5C52;
  --ink-400:#B39C95;--ink-300:#D9CCC6;--ink-200:#EAE0DA;--ink-100:#F3ECE6;
  --cream:#FDFAF6;--white:#FFFFFF;

  /* Country tags — deliberately outside the brand hue family */
  --country-jp:#2C4A7C;--country-id:#B71C1C;--country-vn:#2E7D32;
  --country-jp-soft:#E7ECF4;--country-id-soft:#F7E5E5;--country-vn-soft:#E6F1E7;

  /* Semantic aliases */
  --text-heading:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-600);
  --text-inverse:var(--cream);--text-accent:var(--terracotta-500);
  --surface-page:var(--cream);--surface-card:var(--white);--surface-sunken:var(--ink-100);
  --surface-accent-soft:var(--terracotta-50);--surface-inverse:var(--ink-900);
  --border-subtle:var(--ink-200);--border-strong:var(--ink-300);--border-accent:var(--terracotta-300);
  --focus-ring:var(--terracotta-500);
  --action-primary:var(--terracotta-500);--action-primary-hover:var(--terracotta-600);
  --action-primary-active:var(--terracotta-700);

  /* Typography */
  --font-display:"Jost","Century Gothic",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --fw-regular:400;--fw-medium:500;

  --fs-display-1:clamp(40px,5.2vw,64px);--fs-display-2:clamp(32px,4vw,48px);
  --fs-h1:36px;--fs-h2:28px;--fs-h3:22px;--fs-h4:18px;
  --fs-body-lg:18px;--fs-body:16px;--fs-body-sm:14px;--fs-caption:13px;--fs-micro:11px;

  --lh-tight:1.12;--lh-heading:1.25;--lh-body:1.6;--lh-loose:1.75;
  --ls-display:-0.02em;--ls-heading:-0.01em;--ls-body:0;--ls-eyebrow:0.14em;

  /* Spacing — 4px base grid, 8 stops */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:24px;--space-6:40px;--space-7:64px;--space-8:96px;
  --container-max:1160px;--container-pad:24px;--measure:64ch;
  --section-y:var(--space-8);

  /* Radius */
  --radius-sm:6px;--radius-md:10px;--radius-lg:12px;--radius-xl:16px;--radius-round:999px;
  --radius-control:10px;--radius-card:12px;--radius-media:12px;
  --border-width:1px;

  /* Elevation — flat by default */
  --shadow-none:none;
  --shadow-overlay:0 12px 32px rgba(51,26,22,0.12);
  --shadow-popover:0 6px 18px rgba(51,26,22,0.10);

  /* Motion */
  --ease-out:cubic-bezier(0.2,0.6,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;
  --transition-control:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-medium);color:var(--text-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0}
p{margin:0}
ul,ol{margin:0}
a{color:var(--terracotta-600);text-decoration:none;border-bottom:1px solid var(--terracotta-200);transition:var(--transition-control)}
a:hover{color:var(--terracotta-700);border-bottom-color:var(--terracotta-500)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mei-eyebrow{font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}