/* ==========================================================================
   VestaSys CSS — 02 · Theme tokens
   --------------------------------------------------------------------------
   Layer 2 of 5. Every colour, radius, shadow and font in the framework comes
   from a custom property defined here. Nothing downstream hard-codes a colour.

   HOW THEMING WORKS
   -----------------
   A theme is selected with `data-theme="…"` on the <html> element, e.g.

       <html data-theme="dark">

   Three themes ship with the app and match the three the views already ask for:
     • light            — default business UI (also the fallback on :root)
     • dark             — same UI, dark surfaces
     • salmonevolution  — Salmon Evolution brand theme for kiosk/infoscreen

   WHY EVERY COLOUR IS DECLARED TWICE
   ----------------------------------
   Each colour exists as a ready-to-use value (`--vs-primary`) *and* as bare
   sRGB channels (`--vs-primary-rgb: 66 42 213`). The channel form is what makes
   the opacity-modifier utilities possible:

       .bg-primary\/10 { background-color: rgb(var(--vs-primary-rgb) / 0.10); }

   CSS cannot compute `#422ad5 at 10%` from a hex value, so the channels must be
   stored separately. When you change a colour, change BOTH lines — they are
   kept adjacent so it is hard to miss one.

   The `*-content` colours are the foreground to use *on top of* the matching
   surface (e.g. `--vs-primary-content` is the text colour on a primary button).
   ========================================================================== */


/* ==========================================================================
   Theme-independent tokens
   --------------------------------------------------------------------------
   Fonts, radii, shadows and the breakpoint reference. These do not change with
   the theme (except the radii, which salmonevolution softens — see below).
   ========================================================================== */
:root {
    /* -- Type stacks ---------------------------------------------------- */
    --vs-font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --vs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                    'Liberation Mono', 'Courier New', monospace;
    /* Display face for kiosk headings / the wordmark / the clock. */
    --vs-font-display: 'Montserrat', var(--vs-font-sans);

    /* -- Corner radii ---------------------------------------------------
       Three sizes, matching the roles the components use:
         selector — small pickable things (checkbox, toggle, badge, tab)
         field    — inputs, selects, textareas, buttons
         box      — cards, modals, dropdowns, alerts (`rounded-box` utility) */
    --vs-radius-selector: 0.5rem;
    --vs-radius-field: 0.5rem;
    --vs-radius-box: 0.75rem;

    /* -- Elevation ------------------------------------------------------ */
    --vs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --vs-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
    --vs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
    --vs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
    --vs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);

    /* -- Border defaults -------------------------------------------------
       The reset points every element's border-color at this, so a bare
       `border` utility produces a subtle theme-correct hairline. */
    --vs-border-default: rgb(var(--vs-base-content-rgb) / 0.18);

    /* -- Static colours --------------------------------------------------
       White and black never change with the theme, but the /alpha utilities
       (`bg-white/5`, `bg-black/40`) still need their channels. */
    --vs-white: #ffffff;
    --vs-white-rgb: 255 255 255;
    --vs-black: #000000;
    --vs-black-rgb: 0 0 0;
}


/* ==========================================================================
   Theme: light  (also the :root default, so a page with no data-theme works)
   ========================================================================== */
:root,
[data-theme='light'] {
    color-scheme: light;

    /* Surfaces, lightest → darkest. base-100 is the "card" surface, base-200
       the page background, base-300 the deepest divider/well. */
    --vs-base-100: #ffffff;
    --vs-base-100-rgb: 255 255 255;
    --vs-base-200: #f4f5f6;
    --vs-base-200-rgb: 244 245 246;
    --vs-base-300: #e5e7e9;
    --vs-base-300-rgb: 229 231 233;

    /* Foreground on the base surfaces. */
    --vs-base-content: #1c222b;
    --vs-base-content-rgb: 28 34 43;

    /* Brand */
    --vs-primary: #422ad5;
    --vs-primary-rgb: 66 42 213;
    --vs-primary-content: #ffffff;
    --vs-primary-content-rgb: 255 255 255;

    --vs-secondary: #e0348c;
    --vs-secondary-rgb: 224 52 140;
    --vs-secondary-content: #ffffff;
    --vs-secondary-content-rgb: 255 255 255;

    --vs-accent: #00a89a;
    --vs-accent-rgb: 0 168 154;
    --vs-accent-content: #ffffff;
    --vs-accent-content-rgb: 255 255 255;

    /* Neutral — the dark chip/avatar surface used in the top bar. */
    --vs-neutral: #2b3440;
    --vs-neutral-rgb: 43 52 64;
    --vs-neutral-content: #e8ebef;
    --vs-neutral-content-rgb: 232 235 239;

    /* Status */
    --vs-info: #0080b8;
    --vs-info-rgb: 0 128 184;
    --vs-info-content: #ffffff;
    --vs-info-content-rgb: 255 255 255;

    --vs-success: #14804a;
    --vs-success-rgb: 20 128 74;
    --vs-success-content: #ffffff;
    --vs-success-content-rgb: 255 255 255;

    --vs-warning: #a16207;
    --vs-warning-rgb: 161 98 7;
    --vs-warning-content: #ffffff;
    --vs-warning-content-rgb: 255 255 255;

    --vs-error: #c81e37;
    --vs-error-rgb: 200 30 55;
    --vs-error-content: #ffffff;
    --vs-error-content-rgb: 255 255 255;
}


