/* Live Play tokens: shared metrics and semantics, two brand palettes, soft/high. */
@layer d2.tokens {
  /* S1B.2: preserve the existing self-picker palette on both brands and contrast modes. */
  :root {
    --d2-me-surface: white;
    --d2-me-selected: #24672a;
    --d2-me-on-selected: white;
  }

  /* Brand palette: only semantic tokens and illustrations read it. */
  [data-brand="dink2"] {
    --d2-brand-navy: #142657;
    --d2-brand-royal: #1649B7;
    --d2-brand-royal-2: #2F6BDB;
    --d2-brand-coral: #D33E58;
    --d2-brand-coral-deep: #C93855;
    --d2-brand-coral-deco: #FF7279;
    /* G5-1: ".me" in the wordmark — 3:1 on the page background (25px/800 is large text); deco stays for art. */
    --d2-brand-coral-mark: #E0475F;
    --d2-brand-peach: #FFE0D2; --d2-brand-peach-2: #FFF1EA; --d2-brand-peach-blob: #FFD3BF;
    --d2-brand-sky-1: #E9F3FF; --d2-brand-sky-2: #D6E8FF;
    --d2-brand-ball: #FFD84D; --d2-brand-ball-dot: #E0B21F;
  }

  /* Social Reference (default, data-d2-contrast="soft"). */
  [data-brand] {
    color-scheme: light;
    --d2-bg: #F6F9FE;
    --d2-surface: #FFFFFF;
    --d2-surface-soft: #E4F0FF;
    --d2-surface-sunken: #EEF5FF;
    --d2-hero-bg: linear-gradient(165deg, var(--d2-brand-sky-1), var(--d2-brand-sky-2));
    --d2-hero-alt-bg: linear-gradient(165deg, var(--d2-brand-peach-2), #FFE9DF);
    --d2-scrim: rgba(20, 38, 87, .45);
    --d2-text: var(--d2-brand-navy);
    --d2-text-2: #3E4F6E;
    --d2-text-muted: #5A6C88;
    --d2-text-link: var(--d2-brand-royal);
    --d2-text-on-fill: #FFFFFF;
    --d2-hero-ink: var(--d2-text); --d2-hero-num: var(--d2-brand-royal); --d2-hero-sub: var(--d2-text-2);
    --d2-hero-num-shadow: var(--d2-brand-peach-blob);
    --d2-hero-art: var(--d2-brand-royal-2); --d2-hero-art-line: rgba(255, 255, 255, .85);
    --d2-hero-blob: var(--d2-brand-coral-deco);
    --d2-border-hair: rgba(22, 73, 183, .08);
    --d2-border-line: #E2EAF5;
    --d2-border-control: #7D8DA8;
    --d2-border-w: 1px; --d2-border-control-w: 2px;
    --d2-action-primary-bg: linear-gradient(180deg, var(--d2-brand-coral), var(--d2-brand-coral-deep));
    --d2-action-primary-pressed: #B02B43;
    --d2-action-repair-bg: var(--d2-brand-royal);
    --d2-action-repair-pressed: #1243A8;
    --d2-action-quiet-fg: var(--d2-brand-royal);
    --d2-action-danger: #A3283D;
    --d2-action-danger-pressed: #8E1F33;
    /* Unavailable: one neutral fill for both brands and both modes, unlike any enabled action. */
    --d2-action-disabled-bg: #E3E6EA; --d2-action-disabled-fg: #4C5563;
    --d2-saved-fg: #0F7A55;   --d2-saved-bg: #E2F5EC;     --d2-saved-line: #0F7A55;
    --d2-pending-fg: #8A4B00; --d2-pending-strong: #5C3300; --d2-pending-bg: #FFEBD6; --d2-pending-line: #C77A1F;
    --d2-error-fg: #8E1F33;   --d2-error-strong: #6E1626;   --d2-error-bg: #FDECEE;   --d2-error-hair: #F3C3CB;
    --d2-error-line: #A3283D;
    --d2-info-fg: var(--d2-brand-royal); --d2-info-bg: var(--d2-surface-soft);
    --d2-finished-fg: #FFFFFF; --d2-finished-bg: var(--d2-brand-navy);
    --d2-focus: var(--d2-brand-royal); --d2-focus-on-fill: #FFFFFF; --d2-focus-w: 3px; --d2-focus-offset: 3px;
    --d2-av-1-bg: #DCEBFF; --d2-av-1-fg: #1649B7;
    --d2-av-2-bg: #FFE0D2; --d2-av-2-fg: #9C2C3D;
    --d2-av-3-bg: #FFEFC2; --d2-av-3-fg: #6E4A00;
    --d2-av-4-bg: #E3E6FF; --d2-av-4-fg: #33409E;
    --d2-av-5-bg: #D9F2EC; --d2-av-5-fg: #0B5E47;
    --d2-av-me-bg: linear-gradient(150deg, #F0606E, var(--d2-brand-coral)); --d2-av-me-fg: #FFFFFF;

    --d2-font-display: "Nunito Sans", "Avenir Next", "Nunito Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --d2-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --d2-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --d2-w-black: 800; --d2-w-bold: 700; --d2-w-semi: 600; --d2-w-medium: 500; --d2-w-regular: 400;
    --d2-fs-numeral: 72px; --d2-lh-numeral: 1;
    --d2-fs-score: 40px;   --d2-lh-score: 1;
    --d2-fs-display: 30px; --d2-lh-display: 1.05;
    --d2-fs-title: 22px;   --d2-lh-title: 1.2;
    --d2-fs-name: 18px;    --d2-lh-name: 1.25;
    --d2-fs-lead: 17px;    --d2-lh-lead: 1.35;
    --d2-fs-body: 16px;    --d2-lh-body: 1.45;
    --d2-fs-small: 14px;   --d2-lh-small: 1.4;
    --d2-fs-label: 12px;   --d2-lh-label: 1.2;
    --d2-fs-micro: 11px;   --d2-lh-micro: 1;
    --d2-tracking-tight: -.02em; --d2-tracking-caps: .07em;

    --d2-sp-1: 4px; --d2-sp-2: 8px; --d2-sp-3: 12px; --d2-sp-4: 16px; --d2-sp-5: 20px; --d2-sp-6: 24px; --d2-sp-8: 32px; --d2-sp-10: 40px;
    --d2-gutter: 16px; --d2-content-max: 560px;
    --d2-r-xs: 8px; --d2-r-sm: 14px; --d2-r-md: 20px; --d2-r-lg: 28px; --d2-r-pill: 999px; --d2-r-round: 50%;
    --d2-shadow-sm: 0 1px 1px rgba(20, 38, 87, .04), 0 2px 6px rgba(22, 73, 183, .05);
    --d2-shadow-md: 0 1px 2px rgba(20, 38, 87, .05), 0 6px 18px -4px rgba(22, 73, 183, .12);
    --d2-shadow-lg: 0 2px 4px rgba(20, 38, 87, .05), 0 18px 36px -12px rgba(22, 73, 183, .28);
    --d2-shadow-sheet: 0 -12px 40px -12px rgba(20, 38, 87, .35);
    --d2-shadow-cta: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .08) inset, 0 10px 22px -6px rgba(242, 90, 102, .6);
    --d2-edge: inset 0 0 0 1px var(--d2-border-hair);
    /* Composite card shadows: a "none" inside a shadow list voids the whole declaration, so high contrast swaps
       the composite, not its parts. */
    --d2-card-shadow: var(--d2-shadow-md), var(--d2-edge);
    --d2-hero-shadow: var(--d2-shadow-lg), var(--d2-edge);
    --d2-h-cta: 56px; --d2-h-btn: 48px; --d2-h-btn-sm: 44px; --d2-h-input: 52px; --d2-h-score: 76px;
    --d2-h-tab: 54px; --d2-h-seg: 44px; --d2-touch-min: 44px; --d2-icon: 20px; --d2-icon-nav: 23px;
    --d2-dur-press: 90ms; --d2-dur-fast: 150ms; --d2-dur-sheet: 220ms; --d2-ease: cubic-bezier(.2, .8, .2, 1);
    --d2-z-dock: 5; --d2-z-toast: 8; --d2-z-scrim: 9; --d2-z-sheet: 10;
    --d2-fs-brand: 25px; --d2-brand-pin: 28px;
    --d2-nav-h: calc(var(--d2-h-tab) + 2 * var(--d2-sp-2));
    --d2-toast-bg: var(--d2-brand-navy); --d2-toast-fg: #FFFFFF;
    --d2-toggle-on-bg: var(--d2-brand-navy); --d2-toggle-on-fg: var(--d2-brand-ball);
    --d2-brand-me: var(--d2-brand-coral-mark);
    /* R6: the CTA's arrow circle on a coral fill, and the QR's white (a scanner needs dark on white in every mode). */
    --d2-cta-chev-bg: rgba(255, 255, 255, .22); --d2-qr-bg: #FFFFFF;
    /* Banner icons as masks (painted in currentColor): CSP img-src allows data:, and a JS-written banner keeps its icon. */
    --d2-mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 9.5v4.6'/%3E%3Ccircle cx='12' cy='16.9' r='1.2' fill='black'/%3E%3C/svg%3E");
    --d2-mask-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --d2-mask-court: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M12 5.5v13M3.5 12h17'/%3E%3C/svg%3E");
    --d2-mask-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.3 10.5V7.8a3.7 3.7 0 0 1 7.4 0v2.7'/%3E%3C/svg%3E");
    /* env() is non-zero only with viewport-fit=cover, enabled by both standalone Live Play layouts. */
    --d2-safe-top: env(safe-area-inset-top, 0px); --d2-safe-right: env(safe-area-inset-right, 0px);
    --d2-safe-bottom: env(safe-area-inset-bottom, 0px); --d2-safe-left: env(safe-area-inset-left, 0px);

    /* Bridge: the d2.legacy modules read these; its own :root values lose to this later layer. */
    --lp-green: var(--d2-action-quiet-fg);
    --lp-ink: var(--d2-text);
    --lp-muted: var(--d2-text-muted);
    --lp-line: var(--d2-border-line);
  }

  /* Social Court — high contrast: the same layouts, other values only. */
  [data-brand="dink2"][data-d2-contrast="high"] {
    --d2-bg: #FFFFFF;
    --d2-brand-navy: #0F1E48; --d2-brand-royal: #1243A8; --d2-brand-royal-2: #3A78E8;
    --d2-brand-coral: #C2324A; --d2-brand-coral-deep: #B02B43;
    --d2-brand-sky-1: #1648B4; --d2-brand-sky-2: #103A97;
    --d2-text-2: #3E4F6E; --d2-text-muted: #3E4F6E;
    --d2-border-line: #C9D6EA; --d2-border-hair: #C9D6EA; --d2-border-control: #5A6C88;
    --d2-border-w: 1.5px;
    --d2-action-primary-pressed: #9A243A; --d2-action-repair-pressed: #0F3A91;
    --d2-hero-ink: #FFFFFF; --d2-hero-num: #FFFFFF; --d2-hero-sub: #D5E2FA;
    --d2-hero-num-shadow: transparent; --d2-hero-art: rgba(255, 255, 255, .14); --d2-hero-art-line: rgba(255, 255, 255, .6);
    --d2-hero-blob: transparent; --d2-landing-blob: transparent; --d2-landing-focus: #FFFFFF;
    --d2-brand-me: var(--d2-brand-coral);
    --d2-shadow-sm: none; --d2-shadow-md: none; --d2-shadow-lg: none; --d2-shadow-cta: none;
    --d2-edge: inset 0 0 0 1.5px var(--d2-border-line);
    --d2-card-shadow: var(--d2-edge); --d2-hero-shadow: none;
    --d2-r-sm: 12px; --d2-r-md: 16px; --d2-r-lg: 24px;
    --d2-fs-lead: 18px; --d2-w-semi: 700;
  }

  @media (max-width: 359.98px) {
    [data-brand] { --d2-h-tab: 46px; --d2-h-cta: 50px; --d2-fs-display: 26px; --d2-h-score: 64px; --d2-fs-score: 34px; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-brand] { --d2-dur-press: 0ms; --d2-dur-fast: 0ms; --d2-dur-sheet: 0ms; }
  }

  /* Club proposal — PO visual approval required. Same semantic API, no club component rules. */
  [data-brand="club"] {
    --d2-brand-navy: #18332A;
    --d2-brand-royal: #24672A; --d2-brand-royal-2: #2E7D32;
    --d2-brand-coral: #2E7D32; --d2-brand-coral-deep: #24672A; --d2-brand-coral-deco: #2E7D32; --d2-brand-coral-mark: #2E7D32;
    --d2-brand-peach: #E8F1E4; --d2-brand-peach-2: #F6FBF3; --d2-brand-peach-blob: #D6E8CF;
    --d2-brand-sky-1: #F6FBF3; --d2-brand-sky-2: #E8F1E4;
    --d2-brand-ball: #FFD84D; --d2-brand-ball-dot: #E0B21F;
    --d2-bg: #F6FBF3;
    --d2-surface-soft: #E8F1E4; --d2-surface-sunken: #F0F6EC;
    --d2-text-2: #40584B; --d2-text-muted: #52665E;
    --d2-border-hair: rgba(24, 51, 42, .08); --d2-border-line: #D6E1DA; --d2-border-control: #6B806E;
    --d2-action-primary-pressed: #1B5E20; --d2-action-repair-pressed: #1F4F2A;
    --d2-hero-alt-bg: linear-gradient(165deg, #F6FBF3, #E8F1E4);
    --d2-scrim: rgba(24, 51, 42, .45);
    --d2-shadow-sm: 0 1px 1px rgba(24, 51, 42, .04), 0 2px 6px rgba(36, 103, 42, .05);
    --d2-shadow-md: 0 1px 2px rgba(24, 51, 42, .05), 0 6px 18px -4px rgba(36, 103, 42, .12);
    --d2-shadow-lg: 0 2px 4px rgba(24, 51, 42, .05), 0 18px 36px -12px rgba(36, 103, 42, .28);
    --d2-shadow-sheet: 0 -12px 40px -12px rgba(24, 51, 42, .35);
    --d2-shadow-cta: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .08) inset, 0 10px 22px -6px rgba(46, 125, 50, .3);
    --d2-av-me-bg: linear-gradient(150deg, #2E7D32, #24672A);
    /* Pin + "dinkujemy.pl" is longer than "dink2.me": smaller type keeps the header on one line from 320 px. */
    --d2-fs-brand: 20px;
  }
  [data-brand="club"][data-d2-contrast="high"] {
    /* R6 landing only: a light CTA on the dark green hero; other actions retain their tokens. */
    --d2-landing-cta-bg: #FFFFFF; --d2-landing-cta-fg: #1F4F2A;
    --d2-landing-cta-pressed: #E8F1E4;
    --d2-landing-cta-edge: inset 0 0 0 2px #10251A;
    --d2-bg: #FFFFFF;
    --d2-brand-navy: #10251A; --d2-brand-royal: #1F4F2A; --d2-brand-royal-2: #24672A;
    --d2-brand-coral: #1F6327; --d2-brand-coral-deep: #1B5E20;
    --d2-brand-sky-1: #24672A; --d2-brand-sky-2: #1F4F2A;
    --d2-text-2: #344D3E; --d2-text-muted: #344D3E;
    --d2-border-line: #B5C8B9; --d2-border-hair: #B5C8B9; --d2-border-control: #52665E;
    --d2-border-w: 1.5px;
    --d2-action-primary-pressed: #16471D; --d2-action-repair-pressed: #163C20;
    --d2-hero-ink: #FFFFFF; --d2-hero-num: #FFFFFF; --d2-hero-sub: #E8F1E4;
    --d2-hero-num-shadow: transparent; --d2-hero-art: rgba(255, 255, 255, .14); --d2-hero-art-line: rgba(255, 255, 255, .6);
    --d2-hero-blob: transparent; --d2-landing-blob: transparent; --d2-landing-focus: #FFFFFF;
    --d2-shadow-sm: none; --d2-shadow-md: none; --d2-shadow-lg: none; --d2-shadow-cta: none; --d2-shadow-sheet: none;
    --d2-edge: inset 0 0 0 1.5px var(--d2-border-line);
    --d2-card-shadow: var(--d2-edge); --d2-hero-shadow: none;
    --d2-r-sm: 12px; --d2-r-md: 16px; --d2-r-lg: 24px;
    --d2-fs-lead: 18px; --d2-w-semi: 700;
  }
}