/* =====================================================================
   Kåbdalis — SHARED DESIGN TOKENS  (single source of truth)
   Linked by both the main site (kabdalis2 theme) and Claude Design's
   Storybook. Edit palettes here once and every surface updates.

   data-sign attributes + inline --accent / --font-* / --radius vars
   are set per-page or per-screen (see customize panel).

   Imported by:
     - themes/kabdalis2/style.css (top of file)
     - Plugin enqueue:
         kabdalis-blocks-2-tokens handle
         kabdalis-checkout-2-tokens handle
   ===================================================================== */

[data-dir]{
  /* Tell the UA the page is light so native form UI (select dropdown lists,
     date pickers, scrollbars) doesn't follow a dark OS/browser theme — this
     is what made open <select> lists flash black on Windows dark mode. The
     dark-mode blocks at the bottom of this file override with
     color-scheme:dark, so opt-in dark keeps matching native UI. */
  color-scheme:light;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
  --accent:#9c3a52;
  /* Darker accent for hover/pressed fills — derived so it always tracks
     --accent (was an undefined token falling back to a raw hex in a block). */
  --accent-hover:color-mix(in srgb, var(--accent) 82%, #000);
  --on-accent:#fff;
  /* Legible text colour on a --pine surface (dark pine bands, active season
     tabs, pine panels). Single source so the ~3 blocks that need it stop
     hardcoding the same off-white. */
  --on-pine:#eaf2ec;
  --radius:16px; --radius-sm:10px;
  --eyebrow-font:var(--font-body);
  --eyebrow-tt:uppercase; --eyebrow-ls:.18em; --eyebrow-w:600;
  --band-pad: clamp(52px, 9vw, 104px);

  --ok:#2f7d52; --ok-bg:#e6f0ea;
  --no:#b8463b; --no-bg:#f5e6e3;
  --warn:#b07d27; --warn-bg:#f6edda;
  /* "Live/open now" indicator green — brighter than --ok (status), used by the
     pulsing live dots + the open-status dot. Single source so they never drift. */
  --live:#3f9d57;
  /* Faint inner divider (≈55% of --line) for rows inside cards, so they read
     quieter than the card's own outer hairline. */
  --line-soft:color-mix(in srgb, var(--line) 55%, transparent);

  /* Floating layers — modal/popover backdrop wash + elevation shadow.
     Direction-agnostic so every widget's overlay feels identical. */
  --overlay:color-mix(in srgb, var(--ink) 55%, transparent);
  --shadow-pop:0 30px 70px -20px rgba(12,18,26,.55);
  /* Small elevation — one step under --shadow, for interactive-card hover
     (e.g. .b-cta-grid__card:hover). Direction-agnostic, warm-leaning. */
  --shadow-sm:0 8px 20px -12px rgba(60,48,30,.28);

  /* v2 brand palette (Claude Design files2 / Kåbdalis2.html) —
     falu red for the logo flake + footer CTA, pine for the footer. */
  --falu:#9e4436; --falu-deep:#7d3429;
  --pine:#2e5d49; --pine-deep:#173228;
  /* Footer (norrsken treatment) — unified pine palette for all directions */
  --foot-bg:var(--pine-deep);
  --foot-ink:#dde5dd;
  --foot-blurb:#a7b5a8;
  --foot-muted:#8fa392;
  --foot-line:rgba(255,255,255,.12);
  --aurora-flake:#a9d4b8;

  /* Piste-classification colors — FIS standard slope grading.
     Direction-agnostic: an international piste-level convention, not brand. */
  --piste-green:#009640;
  --piste-blue:#009fe3;
  --piste-red:#e30613;
  --piste-black:#0b1115;
  --piste-offpiste:#6b6b6b;
}

[data-dir="warm"]{
  --bg:#f2efe9; --bg2:#e8e3da; --surface:#fffdf9; --surface2:#f5f1ea;
  --ink:#25211b; --ink-soft:#564e42; --muted:#756b5d; --line:#e4ded2;
  --font-display:'Source Serif 4', Georgia, serif;
  --display-w:540; --display-ls:-0.012em; --display-lh:1.06;
  --radius:18px; --radius-sm:12px;
  --shadow:0 18px 40px -24px rgba(60,48,30,.4);
  --news-bg:#ebe6dc;
}
[data-dir="crisp"]{
  --bg:#edf0f0; --bg2:#e1e6e6; --surface:#ffffff; --surface2:#f3f6f6;
  --ink:#1b2426; --ink-soft:#44545a; --muted:#647377; --line:#dbe2e2;
  --font-display:'Hanken Grotesk', system-ui, sans-serif;
  --display-w:700; --display-ls:-0.022em; --display-lh:1.04;
  --radius:14px; --radius-sm:9px;
  --shadow:0 20px 44px -26px rgba(30,45,50,.36);
  --news-bg:#e2e8e8;
}
[data-dir="minimal"]{
  --bg:#f6f5f1; --bg2:#efede7; --surface:#ffffff; --surface2:#faf9f6;
  --ink:#1a1813; --ink-soft:#4b463d; --muted:#7a735f; --line:#e7e3da;
  --font-display:'Hanken Grotesk', system-ui, sans-serif;
  --display-w:320; --display-ls:-0.02em; --display-lh:1.06;
  --radius:3px; --radius-sm:2px;
  --shadow:0 14px 36px -28px rgba(0,0,0,.3);
  --eyebrow-font:var(--font-mono); --eyebrow-tt:uppercase; --eyebrow-ls:.24em; --eyebrow-w:400;
  --news-bg:#eeece5;
}

/* =====================================================================
   --maxw + --hd-h are layout chrome, not design tokens. They live in
   :root (theme-wide) because they aren't direction-scoped.
   ===================================================================== */
:root{
  --maxw:1140px; --hd-h:64px; --ease:cubic-bezier(.22,.9,.3,1);
  /* Shared motion durations — keep interaction timing consistent across the
     system (pair with --ease). Convention: --t-fast for micro-interactions
     (hover/press/color), --t-med for cards/panels, --t-slow for ambient/entrance.
     New rules should reference these instead of ad-hoc magic numbers. */
  --t-fast:.16s; --t-med:.26s; --t-slow:.5s;
  /* Shared easings — the two curves the theme reuses everywhere. --ease-out is
     the soft decelerate used by card/image/transform transitions; --ease-spring
     the slightly springier curve used by popovers/toggles. */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);
  /* Soft accent focus ring shared by all themed text inputs (the box-shadow
     companion to the :focus-visible outline). One definition keeps every field
     focusing identically. */
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  /* Block padding scale — direction-agnostic so cards and sections feel
     consistent across all three direction palettes.
     --card-pad:  Pattern A card widgets (weather, lifts, opening-hours, etc.).
     --band-pad:  Pattern B section blocks (intro-story, feature-split, family-story).
                  Already declared in [data-dir] above; this :root entry is
                  the inline-axis companion. */
  --card-pad:20px;
  --band-pad-x: clamp(16px, 3vw, 32px);
}

