/* ============================================================
   DESIGN TOKENS — Sekolah Setara Nusantara
   8px spacing system · Dignified "Negara" palette · Editorial type
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --color-ground:      #F4F3F1;        /* warm parchment off-white */
  --color-ground-alt:  #EAE8E4;        /* one tone-step darker for section fields */
  --color-ink:         #111111;         /* near-black, high contrast */
  --color-ink-secondary: #555555;       /* secondary copy */
  --color-accent:      #1B5E3B;        /* deep Indonesian green — regal, institutional */
  --color-accent-light: #E8F0EB;       /* tinted ground for accent fields */
  --color-white:       #FFFFFF;
  --color-danger:      #B33A3A;        /* for the "not in school" stat */

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — editorial ratios */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);    /* 12–13px */
  --text-sm:    clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);   /* 13–14px */
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16–17px */
  --text-lg:    clamp(1.125rem, 1rem + 0.5vw, 1.25rem);        /* 18–20px */
  --text-xl:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);        /* 20–24px */
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);           /* 24–32px */
  --text-3xl:   clamp(2rem, 1.5rem + 2vw, 2.75rem);            /* 32–44px */
  --text-4xl:   clamp(2.5rem, 1.8rem + 3vw, 3.75rem);          /* 40–60px */
  --text-hero:  clamp(3rem, 2rem + 4vw, 5rem);                 /* 48–80px */

  /* ---- Spacing (8px system) ---- */
  --space-1:  0.5rem;    /* 8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-5:  2.5rem;    /* 40px */
  --space-6:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */
  --space-16: 8rem;      /* 128px */
  --space-20: 10rem;     /* 160px */
  --space-24: 12rem;     /* 192px */

  /* ---- Layout ---- */
  --max-width:    1200px;
  --max-prose:    680px;       /* 65–75 chars at 17px */
  --gutter:       clamp(1rem, 0.5rem + 2vw, 2rem);  /* 16–32px outer margins */
  --section-gap:  clamp(6rem, 4rem + 6vw, 12rem);   /* 96–192px between sections */

  /* ---- Motion (Emil Kowalski) ---- */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   280ms;

  /* ---- Misc ---- */
  --radius:        0;           /* square corners — institutional precision */
}