/* ==========================================================================
   Theme: dark
   --------------------------------------------------------------------------
   Surfaces invert (base-100 becomes the *lightest* dark surface so cards still
   sit above the page), and the brand/status hues are lifted in lightness so
   they keep contrast against a dark background.
   ========================================================================== */
[data-theme='dark'] {
    color-scheme: dark;

    --vs-base-100: #1d232a;
    --vs-base-100-rgb: 29 35 42;
    --vs-base-200: #171c22;
    --vs-base-200-rgb: 23 28 34;
    --vs-base-300: #11161b;
    --vs-base-300-rgb: 17 22 27;

    --vs-base-content: #ced8e3;
    --vs-base-content-rgb: 206 216 227;

    --vs-primary: #7c7bff;
    --vs-primary-rgb: 124 123 255;
    --vs-primary-content: #10102e;
    --vs-primary-content-rgb: 16 16 46;

    --vs-secondary: #f472b6;
    --vs-secondary-rgb: 244 114 182;
    --vs-secondary-content: #2b0716;
    --vs-secondary-content-rgb: 43 7 22;

    --vs-accent: #2dd4bf;
    --vs-accent-rgb: 45 212 191;
    --vs-accent-content: #04231f;
    --vs-accent-content-rgb: 4 35 31;

    --vs-neutral: #2b3440;
    --vs-neutral-rgb: 43 52 64;
    --vs-neutral-content: #e8ebef;
    --vs-neutral-content-rgb: 232 235 239;

    --vs-info: #56ccf2;
    --vs-info-rgb: 86 204 242;
    --vs-info-content: #04202b;
    --vs-info-content-rgb: 4 32 43;

    --vs-success: #4ade80;
    --vs-success-rgb: 74 222 128;
    --vs-success-content: #052e16;
    --vs-success-content-rgb: 5 46 22;

    --vs-warning: #fbbf24;
    --vs-warning-rgb: 251 191 36;
    --vs-warning-content: #241a02;
    --vs-warning-content-rgb: 36 26 2;

    --vs-error: #f87171;
    --vs-error-rgb: 248 113 113;
    --vs-error-content: #2b0708;
    --vs-error-content-rgb: 43 7 8;
}


/* ==========================================================================
   Theme: salmonevolution
   --------------------------------------------------------------------------
   The Salmon Evolution brand theme used by the touch kiosk, the mobile
   check-in flow and the info screens: a deep-ocean background with the salmon
   orange as the primary accent. Hex values come straight from the brand site
   and are intentionally unchanged from the previous DaisyUI theme definition.
   ========================================================================== */
[data-theme='salmonevolution'] {
    color-scheme: dark;

    --vs-base-100: #0b1721;     /* main surface (deep ocean) */
    --vs-base-100-rgb: 11 23 33;
    --vs-base-200: #081119;
    --vs-base-200-rgb: 8 17 25;
    --vs-base-300: #050608;     /* darkest (page background) */
    --vs-base-300-rgb: 5 6 8;

    --vs-base-content: #dfe9ee;
    --vs-base-content-rgb: 223 233 238;

    --vs-primary: #f4651d;      /* salmon orange accent */
    --vs-primary-rgb: 244 101 29;
    --vs-primary-content: #ffffff;
    --vs-primary-content-rgb: 255 255 255;

    --vs-secondary: #ff9a56;    /* light copper */
    --vs-secondary-rgb: 255 154 86;
    --vs-secondary-content: #1a0d05;
    --vs-secondary-content-rgb: 26 13 5;

    --vs-accent: #14788c;       /* teal water */
    --vs-accent-rgb: 20 120 140;
    --vs-accent-content: #ffffff;
    --vs-accent-content-rgb: 255 255 255;

    --vs-neutral: #0b1c26;
    --vs-neutral-rgb: 11 28 38;
    --vs-neutral-content: #dfe9ee;
    --vs-neutral-content-rgb: 223 233 238;

    --vs-info: #7fd3e6;
    --vs-info-rgb: 127 211 230;
    --vs-info-content: #05121a;
    --vs-info-content-rgb: 5 18 26;

    --vs-success: #4ade80;
    --vs-success-rgb: 74 222 128;
    --vs-success-content: #05210f;
    --vs-success-content-rgb: 5 33 15;

    --vs-warning: #fbbf24;
    --vs-warning-rgb: 251 191 36;
    --vs-warning-content: #241a02;
    --vs-warning-content-rgb: 36 26 2;

    /* True red — alarms and errors must never read as the brand orange. */
    --vs-error: #ef4444;
    --vs-error-rgb: 239 68 68;
    --vs-error-content: #ffffff;
    --vs-error-content-rgb: 255 255 255;

    /* Softer, rounder geometry than the business UI. */
    --vs-radius-selector: 1rem;
    --vs-radius-field: 0.75rem;
    --vs-radius-box: 1rem;
}

/* Kiosk headings, the wordmark and the clock use the Montserrat display face.
   Font-family only — the markup's own weight/size utilities still win. */
[data-theme='salmonevolution'] :is(h1, h2, .kiosk-display) {
    font-family: var(--vs-font-display);
    letter-spacing: -0.01em;
}