/* ==========================================================================
   Notion Design System — Tokens
   Single source of truth for color, type, spacing, radii, shadow.
   ========================================================================== */

/* Inter as a Notion-Sans substitute. Replace with the actual Notion-Sans
   webfont when available. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -------- Brand & Primary -------- */
  --primary: #5645d4;
  --primary-pressed: #4534b3;
  --primary-deep: #3a2a99;
  --on-primary: #ffffff;

  --brand-navy: #0a1530;
  --brand-navy-deep: #070f24;
  --brand-navy-mid: #1a2a52;

  --link-blue: #0075de;
  --link-blue-pressed: #005bab;

  /* -------- Brand color spectrum -------- */
  --brand-orange: #dd5b00;
  --brand-orange-deep: #793400;
  --brand-pink: #ff64c8;
  --brand-pink-deep: #a02e6d;
  --brand-purple: #7b3ff2;
  --brand-purple-300: #d6b6f6;
  --brand-purple-800: #391c57;
  --brand-teal: #2a9d99;
  --brand-green: #1aae39;
  --brand-yellow: #f5d75e;
  --brand-brown: #523410;

  /* -------- Card tints (pastel feature backgrounds) -------- */
  --card-tint-peach: #ffe8d4;
  --card-tint-rose: #fde0ec;
  --card-tint-mint: #d9f3e1;
  --card-tint-lavender: #e6e0f5;
  --card-tint-sky: #dcecfa;
  --card-tint-yellow: #fef7d6;
  --card-tint-yellow-bold: #f9e79f;
  --card-tint-cream: #f8f5e8;
  --card-tint-gray: #f0eeec;

  /* -------- Surface -------- */
  --canvas: #ffffff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --hairline: #e5e3df;
  --hairline-soft: #ede9e4;
  --hairline-strong: #c8c4be;

  /* -------- Text -------- */
  --ink-deep: #000000;
  --ink: #1a1a1a;
  --charcoal: #37352f; /* Notion's signature warm-charcoal */
  --slate: #5d5b54;
  --steel: #787671;
  --stone: #a4a097;
  --muted: #bbb8b1;
  --on-dark: #ffffff;
  --on-dark-muted: #a4a097;

  /* -------- Semantic -------- */
  --success: #1aae39;
  --warning: #dd5b00;
  --error: #e03131;

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

  /* size / weight / leading / tracking — packed pairs */
  --hero-display-size: 80px;
  --hero-display-tracking: -2px;

  --display-lg-size: 56px;
  --display-lg-tracking: -1px;

  --heading-1-size: 48px;
  --heading-2-size: 36px;
  --heading-3-size: 28px;
  --heading-4-size: 22px;
  --heading-5-size: 18px;

  --subtitle-size: 18px;

  --body-md-size: 16px;
  --body-sm-size: 14px;
  --caption-size: 13px;
  --micro-size: 12px;

  /* -------- Spacing (4px base, 8px primary) -------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;
  --space-hero: 120px;

  /* -------- Radii -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* buttons, inputs (NOT pills) */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-xxxl: 24px;
  --radius-full: 9999px;

  /* -------- Shadows -------- */
  --shadow-1: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;
  --shadow-2: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;
  --shadow-3: rgba(15, 15, 15, 0.20) 0px 24px 48px -8px; /* hero mockup */
  --shadow-4: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;
}

/* ==========================================================================
   Dark theme — flips surfaces, text, hairlines, and card tints.
   Brand colors (purple, orange, pink, navy hero) stay constant for identity.
   ========================================================================== */
[data-theme="dark"] {
  --canvas: #0f1115;
  --surface: #181a20;
  --surface-soft: #14161b;
  --hairline: #2a2d36;
  --hairline-soft: #23262f;
  --hairline-strong: #3a3e49;

  --ink-deep: #ffffff;
  --ink: #f1ede4;
  --charcoal: #d6d2c8;
  --slate: #a4a097;
  --steel: #8a8780;
  --stone: #6e6c66;
  --muted: #56544f;
  --on-dark: #ffffff;
  --on-dark-muted: #a4a097;

  --card-tint-peach:    #3a2a1c;
  --card-tint-rose:     #3a1f2d;
  --card-tint-mint:     #1c3326;
  --card-tint-lavender: #281f3d;
  --card-tint-sky:      #18283d;
  --card-tint-yellow:   #322d18;
  --card-tint-yellow-bold: #4a401e;
  --card-tint-cream:    #23211a;
  --card-tint-gray:     #1f1e1c;

  --link-blue: #6aa9f0;
  --link-blue-pressed: #8cc0f5;

  --shadow-1: rgba(0, 0, 0, 0.40) 0px 1px 2px 0px;
  --shadow-2: rgba(0, 0, 0, 0.50) 0px 4px 12px 0px;
  --shadow-3: rgba(0, 0, 0, 0.65) 0px 24px 48px -8px;
  --shadow-4: rgba(0, 0, 0, 0.55) 0px 16px 48px -8px;
}

html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--heading-1-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0;
}

h2, .h2 {
  font-size: var(--heading-2-size);
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0;
}

h3, .h3 {
  font-size: var(--heading-3-size);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

h4, .h4 {
  font-size: var(--heading-4-size);
  font-weight: 600;
  line-height: 1.30;
  color: var(--ink);
  margin: 0;
}

h5, .h5 {
  font-size: var(--heading-5-size);
  font-weight: 600;
  line-height: 1.40;
  color: var(--ink);
  margin: 0;
}

.hero-display {
  font-size: var(--hero-display-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--hero-display-tracking);
}

.display-lg {
  font-size: var(--display-lg-size);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: var(--display-lg-tracking);
}

.subtitle {
  font-size: var(--subtitle-size);
  font-weight: 400;
  line-height: 1.50;
  color: var(--slate);
}

p, .body-md {
  font-size: var(--body-md-size);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.body-md-medium { font-size: var(--body-md-size); font-weight: 500; line-height: 1.55; }
.body-sm { font-size: var(--body-sm-size); font-weight: 400; line-height: 1.50; }
.body-sm-medium { font-size: var(--body-sm-size); font-weight: 500; line-height: 1.50; }
.caption { font-size: var(--caption-size); font-weight: 400; line-height: 1.40; color: var(--slate); }
.caption-bold { font-size: var(--caption-size); font-weight: 600; line-height: 1.40; }
.micro { font-size: var(--micro-size); font-weight: 500; line-height: 1.40; }
.micro-uppercase {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.40;
  letter-spacing: 1px;
  text-transform: uppercase;
}

a, .link {
  color: var(--link-blue);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:active { color: var(--link-blue-pressed); }

code, pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--surface);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
}