/* ============================================================
   Aube Design System — Design Tokens
   Mirror of Flutter app (lib/designsystem/tokens/*).
   Single source of truth: colors, spacing, radius, shadows,
   motion, fonts, breakpoints, z-index.
   ============================================================ */

:root {
    /* ----- Brand palette (raw values) ----- */
    --aube-ink: #2B2118;
    --aube-cream: #F7F1E8;
    --aube-gold: #C89A5B;
    --aube-peach: #F0C9A8;
    --aube-rose: #E8A48A;

    /* Dark palette (raw) */
    --aube-dark-bg: #1A130D;
    --aube-dark-surface: #221A12;
    --aube-dark-surface-muted: #1F170F;
    --aube-dark-border: #3A2E22;
    --aube-dark-text-secondary: #D9C8B2;
    --aube-dark-text-muted: #9A8770;

    /* Semantic (consistent across themes) */
    --aube-success: #4A8F6A;
    --aube-warning: #D9A14A;
    --aube-error: #AF111C;
    --aube-info: #5C7B96;

    /* ----- Light theme semantic tokens ----- */
    --color-background: var(--aube-cream);
    --color-surface: #FFFFFF;
    --color-surface-muted: #F0E9DC;
    --color-surface-inverse: var(--aube-ink);
    --color-text-primary: var(--aube-ink);
    --color-text-secondary: #5C4F40;
    --color-text-muted: #8A7C68;
    --color-text-on-inverse: var(--aube-cream);
    --color-text-on-accent: var(--aube-ink);
    --color-border: #E5DBC9;
    --color-border-strong: #C8B89A;
    --color-accent: var(--aube-gold);
    --color-accent-soft: var(--aube-peach);
    --color-accent-strong: #B0824A;
    --color-link: #8A5A2F;
    --color-link-hover: var(--aube-ink);
    --color-shadow: rgba(0, 0, 0, 0.07);
    --color-shadow-strong: rgba(0, 0, 0, 0.12);
    --color-overlay: rgba(43, 33, 24, 0.55);
    --color-success-bg: #DDEFE3;
    --color-warning-bg: #F5E8D0;
    --color-error-bg: #F4D8DA;
    --color-info-bg: #DCE5ED;

    /* Theme-color meta synced */
    --theme-color: var(--color-background);

    /* ----- Typography ----- */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

    /* Type scale (size / line-height / letter-spacing / weight) */
    --text-display-lg-size: 3rem;          /* 48 */
    --text-display-lg-line: 1.05;
    --text-display-lg-tracking: -0.0188em; /* -0.9px@48 */
    --text-display-lg-weight: 500;

    --text-display-md-size: 2.25rem;       /* 36 */
    --text-display-md-line: 1.1;
    --text-display-md-tracking: -0.022em;
    --text-display-md-weight: 500;

    --text-h1-size: 2rem;                  /* 28-32 responsive */
    --text-h1-line: 1.15;
    --text-h1-tracking: -0.014em;
    --text-h1-weight: 500;

    --text-h2-size: 1.625rem;              /* 26 */
    --text-h2-line: 1.2;
    --text-h2-tracking: -0.01em;
    --text-h2-weight: 500;

    --text-h3-size: 1.375rem;              /* 22 */
    --text-h3-line: 1.25;
    --text-h3-tracking: -0.005em;
    --text-h3-weight: 500;

    --text-title-lg-size: 1.25rem;         /* 20 */
    --text-title-lg-line: 1.3;
    --text-title-lg-weight: 500;

    --text-title-md-size: 1.125rem;        /* 18 */
    --text-title-md-line: 1.35;
    --text-title-md-weight: 500;

    --text-title-sm-size: 1rem;            /* 16 */
    --text-title-sm-line: 1.4;
    --text-title-sm-weight: 600;

    --text-body-lg-size: 1.0625rem;        /* 17 web-comfortable */
    --text-body-lg-line: 1.65;
    --text-body-lg-weight: 400;

    --text-body-md-size: 0.9375rem;        /* 15 */
    --text-body-md-line: 1.6;
    --text-body-md-weight: 400;

    --text-body-sm-size: 0.8125rem;        /* 13 */
    --text-body-sm-line: 1.5;
    --text-body-sm-weight: 400;

    --text-label-lg-size: 0.875rem;        /* 14 */
    --text-label-lg-weight: 600;

    --text-label-md-size: 0.75rem;         /* 12 */
    --text-label-md-weight: 600;

    --text-label-sm-size: 0.6875rem;       /* 11 */
    --text-label-sm-weight: 600;

    --text-overline-size: 0.6875rem;       /* 11 */
    --text-overline-tracking: 0.08em;
    --text-overline-weight: 700;

    --text-quote-lg-size: 1.375rem;        /* 22 */
    --text-quote-lg-line: 1.45;

    --text-mono-size: 0.75rem;
    --text-mono-line: 1.4;

    /* ----- Spacing scale ----- */
    --space-xs: 0.25rem;    /* 4 */
    --space-sm: 0.5rem;     /* 8 */
    --space-md: 0.75rem;    /* 12 */
    --space-lg: 1rem;       /* 16 */
    --space-xl: 1.5rem;     /* 24 */
    --space-2xl: 2rem;      /* 32 */
    --space-3xl: 3rem;      /* 48 */
    --space-4xl: 4rem;      /* 64 */
    --space-5xl: 6rem;      /* 96 */
    --space-6xl: 8rem;      /* 128 */

    /* Section padding (top/bottom of a landing section) */
    --section-pad-y: clamp(3rem, 6vw, 6rem);
    --section-pad-y-lg: clamp(4rem, 8vw, 8rem);

    /* Page horizontal gutter */
    --gutter: clamp(1rem, 4vw, 1.75rem);

    /* Container max widths */
    --container-narrow: 720px;     /* long-form reading */
    --container-default: 1120px;   /* standard pages */
    --container-wide: 1280px;      /* landing-only */

    /* ----- Radius ----- */
    --radius-xs: 0.25rem;    /* 4 */
    --radius-sm: 0.5rem;     /* 8 — badges */
    --radius-md: 0.875rem;   /* 14 — inputs, compact cards */
    --radius-lg: 1.125rem;   /* 18 — default cards */
    --radius-xl: 1.5rem;     /* 24 — hero cards, modals */
    --radius-2xl: 2rem;      /* 32 — extra-large */
    --radius-pill: 9999px;

    /* ----- Shadows (adaptive via --color-shadow) ----- */
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 6px 16px var(--color-shadow);
    --shadow-lg: 0 12px 32px var(--color-shadow-strong);
    --shadow-editorial: 0 24px 60px -12px var(--color-shadow-strong);
    --shadow-focus: 0 0 0 3px rgba(200, 154, 91, 0.35);

    /* ----- Motion ----- */
    --motion-micro: 120ms;
    --motion-fast: 200ms;
    --motion-base: 300ms;
    --motion-slow: 450ms;
    --motion-slower: 700ms;
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* ----- Z-index scale ----- */
    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;

    /* ----- Component-specific ----- */
    --nav-height: 4rem;
    --focus-ring: 2px solid var(--aube-gold);
    --focus-ring-offset: 2px;

    color-scheme: light;
}

