/* =========================================
   Osmorph Hub — Design Tokens v2
   Cinematic 6-chapter narrative
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Color — palette utama === */
  --color-ink:        #0A0A0A;  /* deep canvas */
  --color-paper:      #FAFAFA;  /* blueprint white */
  --color-graphite:   #2A2A2A;  /* deep neutral */
  --color-pencil:     #6B7280;  /* mid neutral */
  --color-eraser:     #E5E5E5;  /* light neutral */
  --color-iron:       #4A4A4A;  /* slab neutral */

  /* === Color — accents (storyboard spec) === */
  --color-blue:       #4A9EFF;  /* schematic blue (UI/interface elements) */
  --color-blue-dim:   rgba(74, 158, 255, 0.18);
  --color-terracotta: #C84B31;  /* warm highlight (emphasis points) */
  --color-terracotta-dim: rgba(200, 75, 49, 0.16);
  --color-sun:        #E4A24B;  /* golden hour (showreel) */

  /* === Theme variables (light defaults) === */
  --bg:         var(--color-paper);
  --bg-inverse: var(--color-ink);
  --fg:         var(--color-ink);
  --fg-muted:   var(--color-iron);
  --border:     var(--color-eraser);

  /* === Typography === */
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.25rem;
  --text-xl:      1.5rem;
  --text-2xl:     2rem;
  --text-3xl:     3rem;
  --text-display: clamp(2.25rem, 7.5vw, 4.5rem);
  --text-hero:    clamp(2.75rem, 9vw, 5.75rem);

  /* === Spacing === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === Radii === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* === Motion === */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out (signature) */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis:  cubic-bezier(0.32, 0.72, 0, 1);  /* iOS sheet feel */

  /* speed-multiplier: 1 default, 1/1.5 = 0.667 for returning visitor (faster) */
  --speed-multiplier: 1;
  --t-micro:  calc(150ms * var(--speed-multiplier));
  --t-quick:  calc(250ms * var(--speed-multiplier));
  --t-normal: calc(400ms * var(--speed-multiplier));
  --t-slow:   calc(600ms * var(--speed-multiplier));
  --t-hero:   calc(900ms * var(--speed-multiplier));

  /* IG Stories transition (fixed 500ms per spec) */
  --t-chapter-slide: 500ms;
}

/* === Dark theme override === */
[data-theme="dark"] {
  --bg:         var(--color-ink);
  --bg-inverse: var(--color-paper);
  --fg:         var(--color-paper);
  --fg-muted:   var(--color-pencil);
  --border:     var(--color-graphite);
}

/* === Auto theme = follow OS === */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:         var(--color-ink);
    --bg-inverse: var(--color-paper);
    --fg:         var(--color-paper);
    --fg-muted:   var(--color-pencil);
    --border:     var(--color-graphite);
  }
}