/* Design tokens — single source of truth for the BibQ design system.
   Dark-mode ready: override semantic tokens under [data-theme="dark"]. */

:root {
    /* Brand palette (evolved from legacy #3e6d9c / #dca54c) */
    --blue-700: #24425f;
    --blue-600: #2c5075;
    --blue-500: #3e6d9c;
    --blue-400: #5a8eba;
    --blue-100: #dbe7f1;
    --blue-50:  #f0f4f8;

    --gold-600: #b07c2e;
    --gold-500: #dca54c;
    --gold-400: #e7bb74;
    --gold-100: #f7ead3;

    --ink-900: #1c2331;
    --ink-700: #333a45;
    --ink-500: #5c6672;
    --ink-400: #6c757d;
    --ink-300: #9aa3ad;
    --ink-200: #d6dbe0;
    --ink-100: #e9edf1;
    --ink-50:  #f8f9fa;
    --white:   #ffffff;

    /* Semantic colors */
    --color-primary: var(--blue-500);
    --color-primary-dark: var(--blue-600);
    --color-primary-light: var(--blue-400);
    --color-primary-subtle: var(--blue-50);
    --color-accent: var(--gold-500);
    --color-accent-dark: var(--gold-600);
    --color-accent-subtle: var(--gold-100);

    --color-surface: var(--white);
    --color-surface-alt: var(--ink-50);
    --color-background: var(--ink-50);
    --color-border: var(--ink-200);

    --color-text: var(--ink-900);
    --color-text-secondary: var(--ink-500);
    --color-text-muted: var(--ink-400);
    --color-text-inverse: var(--white);

    --color-success: #1e8e5a;
    --color-success-subtle: #dcf2e7;
    --color-danger: #c0392b;
    --color-danger-subtle: #fbe4e1;
    --color-warning: #b07c2e;
    --color-warning-subtle: var(--gold-100);
    --color-info: var(--blue-500);
    --color-info-subtle: var(--blue-100);

    /* Typography */
    --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-heading: 'Montserrat', var(--font-body);

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.6;

    /* Spacing — 8px scale */
    --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;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Shadows — flatter than legacy */
    --shadow-sm: 0 1px 2px rgba(28, 35, 49, 0.06);
    --shadow-md: 0 2px 8px rgba(28, 35, 49, 0.08);
    --shadow-lg: 0 8px 24px rgba(28, 35, 49, 0.12);

    /* Layout */
    --max-content-width: 720px;
    --max-app-width: 1400px;
    --header-height: 64px;
    --tabbar-height: 60px;

    /* Motion */
    --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;

    /* Z-index */
    --z-header: 100;
    --z-tabbar: 100;
    --z-modal: 1000;
    --z-toast: 1100;
}

[data-theme="dark"] {
    --color-primary-dark: #8ab4d8;
    --color-primary-light: #5a8eba;
    --color-primary-subtle: #202e40;
    --color-accent-dark: #e7bb74;
    --color-accent-subtle: #352b1b;

    --color-surface: #222a38;
    --color-surface-alt: #1a212d;
    --color-background: #141923;
    --color-border: #2f3a4b;

    --color-text: #e9edf1;
    --color-text-secondary: #9aa3ad;
    --color-text-muted: #727e8d;

    --color-success-subtle: #163625;
    --color-danger-subtle: #3a1a18;
    --color-warning-subtle: #352b1b;
    --color-info-subtle: #1c2b3d;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
}