/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Colors - Primitives
     ------------------------------------------------------------------ */

  /* Newspaper - M3 tonal palette (tone = CIE-L* lightness) */
  --newspaper-0: #000000; /* Pure black */
  --newspaper-10: #1a1c1e; /* Very dark */
  --newspaper-20: #2f3133; /* Dark */
  --newspaper-30: #454749; /* Medium-dark */
  --newspaper-40: #5c5f61; /* Medium */
  --newspaper-50: #75787a; /* Middle grey */
  --newspaper-60: #8e9193; /* Medium-light */
  --newspaper-70: #a9acae; /* Light */
  --newspaper-80: #c4c7c9; /* Very light */
  --newspaper-90: #e0e3e5; /* Near white */
  --newspaper-95: #eef1f3; /* Off-white */
  --newspaper-99: #fbfcfe; /* Almost white */
  --newspaper-100: #ffffff; /* Pure white */

  /* Pure */
  --pure-white: #ffffff;
  --pure-black: #000000;

  /* Error - matte brick red (M3 tonal palette) */
  --error-0: #000000;
  --error-10: #2d1515;
  --error-20: #4a2525;
  --error-30: #693636;
  --error-40: #894848;
  --error-50: #a55c5c;
  --error-60: #be7272;
  --error-70: #d58b8b;
  --error-80: #e8a8a8;
  --error-90: #f5cbcb;
  --error-95: #fae5e5;
  --error-99: #fef6f6;
  --error-100: #ffffff;

  /* Success - matte sage green (M3 tonal palette) */
  --success-0: #000000;
  --success-10: #142118;
  --success-20: #253829;
  --success-30: #38503c;
  --success-40: #4c6950;
  --success-50: #628266;
  --success-60: #7a9b7e;
  --success-70: #94b498;
  --success-80: #b1cbb4;
  --success-90: #d0e3d2;
  --success-95: #e6f1e7;
  --success-99: #f6fbf6;
  --success-100: #ffffff;

  /* Warning - matte ochre (M3 tonal palette) */
  --warning-0: #000000;
  --warning-10: #211a0e;
  --warning-20: #3a2e18;
  --warning-30: #544424;
  --warning-40: #705b31;
  --warning-50: #8c7340;
  --warning-60: #a88c51;
  --warning-70: #c3a666;
  --warning-80: #dbc087;
  --warning-90: #eddcae;
  --warning-95: #f6edd2;
  --warning-99: #fcf9f0;
  --warning-100: #ffffff;

  /* Colors - M3 Roles (--np-color-*)
     ------------------------------------------------------------------ */

  /* Primary - high contrast grey for CTAs, key actions */
  --np-color-primary: var(--newspaper-20);
  --np-color-on-primary: var(--newspaper-95);
  --np-color-primary-container: var(--newspaper-90);
  --np-color-on-primary-container: var(--newspaper-10);

  /* Secondary - medium contrast for supporting actions */
  --np-color-secondary: var(--newspaper-40);
  --np-color-on-secondary: var(--newspaper-95);
  --np-color-secondary-container: var(--newspaper-90);
  --np-color-on-secondary-container: var(--newspaper-10);

  /* Tertiary - subtle accent, less emphasis */
  --np-color-tertiary: var(--newspaper-50);
  --np-color-on-tertiary: var(--newspaper-95);
  --np-color-tertiary-container: var(--newspaper-80);
  --np-color-on-tertiary-container: var(--newspaper-10);

  /* Error */
  --np-color-error: var(--error-50);
  --np-color-on-error: var(--error-100);
  --np-color-error-container: var(--error-90);
  --np-color-on-error-container: var(--error-10);

  /* Success (M3 extension) */
  --np-color-success: var(--success-50);
  --np-color-on-success: var(--success-100);
  --np-color-success-container: var(--success-90);
  --np-color-on-success-container: var(--success-10);

  /* Warning (M3 extension) */
  --np-color-warning: var(--warning-50);
  --np-color-on-warning: var(--warning-100);
  --np-color-warning-container: var(--warning-90);
  --np-color-on-warning-container: var(--warning-10);

  /* Background */
  --np-color-background: var(--newspaper-99);
  --np-color-on-background: var(--newspaper-10);

  /* Surface levels (low to high elevation) */
  --np-color-surface: var(--newspaper-99);
  --np-color-surface-dim: var(--newspaper-90);
  --np-color-surface-bright: var(--newspaper-100);
  --np-color-surface-container-lowest: var(--newspaper-100);
  --np-color-surface-container-low: var(--newspaper-95);
  --np-color-surface-container: var(--newspaper-90);
  --np-color-surface-container-high: var(--newspaper-80);
  --np-color-surface-container-highest: var(--newspaper-70);

  --np-color-on-surface: var(--newspaper-10);
  --np-color-on-surface-variant: var(--newspaper-30);

  /* Inverse (for dark contexts like snackbars, tooltips) */
  --np-color-inverse-surface: var(--newspaper-20);
  --np-color-inverse-on-surface: var(--newspaper-95);
  --np-color-inverse-on-surface-variant: var(--newspaper-70);
  --np-color-inverse-primary: var(--newspaper-80);

  /* Outline */
  --np-color-outline: var(--newspaper-50);
  --np-color-outline-strong: var(--newspaper-20);
  --np-color-outline-variant: var(--newspaper-80);

  /* Typography
     ------------------------------------------------------------------ */

  /* Font Family */
  --font-primary: "Frank Ruhl Libre", serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography - Semantic Type Scale (M3-based)
     Categories: Display, Headline, Title, Body, Label
     Sizes: large (lg), medium (md), small (sm) — Display also has xlarge (xl)
     ------------------------------------------------------------------ */

  /* Display: Hero text, large promotional headlines */
  --type-display-xl-size: 56px;
  --type-display-xl-line-height: 1;
  --type-display-xl-weight: var(--font-weight-light);
  --type-display-xl-tracking: -0.02em;

  --type-display-lg-size: 44px;
  --type-display-lg-line-height: 1;
  --type-display-lg-weight: var(--font-weight-light);
  --type-display-lg-tracking: -0.02em;

  --type-display-md-size: 40px;
  --type-display-md-line-height: 1.05;
  --type-display-md-weight: var(--font-weight-bold);
  --type-display-md-tracking: -0.01em;

  --type-display-sm-size: 36px;
  --type-display-sm-line-height: 1;
  --type-display-sm-weight: var(--font-weight-medium);
  --type-display-sm-tracking: -0.01em;

  /* Headline: Section headers, card titles, prominent UI */
  --type-headline-lg-size: 32px;
  --type-headline-lg-line-height: 1.1;
  --type-headline-lg-weight: var(--font-weight-medium);
  --type-headline-lg-tracking: -0.01em;

  --type-headline-md-size: 28px;
  --type-headline-md-line-height: 1.1;
  --type-headline-md-weight: var(--font-weight-medium);
  --type-headline-md-tracking: -0.01em;

  --type-headline-sm-size: 24px;
  --type-headline-sm-line-height: 1.15;
  --type-headline-sm-weight: var(--font-weight-regular);
  --type-headline-sm-tracking: -0.01em;

  /* Title: Navigation, buttons, form labels, medium emphasis */
  --type-title-lg-size: 22px;
  --type-title-lg-line-height: 1.15;
  --type-title-lg-weight: var(--font-weight-regular);
  --type-title-lg-tracking: -0.01em;

  --type-title-md-size: 20px;
  --type-title-md-line-height: 1.2;
  --type-title-md-weight: var(--font-weight-regular);
  --type-title-md-tracking: -0.01em;

  --type-title-sm-size: 18px;
  --type-title-sm-line-height: 1.25;
  --type-title-sm-weight: var(--font-weight-medium);
  --type-title-sm-tracking: 0;

  /* Body: Readable content, paragraphs, descriptions */
  --type-body-xl-size: 22px;
  --type-body-xl-line-height: 1.25;
  --type-body-xl-weight: var(--font-weight-regular);
  --type-body-xl-tracking: 0;

  --type-body-lg-size: 18px;
  --type-body-lg-line-height: 1.33;
  --type-body-lg-weight: var(--font-weight-regular);
  --type-body-lg-tracking: 0;

  --type-body-md-size: 16px;
  --type-body-md-line-height: 1.4;
  --type-body-md-weight: var(--font-weight-regular);
  --type-body-md-tracking: 0;

  --type-body-sm-size: 14px;
  --type-body-sm-line-height: 1.4;
  --type-body-sm-weight: var(--font-weight-regular);
  --type-body-sm-tracking: 0;

  /* Label: Chips, metadata, captions, small UI text */
  --type-label-xl-size: 18px;
  --type-label-xl-line-height: 1.3;
  --type-label-xl-weight: var(--font-weight-regular);
  --type-label-xl-tracking: 0;

  --type-label-lg-size: 14px;
  --type-label-lg-line-height: 1.3;
  --type-label-lg-weight: var(--font-weight-medium);
  --type-label-lg-tracking: 0;

  --type-label-md-size: 12px;
  --type-label-md-line-height: 1.33;
  --type-label-md-weight: var(--font-weight-medium);
  --type-label-md-tracking: 0.01em;

  --type-label-sm-size: 11px;
  --type-label-sm-line-height: 1.4;
  --type-label-sm-weight: var(--font-weight-medium);
  --type-label-sm-tracking: 0.01em;

  /* Component Typography Tokens
     Reference semantic scale where possible, override where needed
     ------------------------------------------------------------------ */

  /* Normal Text → body-lg */
  --text-normal-size: var(--type-body-lg-size);
  --text-normal-line-height: var(--type-body-lg-line-height);

  /* Small Text → body-md */
  --text-small-size: var(--type-body-md-size);

  /* Navbar Logo → display-lg */
  --text-logo-size: var(--type-display-lg-size);
  --text-logo-line-height: var(--type-display-lg-line-height);
  --text-logo-letter-spacing: var(--type-display-lg-tracking);
  --text-logo-weight: var(--type-display-lg-weight);

  /* Navbar Button → title-md */
  --text-nav-button-size: var(--type-title-md-size);
  --text-nav-button-line-height: var(--type-title-md-line-height);
  --text-nav-button-letter-spacing: var(--type-title-md-tracking);

  /* Avatar → title-md */
  --text-avatar-size: var(--type-title-md-size);
  --text-avatar-line-height: var(--type-title-md-line-height);
  --text-avatar-letter-spacing: var(--type-title-md-tracking);

  /* Navbar Label → title-md (with overrides) */
  --text-nav-label-size: var(--type-title-md-size);
  --text-nav-label-line-height: 1; /* override: tighter for single-line labels */
  --text-nav-label-letter-spacing: var(--type-title-md-tracking);
  --text-nav-label-weight: var(
    --font-weight-medium
  ); /* override: medium weight */

  /* Thing Card - Type: unique style (wide tracking) */
  --text-thing-card-type-size: var(--type-body-md-size);
  --text-thing-card-type-weight: var(--font-weight-light);
  --text-thing-card-type-letter-spacing: 0.4em; /* unique wide tracking */

  /* Thing Card - Name → display-md */
  --text-thing-card-name-size: var(--type-display-md-size);
  --text-thing-card-name-line-height: var(--type-display-md-line-height);
  --text-thing-card-name-weight: var(--type-display-md-weight);

  /* Thing Card - Supplemental → body-lg */
  --text-thing-card-supplemental-size: var(--type-body-lg-size);
  --text-thing-card-supplemental-weight: var(--type-body-lg-weight);

  /* Thing Card - Reason Main → display-md (with overrides) */
  --text-thing-card-reason-main-size: var(--type-display-md-size);
  --text-thing-card-reason-main-line-height: 1.1; /* override: slightly looser */
  --text-thing-card-reason-main-weight: var(
    --font-weight-regular
  ); /* override: regular not bold */
  --text-thing-card-reason-main-letter-spacing: -0.02em; /* override: tighter tracking */

  /* Thing Card - Reason Additional → title-lg */
  --text-thing-card-reason-additional-size: var(--type-title-lg-size);
  --text-thing-card-reason-additional-line-height: var(
    --type-title-lg-line-height
  );
  --text-thing-card-reason-additional-weight: var(--type-title-lg-weight);

  /* Thing Card - Reason Stats → body-lg */
  --text-thing-card-reason-stats-size: var(--type-body-lg-size);
  --text-thing-card-reason-stats-weight: var(--type-body-lg-weight);

  /* Thing Card - Action → title-md */
  --text-thing-card-action-size: var(--type-title-md-size);
  --text-thing-card-action-weight: var(--type-title-md-weight);
  --text-thing-card-action-letter-spacing: var(--type-title-md-tracking);

  /* Thing Card v2 - Name → display-sm */
  --text-card-name-size: var(--type-display-sm-size);
  --text-card-name-line-height: var(--type-display-sm-line-height);
  --text-card-name-weight: var(--type-display-sm-weight);
  --text-card-name-letter-spacing: var(--type-display-sm-tracking);

  /* Thing Card v2 - Reason → title-lg (with override) */
  --text-card-reason-size: var(--type-title-lg-size);
  --text-card-reason-line-height: var(--type-title-lg-line-height);
  --text-card-reason-letter-spacing: -0.02em; /* override: tighter tracking */

  /* Thing Card v2 - Stats → body-lg (with override) */
  --text-card-stats-size: var(--type-body-lg-size);
  --text-card-stats-line-height: 1.22; /* override: tighter for stats */

  /* Thing Card v2 - My Rec → title-md */
  --text-card-my-rec-size: var(--type-title-md-size);
  --text-card-my-rec-line-height: var(--type-title-md-line-height);
  --text-card-my-rec-letter-spacing: var(--type-title-md-tracking);

  /* Panel Header → body-lg */
  --text-panel-header-size: var(--type-body-lg-size);
  --text-panel-header-line-height: var(--type-body-lg-line-height);
  --text-panel-header-family: var(--font-primary);
  --text-panel-header-weight: var(--type-body-lg-weight);
  --height-panel-header: 44px;

  /* Spacing
     ------------------------------------------------------------------ */
  --space-1: 4px; /* 0.5x */
  --space-2: 8px; /* 1x base */
  --space-3: 12px; /* 1.5x */
  --space-4: 16px; /* 2x */
  --space-6: 24px; /* 3x */
  --space-8: 32px; /* 4x */

  /* Sizes
     ------------------------------------------------------------------ */
  --size-icon-xs: 16px;
  --size-icon-sm: 20px;
  --size-icon-md: 24px; /* default */
  --size-icon-lg: 32px;
  --size-icon-xl: 40px;

  --size-touch: 40px; /* minimum touch target */
  --size-touch-lg: 80px; /* large touch target */
  --size-main-nav: 320px;
  --size-panel: 400px;
  --size-card-width: 320px;
  --size-card-height: 600px;

  /* Borders
     ------------------------------------------------------------------ */
  --border-width: 1px;
  --border-width-thick: 2px;

  --border-normal: var(--border-width) solid;
  --border-width-raised: var(--border-width) var(--border-width-thick)
    var(--border-width-thick) var(--border-width);
  --border-width-inset: var(--border-width-thick) var(--border-width)
    var(--border-width) var(--border-width-thick);

  /* Border Radius
     ------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 0; /* schemes can override */
  --radius-md: 0; /* schemes can override */
  --radius-lg: 0; /* schemes can override */
  --radius-full: 50%;

  /* Shadows
     ------------------------------------------------------------------ */

  /* Transitions
     ------------------------------------------------------------------ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-loading: 4s;

  /* Entrance Animation
     ------------------------------------------------------------------ */
  --entrance-distance: 20px;
  --entrance-offscreen: 100vw;

  /* Layout
     ------------------------------------------------------------------ */
  --layout-page-margin: 24px;

  /* Breakpoints
     ------------------------------------------------------------------ */
  --breakpoint-small: 480px;

  /* Mobile Sizes
     ------------------------------------------------------------------ */
  --size-mobile-touch-lg: 56px;
  --size-mobile-touch: 44px;
}