/* Kaidolfest design tokens: single source of truth for the frontend.
   Values come from the design system (design:tokens/*). The Tailwind config in
   templates/layouts/frontend.php references these variables (kf-* colors).
   Colors are stored as RGB channels (--kf-*-rgb) so Tailwind opacity modifiers
   like bg-kf-teal/20 work; --kf-* is the ready-to-use color. */

:root {
    /* Markenfarben */
    --kf-teal-rgb: 127 212 207;       --kf-teal: rgb(var(--kf-teal-rgb)); /* #7FD4CF */
    --kf-teal-100-rgb: 221 245 243;   --kf-teal-100: rgb(var(--kf-teal-100-rgb)); /* #DDF5F3 */
    --kf-teal-300-rgb: 169 228 224;   --kf-teal-300: rgb(var(--kf-teal-300-rgb)); /* #A9E4E0 */
    --kf-teal-600-rgb: 31 148 140;    --kf-teal-600: rgb(var(--kf-teal-600-rgb)); /* #1F948C */
    --kf-teal-700-rgb: 21 112 105;    --kf-teal-700: rgb(var(--kf-teal-700-rgb)); /* #157069 */
    --kf-sakura-rgb: 235 164 181;     --kf-sakura: rgb(var(--kf-sakura-rgb)); /* #EBA4B5 */
    --kf-sakura-100-rgb: 252 230 236; --kf-sakura-100: rgb(var(--kf-sakura-100-rgb)); /* #FCE6EC */
    --kf-sakura-300-rgb: 244 196 208; --kf-sakura-300: rgb(var(--kf-sakura-300-rgb)); /* #F4C4D0 */
    --kf-sakura-600-rgb: 201 80 122;  --kf-sakura-600: rgb(var(--kf-sakura-600-rgb)); /* #C9507A */
    --kf-sakura-700-rgb: 158 58 94;   --kf-sakura-700: rgb(var(--kf-sakura-700-rgb)); /* #9E3A5E */
    --kf-star-rgb: 242 210 58;        --kf-star: rgb(var(--kf-star-rgb)); /* #F2D23A */
    --kf-star-100-rgb: 255 246 204;   --kf-star-100: rgb(var(--kf-star-100-rgb)); /* #FFF6CC */
    --kf-star-700-rgb: 122 98 0;      --kf-star-700: rgb(var(--kf-star-700-rgb)); /* #7A6200 */
    --kf-lilac-rgb: 200 182 238;      --kf-lilac: rgb(var(--kf-lilac-rgb)); /* #C8B6EE */
    --kf-lilac-100-rgb: 239 233 252;  --kf-lilac-100: rgb(var(--kf-lilac-100-rgb)); /* #EFE9FC */
    --kf-lilac-700-rgb: 101 80 168;   --kf-lilac-700: rgb(var(--kf-lilac-700-rgb)); /* #6550A8 */
    --kf-mint-rgb: 214 252 239;       --kf-mint: rgb(var(--kf-mint-rgb)); /* #D6FCEF */
    --kf-mint-50-rgb: 236 254 247;    --kf-mint-50: rgb(var(--kf-mint-50-rgb)); /* #ECFEF7 */
    /* Neutrale */
    --kf-ink-rgb: 58 53 80;           --kf-ink: rgb(var(--kf-ink-rgb)); /* #3A3550 */
    --kf-ink-2-rgb: 98 93 120;        --kf-ink-2: rgb(var(--kf-ink-2-rgb)); /* #625D78 */
    --kf-ink-3-rgb: 143 138 163;      --kf-ink-3: rgb(var(--kf-ink-3-rgb)); /* #8F8AA3 */
    --kf-line-rgb: 232 223 238;       --kf-line: rgb(var(--kf-line-rgb)); /* #E8DFEE */
    --kf-cloud-rgb: 245 239 247;      --kf-cloud: rgb(var(--kf-cloud-rgb)); /* #F5EFF7 */
    --kf-blush-rgb: 255 243 253;      --kf-blush: rgb(var(--kf-blush-rgb)); /* #FFF3FD */
    --kf-white-rgb: 255 255 255;      --kf-white: rgb(var(--kf-white-rgb)); /* #FFFFFF */

    /* Verläufe */
    --gradient-sky: linear-gradient(180deg, #D6FCEF 0%, #F5EFF7 48%, #FFF3FD 100%);
    --gradient-logo: linear-gradient(180deg, #A9F0E2 0%, #7FD4CF 55%, #55BFC0 100%);
    --gradient-candy: linear-gradient(135deg, #FCE6EC 0%, #EFE9FC 50%, #DDF5F3 100%);

    /* Semantik */
    --surface-page: var(--kf-cloud);
    --surface-sky: var(--gradient-sky);
    --surface-card: var(--kf-white);
    --surface-sunken: var(--kf-cloud);
    --surface-accent: var(--kf-teal);
    --surface-accent-strong: var(--kf-teal-600);
    --surface-pink: var(--kf-sakura-100);
    --surface-inverse: var(--kf-ink);
    --text-body: var(--kf-ink);
    --text-muted: var(--kf-ink-2);
    --text-subtle: var(--kf-ink-3);
    --text-inverse: var(--kf-white);
    --text-on-accent: var(--kf-white);
    --text-link: var(--kf-teal-700);
    --text-link-hover: var(--kf-sakura-600);
    --accent: var(--kf-teal-600);
    --accent-hover: var(--kf-teal-700);
    --accent-2: var(--kf-sakura-600);
    --border-soft: var(--kf-line);
    --focus-ring: rgba(31, 148, 140, .35);
    --success: var(--kf-teal-700);
    --warning: var(--kf-star-700);
    --danger: #C2415B;

    /* Programm-Kategorien: Fläche (-bg), Text (-fg), Akzent */
    --cat-showact-bg: var(--kf-teal-100);     --cat-showact-fg: var(--kf-teal-700);     --cat-showact: var(--kf-teal);
    --cat-workshop-bg: var(--kf-sakura-100);  --cat-workshop-fg: var(--kf-sakura-700);  --cat-workshop: var(--kf-sakura);
    --cat-panel-bg: var(--kf-star-100);       --cat-panel-fg: var(--kf-star-700);       --cat-panel: var(--kf-star);
    --cat-meet-bg: var(--kf-lilac-100);       --cat-meet-fg: var(--kf-lilac-700);       --cat-meet: var(--kf-lilac);
    --cat-party-bg: var(--kf-ink);            --cat-party-fg: var(--kf-white);          --cat-party: var(--kf-ink);
    --cat-sonstiges-bg: var(--kf-cloud);      --cat-sonstiges-fg: var(--kf-ink-2);      --cat-sonstiges: var(--kf-line);

    /* Typografie
       CJK fallback: Japanese subsets of M PLUS Rounded 1c are not self-hosted yet,
       so Japanese text uses rounded/gothic system fonts. */
    --font-display: "Fredoka", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
    --font-body: "M PLUS Rounded 1c", "Fredoka", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
    --font-numeric: "Fredoka", system-ui, sans-serif;
    --fs-hero: clamp(48px, 8vw, 104px);
    --fs-h1: clamp(36px, 4.6vw, 56px);
    --fs-h2: clamp(28px, 3.2vw, 38px);
    --fs-h3: 24px;
    --fs-h4: 19px;
    --fs-lead: 19px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-micro: 12px;
    --lh-tight: 1;
    --lh-heading: 1.15;
    --lh-body: 1.7;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;
    --tracking-display: 0;
    --tracking-eyebrow: 0.08em;

    /* Abstände */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --container: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
    --header-h: 76px;

    /* Radien und Linien */
    --r-xs: 6px;
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-xl: 40px;
    --r-pill: 999px;
    --bw: 2px;

    /* Schatten */
    --shadow-xs: 0 1px 2px rgba(58, 53, 80, .06);
    --shadow-soft: 0 6px 20px rgba(58, 53, 80, .07);
    --shadow-card: 0 2px 4px rgba(58, 53, 80, .04), 0 12px 32px rgba(127, 212, 207, .22);
    --shadow-card-hover: 0 4px 8px rgba(58, 53, 80, .05), 0 20px 44px rgba(235, 164, 181, .32);
    --shadow-candy-teal: 0 4px 0 var(--kf-teal-700);
    --shadow-candy-pink: 0 4px 0 var(--kf-sakura-700);
    --shadow-candy-white: 0 4px 0 var(--kf-line);

    /* Bewegung */
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 480ms;

    /* Muster und Glas */
    --pattern-dots: radial-gradient(rgba(255, 255, 255, .7) 2px, transparent 2.2px) 0 0 / 22px 22px;
    --pattern-dots-pink: radial-gradient(rgba(235, 164, 181, .35) 2px, transparent 2.2px) 0 0 / 22px 22px;
    --blur-glass: blur(14px);
    --surface-glass: rgba(255, 255, 255, .72);
}