/**
 * Garasiku Design Token — CSS Custom Properties
 * Based on: DESIGN-notion.md (Notion × Garasiku Blue adaptation)
 * Light mode default, dark mode via [data-theme="dark"]
 *
 * RULE: Only custom property definitions here.
 *       No class selectors, no rule-sets beyond :root and [data-theme="dark"].
 */

/* ─────────────────────────────────────────────
   LIGHT MODE (default)
   Palette dari referensi visual: white canvas, near-black ink, cobalt blue accent
───────────────────────────────────────────── */
:root {
  /* ── Brand ── */
  --primary:        #1847F1;   /* cobalt blue — single structural accent */
  --primary-active: #1238CC;   /* pressed state */
  --secondary:      #0A0F1E;   /* near-black navy — hero text, strong moments */
  --on-primary:     #ffffff;

  /* ── Surface ── */
  --canvas:         #ffffff;
  --canvas-soft:    #f7f8fc;   /* barely-there cool white — section alternation */
  --surface:        #ffffff;

  /* ── Ink (text) ── */
  --ink:            #0A0F1E;   /* near-black */
  --ink-secondary:  #1a2140;
  --ink-muted:      #4a5578;
  --ink-faint:      #8e97b4;

  /* ── Structural ── */
  --hairline:       #e2e6f0;   /* cool-tinted border */

  /* ── Sticker palette (decorative only) ── */
  --sticker-sky:    #62aef0;
  --sticker-purple: #d6b6f6;
  --sticker-pink:   #ff64c8;
  --sticker-orange: #dd5b00;
  --sticker-teal:   #2a9d99;
  --sticker-green:  #1aae39;
  --sticker-brown:  #523410;

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* display-1: 64px / 700 / lh 1.0 / ls -2.125px */
  --font-display-size:     clamp(36px, 5.5vw, 64px);
  --font-display-weight:   700;
  --font-display-lh:       1.0;
  --font-display-tracking: -2.125px;

  /* display-2: 54px / 700 / lh 1.04 / ls -1.875px */
  --font-display2-size:     clamp(30px, 4.5vw, 54px);
  --font-display2-tracking: -1.875px;

  /* heading-1: 40px / 700 / lh 1.1 / ls -1px */
  --font-h1-size:     clamp(26px, 3.5vw, 40px);
  --font-h1-tracking: -1px;

  /* heading-2: 26px / 700 / lh 1.23 / ls -0.625px */
  --font-h2-size:     26px;
  --font-h2-tracking: -0.625px;

  /* heading-3: 22px / 700 / lh 1.27 / ls -0.25px */
  --font-h3-size:     22px;
  --font-h3-tracking: -0.25px;

  /* title: 20px / 600 / lh 1.4 / ls -0.125px */
  --font-title-size:     20px;
  --font-title-tracking: -0.125px;

  /* body-md: 16px / 400 / lh 1.5 */
  --font-body-size:  16px;

  /* body-sm: 15px / 400 / lh 1.33 */
  --font-body-sm-size: 15px;

  /* button: 16px / 500 / lh 1.5 */
  --font-button-size:   16px;
  --font-button-weight: 500;

  /* caption: 14px / 400 / lh 1.43 */
  --font-caption-size: 14px;

  /* eyebrow: 12px / 600 / lh 1.33 / ls +0.125px */
  --font-eyebrow-size:     12px;
  --font-eyebrow-weight:   600;
  --font-eyebrow-tracking: 0.125px;

  /* ── Spacing (base 8px) ── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  28px;
  --sp-xxl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;
  --sp-5xl: 96px;

  /* ── Border Radius ── */
  --r-xs:   4px;    /* form fields, small tags */
  --r-sm:   5px;    /* menu items, list rows */
  --r-md:   8px;    /* utility / nav buttons */
  --r-lg:   12px;   /* feature cards */
  --r-xl:   16px;   /* large containers */
  --r-full: 9999px; /* marketing pill CTAs */

  /* ── Shadow — barely-there layered (Notion style) ── */
  --shadow-1:
    0 0.175px 1.041px rgba(0, 0, 0, 0.01),
    0 0.800px 2.925px rgba(0, 0, 0, 0.02),
    0 2.025px 7.847px rgba(0, 0, 0, 0.027),
    0 4px    18px    rgba(0, 0, 0, 0.04);

  --shadow-2:
    0 0.175px 1.041px rgba(0, 0, 0, 0.01),
    0 0.800px 2.925px rgba(0, 0, 0, 0.02),
    0 2.025px 7.847px rgba(0, 0, 0, 0.027),
    0 4px    18px    rgba(0, 0, 0, 0.04),
    0 23px   52px    rgba(0, 0, 0, 0.05);
}

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Surface ── */
  --canvas:        #0d1117;
  --canvas-soft:   #161b27;
  --surface:       #1c2333;

  /* ── Ink ── */
  --ink:           #e8edf8;
  --ink-secondary: #b0bdd8;
  --ink-muted:     #7a8ab0;
  --ink-faint:     #4a5578;

  /* ── Structural ── */
  --hairline:      #2a3350;

  /* ── Shadow — slightly stronger in dark mode ── */
  --shadow-1:
    0 0.175px 1.041px rgba(0, 0, 0, 0.08),
    0 0.800px 2.925px rgba(0, 0, 0, 0.12),
    0 2.025px 7.847px rgba(0, 0, 0, 0.16),
    0 4px    18px    rgba(0, 0, 0, 0.20);

  --shadow-2:
    0 0.175px 1.041px rgba(0, 0, 0, 0.08),
    0 0.800px 2.925px rgba(0, 0, 0, 0.12),
    0 2.025px 7.847px rgba(0, 0, 0, 0.16),
    0 4px    18px    rgba(0, 0, 0, 0.20),
    0 23px   52px    rgba(0, 0, 0, 0.28);

  /* primary, on-primary, sticker tokens unchanged */
}

/* ─────────────────────────────────────────────
   THEME TRANSITION
   Smooth color switch without flashing.
   Only applies to color-bearing properties, not layout.
───────────────────────────────────────────── */
*, *::before, *::after {
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease,
    fill             0.18s ease,
    stroke           0.18s ease,
    box-shadow       0.18s ease;
}

/* Disable transition during initial page load to prevent FOUC */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}