/* Aura / BurkayNet — Faz 2 Design Tokens (Calm Tech + Structured Depth) */
:root {
  /* Semantic surfaces */
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #edf2f7;
  --color-surface-raised: #ffffff;
  --color-text: #152033;
  --color-text-muted: #667085;
  --color-text-soft: #8490a3;
  --color-border: #dce3ec;
  --color-border-strong: #c8d2df;
  --color-primary: #2457d6;
  --color-primary-hover: #1d46b0;
  --color-primary-active: #173b96;
  --color-primary-soft: #e8efff;
  --color-accent: #0e8fa3;
  --color-accent-hover: #0b7485;
  --color-accent-soft: #e1f5f7;
  --color-success: #16835b;
  --color-success-soft: #e5f6ef;
  --color-warning: #b96d0b;
  --color-warning-soft: #fff2dc;
  --color-danger: #c84242;
  --color-danger-soft: #fdeaea;
  --color-info: #3478c6;
  --color-info-soft: #e8f2fc;
  --color-focus: #2457d6;

  /* Typography */
  --font-sans: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 3vw, 2.75rem);
  --leading-body: 1.6;
  --leading-tight: 1.3;

  /* Spacing (8-based) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(21, 32, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(21, 32, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(21, 32, 51, 0.11);

  /* Motion */
  --motion-fast: 160ms ease;
  --motion-med: 200ms ease;

  /* Layout */
  --layout-max-width: 1200px;
  --layout-sidebar-width: 260px;
  --content-measure: 68ch;

  /* Legacy aliases (existing theme.css selectors) */
  --color-page: var(--color-bg);
  --color-background: var(--color-surface);
  --color-background-alt: var(--color-surface-subtle);
  --color-header: #10233f;
  --color-header-text: #f5f8fc;
  --color-category: var(--color-primary);
  --color-category-text: #ffffff;
  --color-row-hover: #eef3fa;
  --color-link: var(--color-primary);
  --color-unread: var(--color-primary);
  --color-secondary: var(--color-text-muted);
  --font-family-body: var(--font-sans);
  --font-family-heading: var(--font-sans);
  --font-size-base: 16px;
  --font-size-small: var(--text-sm);
  --font-size-large: var(--text-lg);
  --line-height: var(--leading-body);
  --spacing-padding-base: var(--space-2);
  --spacing-padding-large: var(--space-4);
  --spacing-margin-base: var(--space-2);
  --spacing-margin-large: var(--space-5);
  --border-radius: var(--radius-md);
  --border-radius-sm: var(--radius-sm);
  --shadow-1: var(--shadow-sm);
  --transition-fast: var(--motion-fast);
}

/* Dark scheme: preserve existing capability via token remap (no new toggle UI) */
html[data-color-scheme="dark"] {
  --color-bg: #0f141d;
  --color-surface: #171d28;
  --color-surface-subtle: #1f2633;
  --color-surface-raised: #1c2431;
  --color-text: #e6ebf3;
  --color-text-muted: #9aa6b8;
  --color-text-soft: #7d8a9d;
  --color-border: #2c3545;
  --color-border-strong: #3a4558;
  --color-primary: #6b93f0;
  --color-primary-hover: #8aabf5;
  --color-primary-active: #a8c0f8;
  --color-primary-soft: #1a2744;
  --color-accent: #3db8c9;
  --color-accent-hover: #5ecad8;
  --color-accent-soft: #14343a;
  --color-success: #3da87a;
  --color-success-soft: #163328;
  --color-warning: #d4a24a;
  --color-warning-soft: #3a2d14;
  --color-danger: #e07171;
  --color-danger-soft: #3a1f24;
  --color-info: #6aa3e0;
  --color-info-soft: #1a2c40;
  --color-focus: #6b93f0;
  --color-header: #0c1626;
  --color-header-text: #eef3fb;
  --color-category: #243552;
  --color-category-text: #eef3fb;
  --color-row-hover: #222b3a;
  --color-page: var(--color-bg);
  --color-background: var(--color-surface);
  --color-background-alt: var(--color-surface-subtle);
  --color-link: var(--color-primary);
  --color-unread: var(--color-primary);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-1: var(--shadow-sm);
}

/* Forest palette = same system, green-leaning primary (optional user choice) */
html[data-theme-palette="forest"] {
  --color-primary: #1f7a45;
  --color-primary-hover: #186339;
  --color-primary-active: #145230;
  --color-primary-soft: #e6f5ec;
  --color-accent: #0e8fa3;
  --color-accent-hover: #0b7485;
  --color-accent-soft: #e1f5f7;
  --color-header: #123524;
  --color-header-text: #f3faf5;
  --color-focus: #1f7a45;
  --color-link: var(--color-primary);
  --color-unread: var(--color-primary);
  --color-category: var(--color-primary);
}

html[data-theme-palette="forest"][data-color-scheme="dark"] {
  --color-primary: #5dba7e;
  --color-primary-hover: #7dcca0;
  --color-primary-active: #9adab6;
  --color-primary-soft: #163226;
  --color-header: #0e1f16;
  --color-focus: #5dba7e;
}
