/* tokens.css — DEFAULT values only. Single source of truth = config/design-system.json.
   js/design-system.js overrides these --ds-* custom properties at runtime.
   Do not hardcode colours/sizes elsewhere; always reference var(--ds-*). */
:root {
  /* colour */
  --ds-accent: #FAC200;
  --ds-accent-ink: #433400;
  --ds-on-accent: #000000;
  --ds-rail-bg: #1A1A1A;
  --ds-rail-ink: #FFFFFF;
  --ds-menu-bg: #FAC200;
  --ds-menu-ink: #000000;
  --ds-ink: #202E33;
  --ds-black: #000000;
  --ds-white: #FFFFFF;
  --ds-muted: #66717A;
  --ds-surface: #FFFFFF;
  --ds-surface-soft: #F1F6F9;
  --ds-surface-alt: #EEEEEE;
  --ds-border: #DEE2E5;
  --ds-map-blue: #00AEEF;
  --ds-route-blue: #9FC8EE;
  --ds-success: #3DBE7A;
  --ds-warning: #FAC200;
  --ds-error: #E5484D;
  --ds-info: #00AEEF;

  /* type */
  --ds-font-sans: Barlow, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-display: "Barlow Condensed", Barlow, system-ui, sans-serif;
  --ds-scale: 1;
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-heavy: 800;
  --ds-fs-page: calc(44px * var(--ds-scale));
  --ds-fs-section: calc(30px * var(--ds-scale));
  --ds-fs-card: calc(22px * var(--ds-scale));
  --ds-fs-body: calc(18px * var(--ds-scale));
  --ds-fs-meta: calc(15px * var(--ds-scale));
  --ds-fs-label: calc(14px * var(--ds-scale));
  --ds-fs-button: calc(18px * var(--ds-scale));
  --ds-fs-caption: calc(13px * var(--ds-scale));

  /* radius */
  --ds-radius-xs: 8px;
  --ds-radius-sm: 10px;
  --ds-radius-md: 24px;
  --ds-radius-lg: 32px;
  --ds-radius-pill: 999px;
  --ds-card-radius: 12px;      /* consistent corner for all interface cards */

  /* shadow */
  --ds-shadow-card: 0 3px 36px rgba(0,0,0,0.20);
  --ds-shadow-float: 0 8px 40px rgba(0,0,0,0.28);

  /* layout */
  --ds-margin: 28px;
  --ds-gap: 20px;
  --ds-topbar-h: 150px;
  --ds-alert-h: 56px;
  --ds-menu-h: 220px;
  --ds-rail-w: 134px;
  --ds-card-min-h: 300px;
  --ds-touch: 48px;
  --ds-card-gap: 14px;         /* spacing between cards */
  --ds-pill-scale: 1;          /* pills / tags size multiplier */
  --ds-btn-scale: 1;           /* action buttons size multiplier */
  --ds-menu-scale: 1;          /* home central menu buttons multiplier */
  --ds-rail-scale: 1;          /* lateral rail icons multiplier */
  --ds-grid-cols: 4;           /* columns in news/events listing grids */
  --ds-home-cols: 2;           /* columns in the home cards grid */
  --ds-search-scale: 1;        /* home search button size multiplier */
  --ds-home-title: 28px;       /* card title size on the home feed (bigger than module cards) */
  --ds-home-meta: 18px;        /* home card date/distance size */
  --ds-list-title: 22px;       /* card title size in module listings (news/events) */
  /* home buttons (locker/shop/photo) — set by design-system.js from the 3 modes */
  --ds-btn-locker-bg: rgba(0,0,0,.38); --ds-btn-locker-ink: #fff;
  --ds-btn-shop-bg: rgba(0,0,0,.38);   --ds-btn-shop-ink: #fff;
  --ds-btn-photo-bg: #000000;          --ds-btn-photo-ink: #fff;
  --ds-home-pill-scale: 1;     /* height of home vertical pills + left circles */

  /* kiosk */
  --ds-kiosk-w: 1080px;
  --ds-kiosk-h: 1920px;

  /* z-index scale */
  --z-base: 1; --z-cards: 10; --z-chrome: 100; --z-dropdown: 200;
  --z-sheet: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600;
}