/*
 * Semantic tokens. Components only ever read --color-*, --font-* and the density tokens
 * declared by a theme; they never use a palette value or a raw colour directly.
 *
 * data-palette picks the brand colours (three candidates while the design is being validated).
 * data-theme picks the personality: "kids" for the child and parent side, "backoffice" for coaches.
 */
@layer tokens {
  :root,
  [data-palette="pitch"] {
    --p-brand: #15803d;
    --p-brand-strong: #0e5c2b;
    --p-brand-soft: #ddf5e4;
    --p-accent: #ff6b4a;
    --p-accent-strong: #c9401f;
    --p-on-accent: #401004;
    --p-practice: #0e7490;
    --p-practice-soft: #d9f2f7;
    --p-bg: #fffbf0;
    --p-sunken: #f5eedb;
    --p-border: #e6dec8;
    --p-border-strong: #8c8468;
    --p-text: #1c2b21;
    --p-muted: #56614f;
  }

  [data-palette="sky"] {
    --p-brand: #1a66d4;
    --p-brand-strong: #134fa6;
    --p-brand-soft: #dceaff;
    --p-accent: #ff8a1f;
    --p-accent-strong: #c45f00;
    --p-on-accent: #3d1f00;
    --p-practice: #0b7a53;
    --p-practice-soft: #d8f3e8;
    --p-bg: #f4f9ff;
    --p-sunken: #e6effa;
    --p-border: #d3e0f0;
    --p-border-strong: #7c8ca3;
    --p-text: #14233b;
    --p-muted: #4f5e76;
  }

  [data-palette="arcade"] {
    --p-brand: #6d3be0;
    --p-brand-strong: #4c22b0;
    --p-brand-soft: #eae0ff;
    --p-accent: #a6e22e;
    --p-accent-strong: #6e9c0e;
    --p-on-accent: #1f3300;
    --p-practice: #0e7490;
    --p-practice-soft: #d9f2f7;
    --p-bg: #faf7ff;
    --p-sunken: #efe9fa;
    --p-border: #ddd3ee;
    --p-border-strong: #8878a8;
    --p-text: #1e1638;
    --p-muted: #5a5173;
  }

  [data-theme] {
    --color-brand: var(--p-brand);
    --color-brand-strong: var(--p-brand-strong);
    --color-brand-soft: var(--p-brand-soft);
    --color-on-brand: #ffffff;

    /* Stars are awarded by the coach only; home practice uses --color-practice. */
    --color-reward: #ffc83d;
    --color-reward-strong: #a87000;
    --color-reward-soft: #fff3cc;
    --color-on-reward: #4a3300;

    --color-practice: var(--p-practice);
    --color-practice-soft: var(--p-practice-soft);
    --color-on-practice: #ffffff;

    --color-success: #126b33;
    --color-success-soft: #ddf5e4;
    --color-warning: #a84d08;
    --color-warning-soft: #fff0d6;
    --color-danger: #c62828;
    --color-danger-strong: #8e1b1b;
    --color-danger-soft: #fde3e3;
    --color-info: #1d5fbf;
    --color-info-soft: #e1edff;
  }

  [data-theme="kids"] {
    --color-bg: var(--p-bg);
    --color-surface: #ffffff;
    --color-surface-sunken: var(--p-sunken);
    --color-text: var(--p-text);
    --color-text-muted: var(--p-muted);
    --color-border: var(--p-border);
    --color-border-strong: var(--p-border-strong);
    --color-accent: var(--p-accent);
    --color-accent-strong: var(--p-accent-strong);
    --color-on-accent: var(--p-on-accent);
    --color-focus: var(--p-text);
    --color-overlay: color-mix(in srgb, var(--color-text) 60%, transparent);

    --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
    --weight-display: 600;
    --weight-body: 500;
    --weight-strong: 800;

    --text-body: var(--text-lg);
    --text-control: var(--text-lg);
    --title-1: var(--text-4xl);
    --title-2: var(--text-3xl);
    --title-3: var(--text-2xl);
    --title-4: var(--text-xl);

    --radius-control: var(--radius-lg);
    --radius-button: var(--radius-full);
    --radius-card: var(--radius-xl);
    --control-height: 3.25rem;
    --control-height-sm: 2.75rem;
    --control-padding: var(--space-5);
    --card-padding: var(--space-5);
    --border-width: 2px;
    --button-edge: 4px;
    --shadow-card: 0 3px 0 var(--color-border);
    --press-ease: var(--ease-bounce);
  }

  [data-theme="backoffice"] {
    --color-bg: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-sunken: #eef0f3;
    --color-text: #16191d;
    --color-text-muted: #59616c;
    --color-border: #dde1e6;
    --color-border-strong: #808a97;
    --color-accent: var(--p-brand);
    --color-accent-strong: var(--p-brand-strong);
    --color-on-accent: #ffffff;
    --color-focus: var(--p-brand);

    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --weight-display: 650;
    --weight-body: 400;
    --weight-strong: 600;

    --text-body: var(--text-md);
    --text-control: var(--text-md);
    --title-1: var(--text-2xl);
    --title-2: var(--text-xl);
    --title-3: var(--text-lg);
    --title-4: var(--text-md);

    --radius-control: var(--radius-sm);
    --radius-button: var(--radius-sm);
    --radius-card: var(--radius-md);
    /* Coaches assess at training on a phone: keep comfortable touch targets on small screens. */
    --control-height: 2.75rem;
    --control-height-sm: 2.25rem;
    --control-padding: var(--space-4);
    --card-padding: var(--space-4);
    --border-width: 1px;
    --button-edge: 0px;
    --shadow-card: none;
    --press-ease: var(--ease-out);

    @media (min-width: 40rem) {
      --text-body: 0.9375rem;
      --text-control: 0.9375rem;
      --control-height: 2.5rem;
      --control-height-sm: 2rem;
      --card-padding: var(--space-5);
    }
  }
}