/* =========================================================================
   Design tokens (CSS variables) - default theme.
   Loaded before app.css. Per customer override in /css/theme.css.
   ========================================================================= */

:root {
    /* --- Brand colors --- */
    --color-primary: #E1001A;
    /* Buttons, accents */
    --color-primary-hover: #b80016;
    --color-secondary: #004178;
    /* Headings, links, accents */
    --color-secondary-hover: #00305c;

    /* --- Neutral colors --- */
    --color-bg: #f1f2f4;
    /* Page background */
    --color-surface: #ffffff;
    /* Cards / content */
    --color-surface-alt: #f5f7fa;
    /* Sidebar, hover */
    --color-border: #d7dae0;
    --color-text: #333333;
    --color-heading: var(--color-secondary);
    --color-muted: #6b7280;
    --color-label: #374151;
    --color-gray: #9e9e9e;

    /* --- State / feedback --- */
    --color-danger: #dc2626;
    --color-danger-bg: #fdecee;
    --color-danger-border: #f3b4bc;
    --color-danger-text: #9c1020;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fcd34d;
    --color-warning-text: #92400e;
    --color-success: #5a9e5e;
    --color-success-bg: #e7f6e7;

    /* --- Typography --- */
    --font-family: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-size-base: 15px;
    --font-size-sm: 14px;
    --font-size-xs: 13px;
    --line-height: 1.5;
    --page-title-size: 28px;
    --page-title-size-lg: 30px;
    --heading-weight: 700;

    /* --- Border radius --- */
    --radius-sm: 6px;
    /* Inputs, buttons, notices */
    --radius-md: 8px;
    /* Smaller cards, address bar */
    --radius-lg: 10px;
    /* Cards, product rows, error box */
    --radius-full: 50%;

    /* --- Spacing --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --container-max: 1200px;
    --card-padding: 20px;
    --card-padding-lg: 32px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, .06);
    --shadow-pop: 0 6px 18px rgba(0, 0, 0, .12);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, .08);

    /* --- Buttons --- */
    --btn-padding-y: 10px;
    --btn-padding-x: 24px;
    --btn-radius: var(--radius-sm);
    --btn-font-size: 15px;
    --btn-font-weight: 600;
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-hover);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: var(--color-label);
    --btn-secondary-border: var(--color-border);
    --btn-secondary-bg-hover: #f9fafb;

    /* --- Inputs --- */
    --input-padding-y: 9px;
    --input-padding-x: 12px;
    --input-radius: var(--radius-sm);
    --input-border: var(--color-border);
    --input-bg: #ffffff;
    --input-font-size: 16px;
    /* >=16px prevents iOS zoom on focus */
    --input-focus-border: var(--color-secondary);
    --input-focus-ring: rgba(0, 65, 120, .25);
    --form-grid-gap: 12px;

    /* --- Header / footer --- */
    --header-bg: var(--color-surface);
    --footer-bg: var(--color-secondary);
    --footer-text: #e5e7eb;
    --logo-height: 48px;

    /* --- Backwards-compatible aliases (used in inline styles) --- */
    --siv-navy: var(--color-secondary);
    --siv-navy-dark: var(--color-secondary-hover);
    --siv-red: var(--color-primary);
    --siv-red-dark: var(--color-primary-hover);
    --muted: var(--color-muted);
    --border: var(--color-border);
    --gray: var(--color-gray);
    --gray-bg: var(--color-bg);
}