/* ───────────────────────────────────────────────────────────────
   CalendarBridge Design System — Tokens
   Colors, type, radius, shadow, spacing
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  /* ── Brand ── */
  --cb-orange: #FF6709;
  --cb-orange-600: #FE7621;
  --cb-orange-400: #FF9553;
  --cb-orange-300: #FFB385;
  --cb-orange-100: #FFF4ED;
  --cb-orange-050: #FFEFE6;

  /* ── App primary (purple — used on filled in-app buttons) ── */
  --cb-purple:     #6C5AC8;
  --cb-purple-600: #6875F5;
  --cb-purple-300: #B2B9FF;
  --cb-purple-100: #E8E6F8;
  --cb-purple-050: #F2E6FF;  /* selected nav pill fill */

  /* ── Ink + neutrals (cool gray) ── */
  --cb-ink:        #111928;  /* headlines, body, logo wordmark */
  --cb-gray-900:   #111928;
  --cb-gray-800:   #1F2A37;
  --cb-gray-700:   #374151;
  --cb-gray-600:   #4B5563;
  --cb-gray-500:   #6B7280;
  --cb-gray-400:   #9CA3AF;
  --cb-gray-300:   #D1D5DB;
  --cb-gray-200:   #E5E7EB;
  --cb-gray-150:   #EEF0F3;
  --cb-gray-100:   #F3F4F6;
  --cb-gray-050:   #F9FAFB;
  --cb-surface:    #F7F7FA;   /* page canvas */
  --cb-white:      #FFFFFF;

  /* ── Semantic fg/bg ── */
  --cb-fg:        var(--cb-ink);
  --cb-fg-muted:  var(--cb-gray-500);
  --cb-fg-subtle: var(--cb-gray-400);
  --cb-fg-invert: var(--cb-white);
  --cb-bg:        var(--cb-surface);
  --cb-bg-card:   var(--cb-white);
  --cb-border:    var(--cb-gray-200);
  --cb-border-strong: var(--cb-gray-300);
  --cb-divider:   #F2F4F7;

  /* ── Status ── */
  --cb-success:        #0E9F6E;
  --cb-success-bright: #00D02E;
  --cb-success-050:    #DEF7EC;
  --cb-error:          #F05252;
  --cb-error-050:      #FDE8E8;
  --cb-warning:        #E3A008;
  --cb-warning-050:    #FDF6B2;
  --cb-info:           #3F83F8;
  --cb-info-050:       #E1EFFE;
  --cb-link:           #3F83F8;

  /* ── Calendar event tints (fill / border) ── */
  --cb-evt-personal-fill:   #FFEAD4;
  --cb-evt-personal-border: #FFB385;
  --cb-evt-family-fill:     #ECE5FF;
  --cb-evt-family-border:   #B2B9FF;
  --cb-evt-work-fill:       #DFE9FF;
  --cb-evt-work-border:     #9AB8FF;
  --cb-evt-holiday-fill:    #FCE2DF;
  --cb-evt-holiday-border:  #FF7B7B;
  --cb-evt-copy-fill:       #F3F4F6;
  --cb-evt-copy-border:     #D1D5DB;

  /* ── Typography ── */
  --cb-font-sans:   'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --cb-font-ui:     'Roboto', 'Inter', system-ui, sans-serif;     /* MD3 chrome */
  --cb-font-icon:   'Material Symbols Outlined';

  /* Type scale (px) */
  --cb-text-xs:   12px;
  --cb-text-sm:   14px;
  --cb-text-base: 16px;
  --cb-text-md:   18px;
  --cb-text-lg:   20px;
  --cb-text-xl:   22px;
  --cb-text-2xl:  24px;
  --cb-text-3xl:  30px;
  --cb-text-4xl:  36px;
  --cb-text-5xl:  48px;
  --cb-text-6xl:  56px;
  --cb-text-7xl:  64px;
  --cb-text-8xl:  82px;

  --cb-leading-tight:   1.1;
  --cb-leading-snug:    1.25;
  --cb-leading-normal:  1.5;
  --cb-leading-body:    1.6;

  --cb-weight-regular:  400;
  --cb-weight-medium:   500;
  --cb-weight-semibold: 600;
  --cb-weight-bold:     700;
  --cb-weight-black:    900;

  /* ── Spacing (8-based with 4-step extras) ── */
  --cb-space-1:  4px;
  --cb-space-2:  8px;
  --cb-space-3:  12px;
  --cb-space-4:  16px;
  --cb-space-5:  20px;
  --cb-space-6:  24px;
  --cb-space-8:  32px;
  --cb-space-10: 40px;
  --cb-space-12: 48px;
  --cb-space-16: 64px;

  /* ── Radius ── */
  --cb-radius-xs:  4px;
  --cb-radius-sm:  8px;
  --cb-radius-md:  12px;
  --cb-radius-lg:  16px;
  --cb-radius-xl:  24px;
  --cb-radius-2xl: 36px;
  --cb-radius-pill: 9999px;

  /* ── Shadow ── */
  --cb-shadow-sm: 0 1px 2px rgba(17,25,40,0.05);
  --cb-shadow-md: 0 1px 2px rgba(17,25,40,0.04), 0 8px 24px rgba(17,25,40,0.06);
  --cb-shadow-lg: 0 4px 12px rgba(17,25,40,0.08), 0 24px 48px rgba(17,25,40,0.10);
  --cb-shadow-focus: 0 0 0 4px rgba(126,85,212,0.20);

  /* ── Motion ── */
  --cb-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --cb-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --cb-dur-fast:    150ms;
  --cb-dur-base:    200ms;
  --cb-dur-slow:    300ms;
}

