/*
 * SWISS Virtual Design Token System
 * ============================================================
 * Shared by Pilot Console and Admin Console.
 * Ported from public-web-5.0 main.css (lines 36–200).
 *
 * Usage:
 *   Import this file BEFORE pilotconsole.css / adminconsole.css.
 *   Reference tokens via CSS custom properties: var(--token-name)
 *
 * Milestone: M002 — CSS Token Architecture
 * ============================================================
 */

/* ============================================================
 * @font-face declarations
 * Unified CH Sans family with explicit weight variants.
 * All paths are relative (same directory as this file).
 * ============================================================ */

@font-face {
    font-family: 'CH Sans';
    src: url(swiss-fonts/chsans-light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CH Sans';
    src: url(swiss-fonts/chsans-regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CH Sans';
    src: url(swiss-fonts/chsans-medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CH Sans';
    src: url(swiss-fonts/chsans-bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'swiss-piktos';
    src: url(swiss-fonts/swiss-piktos.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
 * Design Tokens — Light Mode (default)
 * ============================================================ */

:root {

    /* ----------------------------------------------------------
     * Colors — Core palette
     * ---------------------------------------------------------- */
    --color-primary:        #cc0000;
    --color-primary-hover:  #b30000;
    --color-background:     #ffffff;
    --color-surface:        #f5f5f5;
    --color-text:           #1a1a1a;
    --color-text-muted:     #666666;
    --color-border:         #e5e5e5;

    /* Legacy palette aliases (used by pilotconsole.css) */
    --color-surface-legacy: #f2f2f2;   /* original #f2f2f2 surface */
    --color-border-legacy:  #cdcdcd;   /* original #cdcdcd border */

    /* ----------------------------------------------------------
     * Colors — Semantic
     * ---------------------------------------------------------- */
    --color-success:  #008e17;
    --color-warning:  #f3a200;
    --color-danger:   #cc0000;
    --color-info:     #0d82b9;
    --color-accent:   #46413e;   /* SWISS dark brown — icons, secondary text */

    /* ----------------------------------------------------------
     * Spacing scale (4px base grid)
     * ---------------------------------------------------------- */
    --space-xs:  0.25rem;   /*  4px */
    --space-sm:  0.5rem;    /*  8px */
    --space-md:  1rem;      /* 16px */
    --space-lg:  2rem;      /* 32px */
    --space-xl:  4rem;      /* 64px */
    --space-2xl: 6rem;      /* 96px */

    /* ----------------------------------------------------------
     * Typography — Families
     * ---------------------------------------------------------- */
    --font-sans:   'CH Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-piktos: 'swiss-piktos';
    --font-mono:   monospace;

    /* ----------------------------------------------------------
     * Typography — Fluid sizes (clamp: min, preferred, max)
     * ---------------------------------------------------------- */
    --font-size-sm:   clamp(0.75rem,  1.5vw,  0.875rem);  /* 12–14px */
    --font-size-base: clamp(0.875rem, 2vw,    1rem);       /* 14–16px */
    --font-size-md:   clamp(1rem,     2.5vw,  1.125rem);   /* 16–18px */
    --font-size-lg:   clamp(1.125rem, 3vw,    1.5rem);     /* 18–24px */
    --font-size-xl:   clamp(1.5rem,   4vw,    2rem);       /* 24–32px */
    --font-size-2xl:  clamp(2rem,     5vw,    2.5rem);     /* 32–40px */
    --font-size-3xl:  clamp(2.5rem,   6vw,    3rem);       /* 40–48px */
    --font-size-4xl:  clamp(3rem,     7vw,    4rem);       /* 48–64px */

    /* ----------------------------------------------------------
     * Typography — Line heights
     * ---------------------------------------------------------- */
    --line-height-tight:   1.2;
    --line-height-base:    1.5;
    --line-height-relaxed: 1.7;

    /* ----------------------------------------------------------
     * Typography — Font weights
     * ---------------------------------------------------------- */
    --font-weight-light:  300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   700;

    /* ----------------------------------------------------------
     * Transitions
     * ---------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 1s ease;   /* matches existing body/widget transitions */

    /* ----------------------------------------------------------
     * Shadows
     * ---------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* ----------------------------------------------------------
     * Border radii — Sharp per SWISS design decision
     * ---------------------------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 4px;
}

/* ============================================================
 * Smooth theme transitions
 * Applied on <html> so all properties animate on theme change.
 * Disabled automatically for users who prefer reduced motion.
 * ============================================================ */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        transition: none;
    }
}

/* ============================================================
 * Dark Mode — OS preference fallback
 * Applied when the user hasn't set an explicit theme choice.
 * :root:not([data-theme]) means no JS override is active.
 * ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-background:     #000000;
        --color-surface:        #111111;
        --color-text:           #ffffff;
        --color-text-muted:     #a0a0a0;
        --color-border:         #333333;
        --color-surface-legacy: #111111;
        --color-border-legacy:  #2a2a2a;
        --color-accent:         #a0a0a0;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================
 * Dark Mode — Explicit user choice
 * Applied when the user selects "dark" in the theme switcher.
 * Takes priority over the @media block above.
 * ============================================================ */
:root[data-theme="dark"] {
    --color-background:     #000000;
    --color-surface:        #111111;
    --color-text:           #ffffff;
    --color-text-muted:     #a0a0a0;
    --color-border:         #333333;
    --color-surface-legacy: #111111;
    --color-border-legacy:  #2a2a2a;
    --color-accent:         #a0a0a0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* ============================================================
 * Light Mode — Explicit user choice
 * Applied when the user selects "light" in the theme switcher.
 * Overrides OS dark preference so the page stays light.
 * ============================================================ */
:root[data-theme="light"] {
    --color-background: #ffffff;
    --color-surface:    #f5f5f5;
    --color-text:       #1a1a1a;
    --color-text-muted: #666666;
    --color-border:     #e5e5e5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}