/*
 * Musardine design tokens
 *
 * Components should consume semantic custom properties from this file.
 * Theme-specific values stay here so components remain reusable.
 */

:root {
    color-scheme: light;

    /* Typography */
    --font-family-sans: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.08em;

    /* Light theme: foam, mineral blue and raven-inspired navy. */
    --color-primary: #1a2533;
    --color-secondary: #547086;
    --color-accent: #8fa6b7;

    --color-background: #f7f5f2;
    --color-surface: #ffffff;
    --color-surface-alt: #eff1f2;

    --color-border: #d9dde0;

    --color-text: #1a2533;
    --color-text-muted: #637182;

    /* Interactive colors */
    --color-focus: #547086;
    --color-hover: #243445;

    /* Semantic state colors */
    --color-info: #d9e5ec;
    --color-info-text: #29485b;

    --color-success: #d9e6d5;
    --color-success-text: #36543a;

    --color-warning: #f0dfb8;
    --color-warning-text: #624a16;

    --color-error: #edc9c0;
    --color-error-text: #722f27;

    /* Reusable visual values */
    --radius-small: 3px;
    --radius-medium: 5px;

    --shadow-card:
        0 1px 2px rgb(26 37 51 / 4%),
        0 6px 20px rgb(26 37 51 / 5%);
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Dark theme: storm cloud, deep ocean and pale foam. */
    --color-primary: #e6ebf0;
    --color-secondary: #8fa6b7;
    --color-accent: #6d869a;

    --color-background: #0e141b;
    --color-surface: #141c26;
    --color-surface-alt: #1c2631;

    --color-border: #32404d;

    --color-text: #e6ebf0;
    --color-text-muted: #a4b0bb;

    /* Interactive colors */
    --color-focus: #8fa6b7;
    --color-hover: #263746;

    /* Semantic state colors */
    --color-info: #294454;
    --color-info-text: #d9e8ef;

    --color-success: #365340;
    --color-success-text: #e0ebdf;

    --color-warning: #644f22;
    --color-warning-text: #f5e5bd;

    --color-error: #71372f;
    --color-error-text: #f2d7d1;

    /* Dark surfaces need less visible shadow than light surfaces. */
    --shadow-card:
        0 1px 2px rgb(0 0 0 / 20%),
        0 8px 24px rgb(0 0 0 / 18%);
}