/* June Mobile · Intern Learning Platform — Design Tokens
   ────────────────────────────────────────────────────────────
   Direction: Premium editorial · Stripe / Linear / Apple HIG.
   Calm, restrained, professional. Avoids gamified / kiddy feel.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ─── INK / TEXT — slightly warm neutral grey scale ─── */
  --ink:   #1d1d1f;
  --ink-2: #4a4a4f;
  --ink-3: #7a7a82;
  --ink-4: #c4c4c9;
  --ink-5: #ececef;
  --ink-6: #f5f5f7;       /* extra-light for hover backgrounds */

  /* ─── PAPER / SURFACE — calm off-white ─── */
  --paper:   #fbfaf8;
  --paper-2: #f4f3ef;
  --screen:  #ffffff;
  --soft-fill: #f8f7f3;

  /* ─── ACCENT — Apple blue, kept restrained ─── */
  --accent:      #0071e3;
  --accent-soft: #e7f0fb;
  --accent-ink:  #0058b4;
  --accent-ring: rgba(0, 113, 227, 0.14);

  /* ─── SEMANTIC ─── */
  --ok:        #137333;
  --ok-soft:   #e3f4ea;
  --warn:      #b3580a;
  --warn-soft: #fbf0dd;
  --err:       #c5221f;
  --err-soft:  #fdebe9;

  /* ─── DAY-CELL TINTS ─── */
  --day-done-bg:    var(--ink);
  --day-done-fg:    #ffffff;
  --day-today-ring: var(--accent);
  --day-locked-fg:  var(--ink-4);
  --day-quiz-border: var(--ink-3);
  --day-exam-border: var(--accent);

  /* ─── SPACING — 4 pt rhythm ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ─── RADIUS — Apple-Education rounded ─── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-xxl:  28px;
  --radius-pill: 999px;

  /* ─── SHADOWS — Apple-Education: soft, layered, present ─── */
  --shadow-1: 0 1px 2px rgba(20, 20, 26, 0.04), 0 2px 6px rgba(20, 20, 26, 0.04);
  --shadow-2: 0 2px 6px rgba(20, 20, 26, 0.06), 0 8px 24px rgba(20, 20, 26, 0.06);
  --shadow-3: 0 4px 12px rgba(20, 20, 26, 0.08), 0 18px 48px rgba(20, 20, 26, 0.10);

  /* Apple-Education subtle gradients (one accent, one warm) */
  --grad-hero: linear-gradient(135deg, #e7f0fb 0%, #f7f3eb 100%);
  --grad-hero-accent: linear-gradient(135deg, #0a87ff 0%, #0058b4 100%);

  /* ─── TYPOGRAPHY ─── */
  --font-ui:
    "Geist", "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI",
    "Noto Sans Myanmar", "Padauk", "Pyidaungsu", "Myanmar Text", sans-serif;
  --font-my:
    "Padauk", "Pyidaungsu", "Myanmar Text", "Myanmar3", "Noto Sans Myanmar",
    "Geist", system-ui, sans-serif;
  --font-mono:
    "Geist Mono", "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* ─── TYPE SCALE — Apple-Education, bolder hero ─── */
  --fs-hero:    32px;    /* big hero card title */
  --fs-display: 26px;    /* page titles */
  --fs-h1:      20px;
  --fs-h2:      17px;
  --fs-h3:      13px;
  --fs-body:    14px;
  --fs-caption: 12px;
  --fs-tiny:    11px;

  --lh-tight: 1.25;
  --lh-body:  1.5;
  --lh-my:    1.65;

  /* No more --grad-accent / --grad-warm — kept here as no-ops so older
     references render solid. The design now prefers flat fills. */
  --grad-accent: var(--accent);
  --grad-warm:   var(--paper);
  --grad-card:   var(--screen);
  --grad-page:   var(--paper);

  --phone-max:   412px;
  --content-max: 1200px;
}

/* ─── DARK MODE — premium iOS-style off-black ─── */
:root[data-theme="dark"] {
  --ink:   #f5f5f7;
  --ink-2: #c8c8ce;
  --ink-3: #88888e;
  --ink-4: #48484a;
  --ink-5: #2c2c2e;
  --ink-6: #1f1f22;

  --paper:   #0a0a0c;
  --paper-2: #18181b;
  --screen:  #18181b;
  --soft-fill: #1d1d20;

  --accent:      #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.14);
  --accent-ink:  #409cff;
  --accent-ring: rgba(10, 132, 255, 0.30);

  --ok-soft:   rgba(50, 215, 75, 0.14);
  --warn-soft: rgba(255, 159, 10, 0.16);
  --err-soft:  rgba(255, 69, 58, 0.16);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.5);
}