/* ── Semantic element defaults ── */
body {
  font-family: var(--cb-font-sans);
  color: var(--cb-fg);
  background: var(--cb-bg);
  font-size: var(--cb-text-base);
  line-height: var(--cb-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, .cb-h1 { font: var(--cb-weight-bold) var(--cb-text-5xl)/var(--cb-leading-tight) var(--cb-font-sans); letter-spacing: -0.02em; color: var(--cb-fg); }
h2, .cb-h2 { font: var(--cb-weight-bold) var(--cb-text-4xl)/var(--cb-leading-tight) var(--cb-font-sans); letter-spacing: -0.01em; color: var(--cb-fg); }
h3, .cb-h3 { font: var(--cb-weight-semibold) var(--cb-text-2xl)/var(--cb-leading-snug) var(--cb-font-sans); color: var(--cb-fg); }
h4, .cb-h4 { font: var(--cb-weight-semibold) var(--cb-text-lg)/var(--cb-leading-snug) var(--cb-font-sans); color: var(--cb-fg); }
h5, .cb-h5 { font: var(--cb-weight-medium) var(--cb-text-base)/var(--cb-leading-normal) var(--cb-font-sans); color: var(--cb-fg); }
p, .cb-body { font: var(--cb-weight-regular) var(--cb-text-base)/var(--cb-leading-body) var(--cb-font-sans); color: var(--cb-fg); }
.cb-small   { font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
.cb-caption { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); letter-spacing: 0.02em; }
.cb-eyebrow { font: var(--cb-weight-semibold) var(--cb-text-xs)/1.2 var(--cb-font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-orange); }
.cb-display { font: var(--cb-weight-black) var(--cb-text-7xl)/var(--cb-leading-tight) var(--cb-font-sans); letter-spacing: -0.02em; color: var(--cb-fg); }

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

.cb-mono { font-family: var(--cb-font-ui); }
.cb-ui   { font-family: var(--cb-font-ui); }  /* Roboto for MD3 chrome */

/* Material Symbols helper */
.material-symbols-outlined {
  font-family: var(--cb-font-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}