/* ============================================================================
   GUIDO - theme tokens
   ----------------------------------------------------------------------------
   The yearly restyle happens in BLOCK 1 and nowhere else.

   Block 1  PALETTE     raw named colours. Change these once a year.
   Block 2  ROLES       what each colour is FOR. Components only use these.
   Block 3  SHAPE       radii, shadows, fonts. Also fair game for a restyle.
   Block 4  LEGACY      re-points the old style.css variables at the new
                        tokens, so existing pages follow the theme too.
   Block 5  SEASONS     an example of swapping the whole palette at runtime.

   Load order in Site.Master (theme.css MUST come after style.css so its
   :root block wins the cascade):

       <link rel="stylesheet" href="Assets/style.css?v=..." />
       <link rel="stylesheet" href="Assets/theme.css?v=..." />
       <link rel="stylesheet" href="Assets/home.css?v=..." />

   Rule of thumb: a component stylesheet should never contain a hex code.
   If you need a colour that is not in Block 2, add a role here first.
   ============================================================================ */


/* ============================================================================
   BLOCK 1 - PALETTE
   Raw colours with neutral names. Nothing here says what the colour is used
   for, so next year's designer can hand you a new set without touching
   anything else in the codebase.
   ============================================================================ */
:root {
    /* GUIDO blauw (2026-restyle; namen --gg-rose-* bewust ongewijzigd) */
    --gg-rose-050: #e4f4ff;
    --gg-rose-500: #0079af;
    --gg-rose-700: #005b85;

    /* donkergroenblauw */
    --gg-teal-050: #eef3f3;
    --gg-teal-600: #004d72;

    /* accent geel, gebruikt voor het voordeel-label */
    --gg-yellow-400: #ffd600;
    --gg-yellow-900: #4a3c00;

    /* amber, alleen voor de voucher-badge op de kaartspelden */
    --gg-amber-400: #ffc107;
    --gg-amber-900: #333333;

    /* neutralen */
    --gg-white: #ffffff;
    --gg-paper: #f4f9fd;
    --gg-sand-200: #e0e4e7;
    --gg-sand-300: #cbd1d4;
    --gg-stone-100: #eceae7;
    --gg-stone-600: #5c5a55;
    --gg-grey-500: #6b7b84;
    --gg-ink: #102022;

    /* rood voor foutmeldingen. Niet de merkkleur: die is ook rood, en een
       veldfout mag niet lijken op een merkelement. */
    --gg-red-600: #b3261e;

    /* groen, uitsluitend voor "het is gelukt". Geen merkkleur, dus apart
       gehouden: als het merk volgend jaar rood wordt, moet gelukt groen
       blijven. */
    --gg-green-600: #2e7d4f;

    /* Google's eigen blauw voor de "jouw locatie" stip. Niet van ons merk,
       dus bewust apart gehouden van de rest van het palet. */
    --gg-geo-blue: #4285f4;
}


/* ============================================================================
   BLOCK 2 - ROLES
   Everything the components actually reference. Renaming a role is a
   codebase-wide change, so keep this list short and stable.
   ============================================================================ */
:root {
    /* merk */
    --color-brand: var(--gg-rose-500);
    --color-brand-strong: var(--gg-rose-700);
    --color-brand-tint: var(--gg-rose-050);

    /* halftransparant merk, voor de cluster-ring op de kaart.
       De eerste regel is de fallback voor oudere browsers, de tweede
       leidt de kleur automatisch af zodra je het palet wijzigt. */
    --color-brand-veil: rgba(0, 121, 175, .2);
    --color-brand-veil: color-mix(in srgb, var(--color-brand) 20%, transparent);

    /* accent: alleen voor het voordeel, nooit decoratief */
    --color-accent: var(--gg-yellow-400);
    --color-accent-ink: var(--gg-yellow-900);

    /* structuur: kopjes, sectielabels, kaartknoppen */
    --color-structure: var(--gg-teal-600);
    --color-structure-tint: var(--gg-teal-050);

    /* vlakken */
    --surface-page: var(--gg-paper);
    --surface-card: var(--gg-white);
    --surface-muted: var(--gg-stone-100);

    /* De ponsgaten in de bonkaart zijn cirkels in de paginakleur. Dit moet
       dus altijd gelijk zijn aan --surface-page, anders vallen ze op. */
    --surface-notch: var(--surface-page);

    /* tekst */
    --text-primary: var(--gg-ink);
    --text-muted: var(--gg-grey-500);
    --text-on-brand: var(--gg-white);
    --text-on-accent: var(--gg-yellow-900);
    --text-on-muted: var(--gg-stone-600);

    /* lijnen */
    --border-subtle: var(--gg-sand-200);
    --border-perforation: var(--gg-sand-300);

    /* geslaagde actie */
    --color-ok: var(--gg-green-600);

    /* mislukte invoer */
    --color-error: var(--gg-red-600);

    /* de melkwitte laag onder de GEBRUIKT-stempel */
    --stamp-veil: rgba(255, 255, 255, .86);
    --stamp-veil: color-mix(in srgb, var(--surface-card) 86%, transparent);

    /* kaart */
    --map-pin: var(--color-brand);
    --map-pin-stroke: var(--gg-white);
    --map-cluster: var(--color-brand);
    --map-cluster-ring: var(--color-brand-veil);
    --map-voucher-badge: var(--gg-amber-400);
    --map-voucher-badge-ink: var(--gg-amber-900);
    --map-user-dot: var(--gg-geo-blue);
}


