/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 * genre: modern-minimal · macrostructure: Narrative Workflow
 * theme: Cobalt (cool paper · ink navy · emerald accent)
 * nav: N1b SaaS three-section · footer: Ft5 Statement
 * hero: H2 split diptych · features: F4 step sequence + F1 bento
 * enrichment: none (typography + brand logo only)
 * audience: siswa SMK Hassina · use: mulai belajar mandiri dengan AI · tone: technical-friendly
 * honest/chrome/tokens/responsive/mobile/contrast: pass
 */

/* ========== LIGHT (default + data-theme=light) ========== */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Background dasar CERAH */
  --color-paper: #f7fafc;
  --color-paper-2: #eef4f8;
  --color-paper-3: #e4edf4;
  --color-paper-glass: rgba(247, 250, 252, 0.94);

  /* Teks gelap di atas background cerah */
  --color-ink: #122033;
  --color-ink-soft: #334155;
  --color-muted: #5b6b7c;
  --color-line: #d7e2ec;
  --color-line-strong: #b7c7d6;

  /* Aksen emerald */
  --color-accent: #0f8a5f;
  --color-accent-strong: #0b6f4c;
  --color-accent-soft: #e6f7ef;
  --color-accent-hover: #0d7a54;
  --color-focus: #0f8a5f;

  /* Surface solid — tetap CERAH di light mode */
  --color-navy: #e8f6ef;
  --color-navy-deep: #d8f0e5;
  --color-warn: #c9851a;
  --color-white: #fbfcfd;

  --color-on-accent: #fbfcfd;
  --color-on-navy: #123024;
  --color-on-navy-soft: #2f5a45;
  --color-on-banner: #123024;

  --color-banner-bg: #e8f6ef;
  --color-banner-fg: #123024;
  --color-banner-strong: #0b6f4c;

  --color-surface-strong: #eef8f3;
  --color-surface-strong-2: #e2f3ea;
  --color-on-surface-strong: #123024;
  --color-on-surface-strong-soft: #3a5f4c;

  --color-accent-glow: rgba(15, 138, 95, 0.12);
  --color-accent-glow-strong: rgba(15, 138, 95, 0.22);
  --color-white-12: rgba(15, 138, 95, 0.1);
  --color-white-08: rgba(18, 32, 51, 0.05);
  --color-white-28: rgba(18, 32, 51, 0.18);

  /* Chrome dots (browser mock) — soft pastels, not pure brand colors */
  --color-chrome-1: #ef9a9a;
  --color-chrome-2: #ffe082;
  --color-chrome-3: #a5d6a7;

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --text-display-s: clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem);

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-body: 1.65;
  --tracking-tight: -0.03em;
  --tracking-label: 0.08em;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 32, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 32, 51, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 32, 51, 0.1);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 500ms;

  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --nav-h: 68px;
  --banner-h: 40px;
}

/* ========== DARK (hanya saat data-theme=dark) ========== */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-paper: #0f1724;
  --color-paper-2: #152033;
  --color-paper-3: #1b2a40;
  --color-paper-glass: rgba(15, 23, 36, 0.94);

  --color-ink: #f3f7fb;
  --color-ink-soft: #d5dee8;
  --color-muted: #a7b4c3;
  --color-line: #2a3a50;
  --color-line-strong: #3b4f68;

  --color-accent: #34d399;
  --color-accent-strong: #6ee7b7;
  --color-accent-soft: #123528;
  --color-accent-hover: #4ade80;
  --color-focus: #6ee7b7;

  --color-navy: #152033;
  --color-navy-deep: #0c1420;
  --color-warn: #f0b429;
  --color-white: #fbfcfd;

  --color-on-accent: #062016;
  --color-on-navy: #f3f7fb;
  --color-on-navy-soft: #c5d0dc;
  --color-on-banner: #f3f7fb;

  --color-banner-bg: #152033;
  --color-banner-fg: #f3f7fb;
  --color-banner-strong: #6ee7b7;

  --color-surface-strong: #152033;
  --color-surface-strong-2: #0c1420;
  --color-on-surface-strong: #f3f7fb;
  --color-on-surface-strong-soft: #c5d0dc;

  --color-accent-glow: rgba(52, 211, 153, 0.16);
  --color-accent-glow-strong: rgba(52, 211, 153, 0.28);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-28: rgba(255, 255, 255, 0.28);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
}