/* ==========================================================================
   DownPortal — Design Tokens & Solid High-Contrast Architecture
   ========================================================================== */

:root {
  color-scheme: light;

  /* Canonical Colors — Deep, High Contrast & Solid */
  --ui-color-primary: #2563eb;
  --ui-color-primary-hover: #1d4ed8;
  --ui-color-primary-active: #1e40af;
  --ui-color-primary-subtle: #eff6ff;
  --ui-color-canvas: #ffffff;
  --ui-color-surface-subtle: #f8fafc;
  --ui-color-surface-muted: #f1f5f9;
  --ui-color-text-strong: #090d16;
  --ui-color-text: #1e293b;
  --ui-color-text-muted: #475569;
  --ui-color-border: #cbd5e1;
  --ui-color-border-soft: #e2e8f0;
  --ui-color-border-dashed: #94a3b8;
  --ui-color-border-strong: #64748b;

  /* Semantic State Colors */
  --semantic-category: #15803d;
  --semantic-category-bg: #f0fdf4;
  --semantic-favourite: #f43f5e;
  --semantic-favourite-bg: #fff1f2;
  --semantic-favorite: #f43f5e;
  --semantic-favorite-bg: #fff1f2;
  --semantic-favorite-border: #fecdd3;
  --semantic-favorite-active: #f43f5e;
  --semantic-bookmark: #f43f5e;
  --semantic-bookmark-bg: #fff1f2;
  --semantic-message: #38bdf8;
  --semantic-message-bg: #f0f9ff;
  --semantic-danger: #dc2626;
  --semantic-danger-bg: #fef2f2;
  --semantic-danger-border: #fca5a5;
  --semantic-vip: #d97706;
  --semantic-vip-bg: #fffbeb;
  --semantic-success: #15803d;
  --semantic-success-bg: #f0fdf4;
  --semantic-success-border: #86efac;

  /* Layout Dimensions */
  --ui-shell-width: 1360px;
  --ui-content-width: 1160px;
  --ui-feed-width: 800px;
  --ui-sidebar-width: 320px;
  --ui-header-height: 64px;
  --ui-subnav-height: 36px;

  /* Border Radii (Crisp & Structured) */
  --ui-radius-xs: 3px;
  --ui-radius-sm: 5px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 8px;
  --ui-radius-pill: 9999px;

  /* Spacing Scale */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  /* Typography Stacks */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-code: "JetBrains Mono", "Roboto Mono", Consolas, Monaco, monospace;
  --font-sans: var(--font-base);
  --font-mono: var(--font-code);

  /* Typography Scale */
  --type-display-lg-size: 2.25rem; /* 36px */
  --type-display-lg-weight: 750;
  --type-display-lg-ls: -0.05rem;

  --type-display-md-size: 1.75rem; /* 28px */

  --type-title-lg-size: 1.25rem; /* 20px */
  --type-title-lg-weight: 750;
  --type-title-lg-lh: 1.35;
  --type-title-lg-ls: -0.0125rem;

  --type-title-md-size: 1rem; /* 16px */

  --type-title-sm-size: 0.875rem; /* 14px */
  --type-title-sm-weight: 750;

  --type-body-lg-size: 1rem; /* 16px */
  --type-body-lg-lh: 1.6;

  --type-body-md-size: 0.875rem; /* 14px */
  --type-body-md-lh: 1.55;

  --type-body-sm-size: 0.8125rem; /* 13px */
  --type-body-sm-lh: 1.5;

  --type-caption-size: 0.75rem; /* 12px */
  --type-caption-lh: 1.45;

  --type-button-size: 0.875rem; /* 14px */
  --type-nav-link-size: 0.8125rem; /* 13px */
  --type-nav-link-weight: 650;
  --type-badge-micro-size: 0.6875rem; /* 11px */

  /* Chrome & Header */
  --chrome-header: #090d16;
  --header-bg: var(--chrome-header);
  --header-border: rgba(255, 255, 255, 0.15);

  /* Transitional Aliases */
  --primary: var(--ui-color-primary);
  --primary-hover: var(--ui-color-primary-hover);
  --primary-subtle: var(--ui-color-primary-subtle);
  --color-primary: var(--ui-color-primary);
  --color-primary-hover: var(--ui-color-primary-hover);

  --canvas: var(--ui-color-canvas);
  --surface-subdued: var(--ui-color-surface-subtle);
  --surface-muted: var(--ui-color-surface-muted);
  --bg-page: var(--canvas);
  --bg-subtle: var(--surface-subdued);
  --bg-muted: var(--surface-muted);

  --color-ink: var(--ui-color-text-strong);
  --color-ink-soft: var(--ui-color-text);
  --color-ink-muted: var(--ui-color-text-muted);
  --color-border: var(--ui-color-border);
  --color-border-soft: var(--ui-color-border-soft);

  --ui-surface: var(--canvas);
  --ui-surface-subtle: var(--surface-subdued);
  --ui-surface-muted: var(--surface-muted);
  --ui-surface-hover: var(--ui-color-border-soft);
  --ui-text: var(--ui-color-text);
  --ui-text-primary: var(--ui-color-text-strong);
  --ui-text-secondary: var(--ui-color-text);
  --ui-text-strong: var(--ui-color-text-strong);
  --ui-text-muted: var(--ui-color-text-muted);
  --ui-border: var(--color-border);
  --ui-border-soft: var(--color-border-soft);
  --ui-border-strong: var(--ui-color-border-strong);
  --ui-border-dashed: var(--ui-color-border-dashed);
  --ui-action: var(--ui-color-primary);
  --ui-action-hover: var(--ui-color-primary-hover);
  --ui-action-soft: var(--ui-color-primary-subtle);
  --ui-on-action: #ffffff;
  --ui-control-radius: var(--ui-radius-xs);
  --ui-card-radius: var(--ui-radius-sm);
  --ui-control-padding: var(--ui-space-2) var(--ui-space-3);

  --border-subtle: var(--color-border-soft);
  --border-default: var(--color-border);
  --border-dashed: var(--ui-color-border-dashed);
  --border-strong: var(--ui-color-border-strong);
  --border-main: var(--border-default);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-tertiary: #334155;
  --text-quaternary: #475569;
  --text-dark: var(--text-primary);
  --text-body: var(--text-secondary);
  --text-light: var(--text-tertiary);

  --color-amber: var(--semantic-vip);
  --color-amber-bg: var(--semantic-vip-bg);
  --color-vip: var(--semantic-vip);
  --shell-width: var(--ui-shell-width);
  --radius-xs: var(--ui-radius-xs);
  --radius-sm: var(--ui-radius-sm);
  --radius-md: var(--ui-radius-md);
  --radius-lg: var(--ui-radius-lg);
  --radius-pill: var(--ui-radius-pill);

  --ink: var(--color-ink);
  --body: var(--color-ink-soft);
  --muted: var(--text-tertiary);
  --muted-soft: var(--color-ink-muted);
  --surface-soft: var(--surface-subdued);
  --hairline: var(--color-border);
  --hairline-dashed: var(--border-dashed);
}