/* ==========================================================================
   Kärntner Spieletage — design tokens
   Single source of truth for colour, type, spacing and the ink look.
   Change values here, never hard-code them in components.css.
   ========================================================================== */

:root {
  /* --- Brand colours (taken from the logo) -------------------------------- */
  --kst-red:            #E4265C;  /* logo red. Areas, buttons, accents */
  --kst-red-deep:       #C81C4C;  /* red for text on light ground (AA from 16px) */
  --kst-red-light:      #FDE8EE;  /* soft red area, badges, hover surfaces */
  --kst-yellow:         #FAE81C;  /* logo yellow. NEVER for text on white */
  --kst-yellow-deep:    #E3CF00;  /* yellow edge, hover on yellow surfaces */
  --kst-yellow-light:   #FFFBD4;  /* soft yellow area */
  --kst-yellow-bright:  #FFF06B;  /* yellow on a dark photo — brighter than
                                     --kst-yellow so it still carries in the
                                     hero title above the veil */
  --kst-ink:            #16140F;  /* logo black. Text, borders, strokes */
  --kst-ink-deep:       #000000;  /* only as a hover edge on ink */
  --kst-ink-80:         #3A3529;
  --kst-grey:           #6B6455;  /* secondary text on paper */
  --kst-grey-light:     #8A8272;  /* labels, meta, overlines */
  --kst-paper:          #FFFDF7;  /* main ground, warm white */
  --kst-paper-2:        #F4F0E4;  /* set-off section */
  --kst-line:           #E3DDCC;  /* faint rule (not an ink stroke) */
  --kst-white:          #FFFFFF;
  /* The extruded depth under "Spieletage" in the wordmark, as in the club
     logo: red sunk into ink. Only there. */
  --kst-wordmark-depth: color-mix(in oklch, var(--kst-red) 30%, var(--kst-ink));

  /* The same two colours as channels, for anything see-through:
     rgb(var(--kst-ink-rgb) / 0.42). Without these the components file
     ends up spelling out rgba(22,20,15,…) over and over. */
  --kst-ink-rgb:        22 20 15;
  --kst-paper-rgb:      255 253 247;
  --kst-paper-2-rgb:    244 240 228;  /* = --kst-paper-2 */
  /* A near-black that is NOT the brand ink: backdrops behind a photo or
     under the lightbox, where ink would read as a colour rather than as
     darkness. One value for all of them. */
  --kst-scrim-rgb:      12 11 9;

  /* Semantic */
  --kst-bg:             var(--kst-paper);
  --kst-bg-alt:         var(--kst-paper-2);
  --kst-bg-inverse:     var(--kst-ink);
  --kst-text:           var(--kst-ink);
  --kst-text-muted:     var(--kst-grey);
  --kst-text-inverse:   var(--kst-paper);
  --kst-link:           var(--kst-red-deep);
  --kst-link-hover:     var(--kst-ink);
  --kst-focus:          #0B63D6;  /* focus ring, deliberately off-brand */

  /* --- Typography --------------------------------------------------------- */
  --kst-font-display: "Archivo Black", "Bricolage Grotesque", system-ui, sans-serif;
  --kst-font-head:    "Bricolage Grotesque", system-ui, sans-serif;
  --kst-font-text:    "Work Sans", system-ui, -apple-system, sans-serif;
  --kst-font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* The lettering of the club logo. ONLY for the header wordmark — never for
     headings or running text. */
  --kst-font-wordmark: "Lobster", "Brush Script MT", cursive;

  /* Fluid type sizes: clamp(min, preferred, max) */
  --kst-fs-hero:   clamp(2.75rem, 1.6rem + 5.6vw, 7rem);     /* 44 → 112 px */
  --kst-fs-h1:     clamp(2rem,    1.4rem + 2.8vw, 3.75rem);  /* 32 → 60 px  */
  --kst-fs-h2:     clamp(1.6rem,  1.25rem + 1.6vw, 2.5rem);  /* 26 → 40 px  */
  --kst-fs-h3:     clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20 → 26 px  */
  --kst-fs-lead:   clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --kst-fs-body:   1.0625rem;   /* 17 px — body copy */
  --kst-fs-small:  0.9375rem;   /* 15 px */
  --kst-fs-mini:   0.8125rem;   /* 13 px — meta, never for running text */
  --kst-fs-label:  0.75rem;     /* 12 px — overlines, always caps + tracking */

  /* Big numbers: card figures, facts row. One style for all of them. */
  --kst-fs-number: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  /* Two fixed steps. Everything above scales with the viewport; these must
     not — digits that grow make a countdown jump, and the price column has
     to line up with the rest of the table. */
  --kst-fs-digits: 1.625rem;    /* 26 px — countdown */
  --kst-fs-figure: 1.25rem;     /* 20 px — price, lightbox glyphs */
  /* The header wordmark is a logo: fixed sizes per breakpoint, not fluid.
     Together with the date stamp and the press dog-ear below, the only font
     sizes that do not scale. "name" is "Spieletage", "region" the
     "Kärntner" above it. */
  --kst-fs-wordmark-xs:         29px;  /* below 380px: logo, burger, dog-ear */
  --kst-fs-wordmark-sm:         34px;
  --kst-fs-wordmark-md:         46px;
  --kst-fs-wordmark-lg:         62px;
  --kst-fs-wordmark-compact-sm: 24px;
  --kst-fs-wordmark-compact:    29px;
  --kst-fs-wordmark-compact-lg: 38px;
  --kst-fs-wordmark-region-xs:  15px;
  --kst-fs-wordmark-region-sm:  17px;
  --kst-fs-wordmark-region-md:  22px;
  --kst-fs-wordmark-region-lg:  28px;
  --kst-fs-wordmark-region-compact:    14px;
  --kst-fs-wordmark-region-compact-lg: 18px;
  /* The header's date stamp sits next to the wordmark and is sized with it. */
  --kst-fs-stamp-days-sm:  34px;
  --kst-fs-stamp-days-md:  42px;
  --kst-fs-stamp-days-lg:  52px;
  --kst-fs-stamp-month-sm: 13px;
  --kst-fs-stamp-month-md: 15px;
  --kst-fs-stamp-month-lg: 17px;
  /* The press dog-ear: text inside a triangle of fixed size, so fixed sizes
     too — fluid ones would break out of the fold. The third exception. */
  --kst-fs-dogear-tab-sm:      8.5px;
  --kst-fs-dogear-tab:         10.5px;
  --kst-fs-dogear-kicker:      11px;
  --kst-fs-dogear-headline-sm: 17px;
  --kst-fs-dogear-headline-md: 20px;
  --kst-fs-dogear-headline-lg: 21px;
  --kst-fs-dogear-link:        14px;
  /* The newspaper printed on the flap's back — texture, not reading text */
  --kst-fs-dogear-print:          11px;
  --kst-fs-dogear-print-title:    15px;
  --kst-fs-dogear-print-masthead: 15px;

  --kst-lh-tight:  0.94;
  --kst-lh-head:   1.12;
  --kst-lh-text:   1.62;
  --kst-ls-tight:  -0.02em;
  --kst-ls-wide:   0.14em;      /* overlines — the widest tracking */
  --kst-ls-caps:   0.1em;       /* every other uppercase label */

  /* --- Spacing (4 px grid) ------------------------------------------------ */
  --kst-s-1: 0.25rem;  --kst-s-2: 0.5rem;   --kst-s-3: 0.75rem;
  --kst-s-4: 1rem;     --kst-s-5: 1.5rem;   --kst-s-6: 2rem;
  --kst-s-7: 3rem;     --kst-s-8: 4rem;     --kst-s-9: 6rem;
  --kst-s-10: 8rem;
  --kst-section:  clamp(3rem, 2rem + 4vw, 6.5rem);  /* vertical section rhythm */
  --kst-gutter:   clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --kst-max:      1240px;   /* content width */
  --kst-max-text: 68ch;     /* reading width for running text */
  --kst-max-lead: 88ch;     /* the one subtitle line under a heading —
                               wider than body copy, because the content
                               below it spans the full --kst-max */

  /* --- Ink look (the logo's handwriting) ---------------------------------- */
  --kst-stroke:       3px;        /* default stroke weight */
  --kst-stroke-fine:  2px;
  --kst-stroke-thick: 4px;
  --kst-stroke-hair:  1px;        /* not an ink stroke — a faint rule */
  --kst-border:       var(--kst-stroke) solid var(--kst-ink);
  --kst-border-fine:  var(--kst-stroke-fine) solid var(--kst-ink);
  --kst-hairline:     var(--kst-stroke-hair) solid var(--kst-line);
  /* Irregular "drawn" corners. Three variants so nothing repeats. */
  --kst-corner-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --kst-corner-b: 15px 225px 15px 255px / 225px 15px 255px 15px;
  --kst-corner-c: 200px 25px 180px 30px / 25px 190px 20px 210px;
  --kst-corner-pill: 40px 120px 40px 120px / 120px 40px 120px 40px;
  /* Slight tilts. Always sparing, never beyond 1.5deg. */
  --kst-tilt-a: -0.7deg;
  --kst-tilt-b:  0.5deg;
  --kst-tilt-c: -1.2deg;
  /* Hover factor for tilts that turn the other way on hover (the letters of
     the wordmark). 1 under reduced motion, so nothing moves there. */
  --kst-hover-flip: -1;
  /* Whether the press dog-ear lifts every few seconds to be noticed (by
     12px, set in components.css). 0 under reduced motion: it stays still. */
  --kst-dogear-nudge: 1;
  /* Hard offset shadow instead of a blur — it matches the ink stroke. */
  --kst-shadow:      6px 6px 0 var(--kst-ink);
  --kst-shadow-soft: 8px 8px 0 rgb(var(--kst-ink-rgb) / 0.12);
  --kst-shadow-red:  6px 6px 0 var(--kst-red);

  /* --- Hall plan ---------------------------------------------------------
     Inside the floor plans' SVG, in the drawing's own units: 1200 of them
     across the venue. They scale with the drawing, which never gets
     narrower than --kst-hallplan-min — below that it scrolls. At that
     width a label of 26 units reads as about 16 px. */
  --kst-hallplan-min:        760px;
  --kst-hallplan-label:      26px;
  --kst-hallplan-note:       19px;
  --kst-hallplan-logo:       44px;
  --kst-hallplan-logo-text:  15px;

  /* --- Motion ------------------------------------------------------------- */
  --kst-time-fast: 140ms;
  --kst-time:      260ms;
  --kst-time-long: 420ms;
  /* One pass of a banner across a feed card, there and back. Kept under
     five seconds: longer, and moving content needs a way to pause it. */
  --kst-time-pan:  4500ms;
  --kst-ease:      cubic-bezier(0.22, 1, 0.36, 1);      /* soft roll-out */
  --kst-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */
  /* The seconds in the countdown are the only thing on the page that keeps
     moving for good. The reduced-motion block below drops the field; the
     clock then stands still to the minute. */
  --kst-countdown-seconds: block;

  /* --- Editorial marker (temporary) ---------------------------------------
     REMOVE BEFORE LAUNCH — belongs to .kst-todo in components.css and marks
     the spots that still need copy. Sits here so the reduced-motion block
     below can switch it off without its own media query. */
  --kst-todo-blink: kst-todo-blink 1.1s steps(1) infinite;
  --kst-todo-bg:    var(--kst-yellow);
  --kst-todo-ink:   var(--kst-ink);

  /* --- Layers ------------------------------------------------------------- */
  --kst-z-sticky:   100;
  --kst-z-nav:      200;
  --kst-z-overlay:  300;
  --kst-z-lightbox: 400;
}

