/* ============================================
   BoardFlow Design System — Notion-Inspired
   ============================================ */

:root {
  /* ---- Brand & Accent ---- */
  --primary: #0075de;
  --primary-active: #005bab;
  --primary-on: #ffffff;
  --secondary: #213183;

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

  /* ---- Surface ---- */
  --canvas: #ffffff;
  --canvas-soft: #f6f5f4;
  --surface: #ffffff;
  --hairline: #e6e6e6;
  --bg-overlay: rgba(0, 0, 0, 0.25);

  /* ---- Text ---- */
  --ink: #000000;
  --ink-secondary: #31302e;
  --ink-muted: #615d59;
  --ink-faint: #a39e98;
  --ink-inverse: #ffffff;

  /* ---- Semantic ---- */
  --success: #1aae39;
  --warning: #dd5b00;
  --danger: #e03e3e;
  --info: #0075de;

  /* ---- Elevation: Level 0 (Flat) ---- */
  --shadow-flat: 0 0 0 0 transparent;

  /* ---- Elevation: Level 1 (Soft) ---- */
  --shadow-soft:
    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);

  /* ---- Elevation: Level 2 (Elevated) ---- */
  --shadow-elevated:
    0 0.175px 1.041px rgba(0,0,0,0.02),
    0 0.8px 2.925px rgba(0,0,0,0.03),
    0 2.025px 7.847px rgba(0,0,0,0.04),
    0 4px 18px rgba(0,0,0,0.05),
    0 23px 52px rgba(0,0,0,0.05);

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

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

  /* ---- Typography: Font ---- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Aliases for backward compatibility */
  --text-sm: var(--text-caption);
  --text-base: var(--text-body-sm);
  --text-lg: var(--text-body);
  --text-xl: var(--text-title);
  --text-2xl: var(--text-heading-3);
  --text-3xl: var(--text-heading-2);

  /* ---- Typography: Scale ---- */
  --text-display-1: 64px;
  --text-display-2: 54px;
  --text-heading-1: 40px;
  --text-heading-2: 26px;
  --text-heading-3: 22px;
  --text-title: 20px;
  --text-body: 16px;
  --text-body-sm: 15px;
  --text-button: 16px;
  --text-caption: 14px;
  --text-eyebrow: 12px;
  --text-xs: 11px;

  /* ---- Typography: Weights ---- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Typography: Line Heights ---- */
  --leading-display: 1.0;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --leading-dense: 1.33;
  --leading-tight: 1.2;

  /* ---- Typography: Letter Spacing ---- */
  --tracking-display-1: -2.125px;
  --tracking-display-2: -1.875px;
  --tracking-heading-1: -1px;
  --tracking-heading-2: -0.625px;
  --tracking-heading-3: -0.25px;
  --tracking-title: -0.125px;
  --tracking-eyebrow: 0.125px;

  /* ---- Transitions ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* ---- Z-Index ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Layout ---- */
  --sidebar-width: 260px;
  --toolbar-height: 48px;
  --canvas-grid-color: #d8d7d5;
}

/* ============================================
   Dark Theme
   ============================================ */

[data-theme="dark"] {
  --canvas: #1c1c1e;
  --canvas-soft: #161618;
  --surface: #2c2c2e;
  --hairline: #3a3a3c;

  --ink: #f5f5f7;
  --ink-secondary: #a1a1a6;
  --ink-muted: #6e6e73;
  --ink-faint: #48484a;
  --ink-inverse: #1d1d1f;

  --primary: #0a84ff;
  --primary-active: #409cff;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;
  --info: #64d2ff;

  --shadow-soft:
    0 0.175px 1.041px rgba(0,0,0,0.1),
    0 0.8px 2.925px rgba(0,0,0,0.15),
    0 2.025px 7.847px rgba(0,0,0,0.2),
    0 4px 18px rgba(0,0,0,0.25);

  --shadow-elevated:
    0 0.175px 1.041px rgba(0,0,0,0.15),
    0 0.8px 2.925px rgba(0,0,0,0.2),
    0 2.025px 7.847px rgba(0,0,0,0.25),
    0 4px 18px rgba(0,0,0,0.3),
    0 23px 52px rgba(0,0,0,0.35);

  --canvas-grid-color: #3a3a3c;
}