/* ============================================================
   Dark theme — applied via @media OR [data-theme="dark"]
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: var(--aube-dark-bg);
        --color-surface: var(--aube-dark-surface);
        --color-surface-muted: var(--aube-dark-surface-muted);
        --color-surface-inverse: var(--aube-cream);
        --color-text-primary: var(--aube-cream);
        --color-text-secondary: var(--aube-dark-text-secondary);
        --color-text-muted: var(--aube-dark-text-muted);
        --color-text-on-inverse: var(--aube-ink);
        --color-text-on-accent: var(--aube-ink);
        --color-border: var(--aube-dark-border);
        --color-border-strong: #5A4736;
        --color-accent: var(--aube-peach);
        --color-accent-soft: var(--aube-rose);
        --color-accent-strong: #F8DAB8;
        --color-link: var(--aube-peach);
        --color-link-hover: var(--aube-cream);
        --color-shadow: rgba(0, 0, 0, 0.32);
        --color-shadow-strong: rgba(0, 0, 0, 0.5);
        --color-overlay: rgba(0, 0, 0, 0.7);
        --color-success-bg: #1F3D2C;
        --color-warning-bg: #3D2E14;
        --color-error-bg: #3D1A1E;
        --color-info-bg: #1F2D3D;
        --theme-color: var(--aube-dark-bg);
        color-scheme: dark;
    }
}

[data-theme="dark"] {
    --color-background: var(--aube-dark-bg);
    --color-surface: var(--aube-dark-surface);
    --color-surface-muted: var(--aube-dark-surface-muted);
    --color-surface-inverse: var(--aube-cream);
    --color-text-primary: var(--aube-cream);
    --color-text-secondary: var(--aube-dark-text-secondary);
    --color-text-muted: var(--aube-dark-text-muted);
    --color-text-on-inverse: var(--aube-ink);
    --color-text-on-accent: var(--aube-ink);
    --color-border: var(--aube-dark-border);
    --color-border-strong: #5A4736;
    --color-accent: var(--aube-peach);
    --color-accent-soft: var(--aube-rose);
    --color-accent-strong: #F8DAB8;
    --color-link: var(--aube-peach);
    --color-link-hover: var(--aube-cream);
    --color-shadow: rgba(0, 0, 0, 0.32);
    --color-shadow-strong: rgba(0, 0, 0, 0.5);
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-success-bg: #1F3D2C;
    --color-warning-bg: #3D2E14;
    --color-error-bg: #3D1A1E;
    --color-info-bg: #1F2D3D;
    --theme-color: var(--aube-dark-bg);
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}