/* Worthy Play web tokens (Direction C, Four Friends). Generated from
   S:\grokbot\artifacts\worthy-play-brand\final\tokens\palette.json. Do not hand-edit colours. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Display.woff") format("woff");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  /* Brand constants (never change between themes) */
  --wp-plum: #8B3A7F; --wp-teal: #117C71; --wp-apricot: #FF9F5A; --wp-rose: #F2677E;
  --wp-ink: #26182C; --wp-paper: #FBF6FA; --wp-night: #24132B;

  /* Light theme (default) */
  --wp-bg: #FBF6FA;
  --wp-surface: #FFFFFF;
  --wp-surface-2: #F1E4EF;
  --wp-text: #26182C;
  --wp-muted: #67566E;
  --wp-border: #E2D2DF;
  --wp-primary: #8B3A7F;
  --wp-secondary: #117C71;
  --wp-accent: #FF9F5A;      /* decoration only on light: never text, icons or focus */
  --wp-extra: #F2677E;       /* decoration only on light */
  --wp-focus: #117C71;
  --wp-success: #2E7D32;
  --wp-warning: #9A5B00;
  --wp-danger: #B42318;
  --wp-info: #0B6E80;
  --wp-on-primary: #FFFFFF;
  --wp-on-secondary: #FFFFFF;
  --wp-on-accent: #26182C;
  --wp-primary-text: #8B3A7F;
  --wp-secondary-text: #117C71;
  --wp-on-status: #FFFFFF;
  /* Web-only derived tints (checked: text on them is >= 4.5:1) */
  --wp-chip-soon-bg: #FFE7D6;  --wp-chip-soon-fg: #26182C;
  --wp-chip-live-bg: #2E7D32;  --wp-chip-live-fg: #FFFFFF;
  --wp-hero-wash-1: #FFE7D6; --wp-hero-wash-2: #F6DDF1; --wp-hero-wash-3: #D9F0EC;
  --wp-footer-bg: #24132B; --wp-footer-text: #FAF1F8; --wp-footer-muted: #D0C0D6;
  --wp-shadow-1: 0 1px 2px rgb(38 24 44 / .06), 0 2px 8px rgb(38 24 44 / .06);
  --wp-shadow-2: 0 4px 12px rgb(38 24 44 / .08), 0 16px 32px rgb(38 24 44 / .08);

  /* Type */
  --wp-font-display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --wp-font-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wp-display-axes: "opsz" 96;
  /* Fluid scale: min at 390 px, max at 1440 px */
  --wp-fs-hero:     clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40 -> 72 */
  --wp-lh-hero:     1.05;
  --wp-fs-display:  clamp(2rem, 1.6rem + 1.6vw, 3rem);       /* 32 -> 48 */
  --wp-lh-display:  1.15;
  --wp-fs-headline: clamp(1.5rem, 1.35rem + .6vw, 1.75rem);  /* 24 -> 28 */
  --wp-lh-headline: 1.25;
  --wp-fs-title:    1.375rem;  --wp-lh-title: 1.75rem;      /* 22/28 */
  --wp-fs-subtitle: 1.125rem;  --wp-lh-subtitle: 1.5rem;    /* 18/24 */
  --wp-fs-body:     clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 -> 19 */
  --wp-lh-body:     1.6;
  --wp-fs-label:    .9375rem;  --wp-lh-label: 1.25rem;      /* 15/20 */
  --wp-fs-caption:  .8125rem;  --wp-lh-caption: 1.125rem;   /* 13/18, grown-up meta only */

  /* Spacing (4 px grid) */
  --wp-space-2xs: 2px; --wp-space-xs: 4px; --wp-space-sm: 8px; --wp-space-md: 12px;
  --wp-space-lg: 16px; --wp-space-xl: 24px; --wp-space-2xl: 32px; --wp-space-3xl: 48px;
  --wp-space-4xl: 64px; --wp-space-5xl: 96px;
  --wp-section-y: clamp(56px, 4vw + 40px, 112px);
  --wp-gutter: clamp(20px, 3vw, 40px);
  --wp-container: 1200px;

  /* Radius */
  --wp-radius-xs: 4px; --wp-radius-sm: 8px; --wp-radius-md: 12px;
  --wp-radius-lg: 20px; --wp-radius-xl: 28px; --wp-radius-pill: 999px;
  --wp-radius-icon: 22.5%;   /* app-icon squircle approximation */

  /* Interaction */
  --wp-target-min: 48px;
  --wp-focus-width: 3px;
  --wp-focus-offset: 3px;
  --wp-ease: cubic-bezier(.2,.7,.2,1);
  --wp-dur: 180ms;
}

/* Dark theme: follows the OS unless the user picked a theme (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wp-bg: #24132B; --wp-surface: #271C2E; --wp-surface-2: #36273E;
    --wp-text: #FAF1F8; --wp-muted: #D0C0D6; --wp-border: #46354F;
    --wp-primary: #E7A0D9; --wp-secondary: #5ED3C1; --wp-accent: #FFB070; --wp-extra: #FF93A3;
    --wp-focus: #FFB070; --wp-success: #74D68A; --wp-warning: #F9B85A; --wp-danger: #FF8A80; --wp-info: #67D2E6;
    --wp-on-primary: #271C2E; --wp-on-secondary: #271C2E; --wp-on-accent: #271C2E;
    --wp-primary-text: #E7A0D9; --wp-secondary-text: #5ED3C1; --wp-on-status: #24132B;
    --wp-chip-soon-bg: #4A2F2A; --wp-chip-soon-fg: #FFD2AE;
    --wp-chip-live-bg: #74D68A; --wp-chip-live-fg: #24132B;
    --wp-hero-wash-1: #3A2232; --wp-hero-wash-2: #3A1F3B; --wp-hero-wash-3: #1E2F36;
    --wp-footer-bg: #1A0D20; --wp-footer-text: #FAF1F8; --wp-footer-muted: #D0C0D6;
    --wp-shadow-1: 0 1px 2px rgb(0 0 0 / .3); --wp-shadow-2: 0 8px 24px rgb(0 0 0 / .35);
  }
}
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --wp-bg: #24132B; --wp-surface: #271C2E; --wp-surface-2: #36273E;
  --wp-text: #FAF1F8; --wp-muted: #D0C0D6; --wp-border: #46354F;
  --wp-primary: #E7A0D9; --wp-secondary: #5ED3C1; --wp-accent: #FFB070; --wp-extra: #FF93A3;
  --wp-focus: #FFB070; --wp-success: #74D68A; --wp-warning: #F9B85A; --wp-danger: #FF8A80; --wp-info: #67D2E6;
  --wp-on-primary: #271C2E; --wp-on-secondary: #271C2E; --wp-on-accent: #271C2E;
  --wp-primary-text: #E7A0D9; --wp-secondary-text: #5ED3C1; --wp-on-status: #24132B;
  --wp-chip-soon-bg: #4A2F2A; --wp-chip-soon-fg: #FFD2AE;
  --wp-chip-live-bg: #74D68A; --wp-chip-live-fg: #24132B;
  --wp-hero-wash-1: #3A2232; --wp-hero-wash-2: #3A1F3B; --wp-hero-wash-3: #1E2F36;
  --wp-footer-bg: #1A0D20; --wp-footer-text: #FAF1F8; --wp-footer-muted: #D0C0D6;
  --wp-shadow-1: 0 1px 2px rgb(0 0 0 / .3); --wp-shadow-2: 0 8px 24px rgb(0 0 0 / .35);
}