/* ==========================================================================
   Notion Design System Tokens (derived from Notion.md)
   ========================================================================== */

:root {
  /* Colors - Core */
  --color-primary: #0075de;
  --color-primary-active: #005bab;
  --color-secondary: #213183;
  --color-on-primary: #ffffff;

  /* Surfaces */
  --color-canvas: #ffffff;
  --color-canvas-soft: #f6f5f4;
  --color-surface: #ffffff;
  --color-hairline: #e6e6e6;
  --color-hairline-subtle: #f0f0f0;

  /* Text / Ink */
  --color-ink: rgba(0, 0, 0, 0.95);
  --color-ink-secondary: #31302e;
  --color-ink-muted: #615d59;
  --color-ink-faint: #a39e98;

  /* Decorative Sticker Palette */
  --color-accent-sky: #62aef0;
  --color-accent-purple: #d6b6f6;
  --color-accent-purple-deep: #391c57;
  --color-accent-pink: #ff64c8;
  --color-accent-orange: #dd5b00;
  --color-accent-orange-deep: #793400;
  --color-accent-teal: #2a9d99;
  --color-accent-green: #1aae39;
  --color-accent-brown: #523410;

  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-xxl: 32px;
  --space-hero: 48px;

  /* Shadows (Notion's soft layered micro-shadows) */
  --shadow-level-0: none;
  --shadow-level-1: 0 0.175px 1.041px rgba(0, 0, 0, 0.01),
                    0 0.8px 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-level-2: 0 2px 8px rgba(0, 0, 0, 0.04),
                    0 10px 25px rgba(0, 0, 0, 0.03),
                    0 23px 52px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}