/* Dark section: switch the tokens rather than overriding colours. */
.kst-inverse {
  --kst-bg: var(--kst-ink);
  --kst-bg-alt: #201D16;
  --kst-text: var(--kst-paper);
  --kst-text-muted: rgb(var(--kst-paper-rgb) / 0.72);
  --kst-link: var(--kst-yellow);
  --kst-link-hover: var(--kst-white);
  --kst-line: rgb(var(--kst-paper-rgb) / 0.18);
  --kst-border: var(--kst-stroke) solid var(--kst-paper);
  --kst-shadow: 6px 6px 0 var(--kst-yellow);
  background: var(--kst-bg);
  color: var(--kst-text);
}

/* Reduced motion: no tilts, transitions short enough not to matter, and no
   seconds ticking away in the countdown. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kst-time-fast: 1ms;
    --kst-time: 1ms;
    --kst-time-long: 1ms;
    --kst-time-pan: 1ms;
    --kst-tilt-a: 0deg;
    --kst-tilt-b: 0deg;
    --kst-tilt-c: 0deg;
    --kst-hover-flip: 1;
    --kst-dogear-nudge: 0;
    --kst-countdown-seconds: none;
    /* REMOVE BEFORE LAUNCH — without the blink the marker turns red, so it
       stays just as hard to miss. */
    --kst-todo-blink: none;
    --kst-todo-bg:    var(--kst-red);
    --kst-todo-ink:   var(--kst-paper);
  }
}