/* ============================================================================
   BLOCK 3 - SHAPE
   A restyle is rarely only colour. Rounding, shadow and type live here so a
   new season can go from soft to sharp without editing components.
   ============================================================================ */
:root {
    --radius-card: 18px;
    --radius-card-sm: 16px;
    --radius-tile: 16px;
    --radius-pill: 999px;
    --radius-chip: 0px; /* vierkante chips dit seizoen; zet op 999px voor pillen */

    --shadow-card: 0 1px 2px rgba(16, 32, 34, .04);
    --shadow-float: 0 6px 20px rgba(16, 32, 34, .22);

    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Voor cijfercodes: in een monospace staan de zes cijfers even breed, en
       zijn 0 en O, 1 en l van elkaar te onderscheiden. */
    --font-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* de ponsgat-diameter van de bonkaart */
    --notch-size: 14px;

    /* Hoogte van de header in Site.Master: 44px stadspill + 2x10px padding
       + 1px rand. Alles wat onder de header moet blijven plakken rekent
       hiermee. Het scriptje in Site.Master meet de echte hoogte en
       overschrijft deze waarde, zodat de offset niet stilletjes verkeerd
       staat als de header ooit verandert. */
    --header-h: 65px;

    /* stapeling. De city-panel in Site.Master zit op 9999 en blijft dus
       altijd bovenaan. Inhoud in style.css gaat niet hoger dan 10. */
    --z-header: 40;
    --z-sticky: 30;

    /* Beeldverhouding van al het aangeleverde beeld: bonnen én zaken. De
       importer levert 6483x2892 en 1556x694, allebei 2,242:1, met 0,017%
       verschil door afronding bij het exporteren. Eén verhouding voor alles,
       dus wordt er met object-fit: cover nooit iets weggesneden.

       Drie vormen van dezelfde waarde, pas ze samen aan:
         --media-ratio      voor aspect-ratio
         --media-ratio-pct  terugval voor browsers zonder aspect-ratio
                            (694 / 1556 = 44,6%)
         --media-ratio-num  om breedtes uit te rekenen met calc() */
    --media-ratio: 1556 / 694;
    --media-ratio-pct: 44.6%;
    --media-ratio-num: 2.242;

    /* De oude namen blijven werken, zodat home.css, components.css,
       vouchers.css en usevoucher.css niet aangepast hoeven te worden.
       Nieuwe stylesheets gebruiken --media-ratio. */
    --bon-ratio: var(--media-ratio);
    --bon-ratio-pct: var(--media-ratio-pct);

    --bon-ratio-num: var(--media-ratio-num);

    /* Hoogte van een rij in het bonnenoverzicht. De breedte van het beeld
       volgt hieruit: 86px x 2,242 = 193px. Kleiner maken geeft de tekst meer
       ruimte, groter maken geeft het beeld meer ruimte. */
    --bon-row-h: 86px;
}


/* ============================================================================
   BLOCK 4 - LEGACY BRIDGE
   style.css already declares its own :root variables. Because this file loads
   after it, these declarations win, which means the ~1700 lines of existing
   CSS follow the theme without being touched.

   Let op: --brand stond op #b4515d en wordt nu #0079af. Dat was al de kleur
   van de theme-color meta, de kaartspelden, de clusters en 8 plaatsen in
   style.css, dus dit maakt de twee roodtinten gelijk. Wil je juist de andere
   kant op, zet dan --gg-rose-500 op #b4515d in Block 1.
   ============================================================================ */
:root {
    --brand: var(--color-brand);
    --brand-dark: var(--color-brand-strong);
    --teal: var(--color-structure);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --chip: var(--surface-card);
    --chip-b: var(--color-structure);
    --chip-bg: var(--color-structure-tint);
    --border-light: var(--border-subtle);
    --bg-light: var(--color-structure-tint);
    --pin-yellow: var(--color-accent);
    --white: var(--gg-white);
}


/* ============================================================================
   BLOCK 5 - SEASONS
   Zet het seizoen op de body en het hele palet wisselt:

       <body data-theme='<%= ThemeSeason %>'>

   met in Site.master.cs:

       public string ThemeSeason
       {
           get { return ConfigurationManager.AppSettings["ThemeSeason"] ?? ""; }
       }

   en in Web.config:

       <add key="ThemeSeason" value="" />

   Zo wissel je van look via een config-waarde, zonder deploy. Alleen Block 1
   overschrijven is genoeg: de rollen in Block 2 verwijzen naar het palet.
   ============================================================================ */

/* Voorbeeld. Uncomment en zet ThemeSeason op "winter" om te testen.

[data-theme="winter"] {
    --gg-rose-050: #eceff4;
    --gg-rose-500: #3f5b76;
    --gg-rose-700: #26384a;
    --gg-teal-600: #1b3a4b;
    --gg-yellow-400: #e8b64c;
    --gg-yellow-900: #3d2f0a;
    --gg-paper: #f7f8fa;
}

*/