[data-dir="minimal"]{ --band-pad: clamp(64px, 11vw, 132px); }

/* Density variants (set by Customize · Spacing) — direction-agnostic
   overrides of --band-pad. Kept here next to the rest of the spacing
   tokens so the entire token surface lives in one file. */
[data-density="cozy"]{ --band-pad: clamp(30px, 5vw, 58px); }
[data-density="compact"]{ --band-pad: clamp(22px, 3.4vw, 42px); }

/* =====================================================================
   DARK MODE — opt-in. functions.php sets data-color-scheme on <body> from
   Customize → Designspråk → "Färgschema" (light = off [default] / auto =
   follow the OS / dark = always). The neutral palette below overrides the
   direction tokens (same specificity, declared later so it wins) regardless
   of warm/crisp/minimal; the accent + footer keep the brand. A warm-leaning
   dark keeps the resort's cosy feel rather than going cold-grey.
   ===================================================================== */
[data-color-scheme="dark"]{
  --bg:#17140f; --bg2:#1f1b15; --surface:#221d17; --surface2:#2a241c;
  --ink:#f1ece2; --ink-soft:#ccc4b6; --muted:#9c9485; --line:#352e25;
  --shadow:0 18px 40px -24px rgba(0,0,0,.6);
  --news-bg:#1c1813;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  [data-color-scheme="auto"]{
    --bg:#17140f; --bg2:#1f1b15; --surface:#221d17; --surface2:#2a241c;
    --ink:#f1ece2; --ink-soft:#ccc4b6; --muted:#9c9485; --line:#352e25;
    --shadow:0 18px 40px -24px rgba(0,0,0,.6);
    --news-bg:#1c1813;
    color-scheme:dark;
  }
}