/* ============================================================
   Notei Design System — Colors & Typography
   Source: Brand-Guideline-Notei.pdf
   Font: Inter (Google Fonts)
   ============================================================ */

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

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Brand Primary: Gold */
  --color-primary-50:  #FBF6E3;
  --color-primary-100: #F5E9BC;
  --color-primary-200: #EDD98A;
  --color-primary-300: #E4C760;
  --color-primary-400: #DCB94F;
  --color-primary-500: #D6B24A;   /* primary.600 per brand guide */
  --color-primary-600: #C49A2E;
  --color-primary-700: #A07D20;
  --color-primary-800: #7C5F16;
  --color-primary-900: #59430D;

  /* Brand Secondary: Deep Ink / Navy */
  --color-secondary-50:  #E8ECF0;
  --color-secondary-100: #C5CDD8;
  --color-secondary-200: #9DAFC0;
  --color-secondary-300: #7490A7;
  --color-secondary-400: #4F7390;
  --color-secondary-500: #335A78;
  --color-secondary-600: #274460;
  --color-secondary-700: #1E3249;
  --color-secondary-800: #1B2430;   /* secondary.900 per brand guide — Deep Ink */
  --color-secondary-900: #111820;

  /* Neutral: Light Background */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F8FA;    /* neutral.50 per brand guide */
  --color-neutral-100: #EEF0F3;
  --color-neutral-200: #DDE0E6;
  --color-neutral-300: #C5CAD4;
  --color-neutral-400: #9AA3B0;
  --color-neutral-500: #6E7B8C;
  --color-neutral-600: #4E5A69;
  --color-neutral-700: #3A4452;
  --color-neutral-800: #28323E;
  --color-neutral-900: #1B2430;

  /* Status Colors */
  --color-success-light: #22C55E;
  --color-success-dark:  #16A34A;
  --color-warning-light: #F59E0B;
  --color-warning-dark:  #D97706;
  --color-error-light:   #EF4444;
  --color-error-dark:    #DC2626;
  --color-info-light:    #3B82F6;
  --color-info-dark:     #2563EB;
}

/* ============================================================
   SEMANTIC COLOR TOKENS — Light Mode (default)
   ============================================================ */
:root {
  --bg-page:           var(--color-neutral-50);
  --bg-surface:        var(--color-neutral-0);
  --bg-surface-raised: var(--color-neutral-0);
  --bg-overlay:        rgba(27, 36, 48, 0.6);
  --bg-muted:          var(--color-neutral-100);
  --bg-hover:          var(--color-neutral-100);

  --fg-default:        var(--color-secondary-800);
  --fg-muted:          var(--color-neutral-500);
  --fg-subtle:         var(--color-neutral-400);
  --fg-on-dark:        var(--color-neutral-50);
  --fg-on-primary:     var(--color-secondary-800);

  --border-default:    var(--color-neutral-200);
  --border-strong:     var(--color-neutral-300);
  --border-focus:      var(--color-primary-500);

  --accent:            var(--color-primary-500);
  --accent-hover:      var(--color-primary-600);
  --accent-muted:      var(--color-primary-100);

  --shadow-sm:  0 1px 2px rgba(27,36,48,0.08);
  --shadow-md:  0 4px 12px rgba(27,36,48,0.10);
  --shadow-lg:  0 8px 24px rgba(27,36,48,0.14);
}

/* ============================================================
   SEMANTIC COLOR TOKENS — Dark Mode
   ============================================================ */
[data-theme="dark"], .dark {
  --bg-page:           var(--color-secondary-900);
  --bg-surface:        var(--color-secondary-800);
  --bg-surface-raised: #232f3e;
  --bg-overlay:        rgba(0, 0, 0, 0.6);
  --bg-muted:          rgba(255,255,255,0.06);
  --bg-hover:          rgba(255,255,255,0.08);

  --fg-default:        var(--color-neutral-50);
  --fg-muted:          var(--color-neutral-400);
  --fg-subtle:         var(--color-neutral-600);
  --fg-on-dark:        var(--color-neutral-50);
  --fg-on-primary:     var(--color-secondary-800);

  --border-default:    rgba(255,255,255,0.10);
  --border-strong:     rgba(255,255,255,0.18);
  --border-focus:      var(--color-primary-500);

  --accent:            var(--color-primary-500);
  --accent-hover:      var(--color-primary-400);
  --accent-muted:      rgba(214, 178, 74, 0.15);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;

  /* Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Leading */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.t-display-xl {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-heading-1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.t-heading-2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.t-heading-3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.t-heading-4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   SPACING TOKENS
   ============================================================ */
:root {
  --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;
  --space-24:  96px;
}

/* ============================================================
   BORDER RADIUS TOKENS
   ============================================================ */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
}

/* ============================================================
   TRANSITION TOKENS
   ============================================================ */
:root {
  --transition-fast:   100ms ease-out;
  --transition-normal: 150ms ease-out;
  --transition-slow:   250ms ease-out;
}