/* Play Corner design tokens (SPEC §7.3). Canonical names use the --pc- prefix.
   Short aliases at the bottom exist for convenience; prefer the --pc- names. */

:root {
  /* Brand */
  --pc-yellow: #FFC72C;          /* IRC yellow: primary accent */
  --pc-yellow-deep: #F2A900;     /* pressed / borders on yellow */
  --pc-yellow-soft: #FFE7A3;     /* tints, hero backgrounds */
  --pc-yellow-wash: #FFF1C9;
  --pc-ink: #1A1A1A;             /* main text */
  --pc-ink-soft: #3D3A35;        /* secondary text (AA on bg) */
  --pc-muted: #6B6458;           /* captions (AA on white and bg) */
  --pc-bg: #FFF8E7;              /* page background */
  --pc-surface: #FFFFFF;         /* cards */
  --pc-surface-2: #FFFDF6;
  --pc-line: #EADFC6;            /* hairlines, card borders */
  --pc-line-strong: #D9C9A3;

  /* Domains (SPEC §7.3) */
  --pc-cognitive: #4A90D9;
  --pc-language: #E8613C;
  --pc-social-emotional: #9B59B6;
  --pc-physical: #2EAD6B;
  --pc-cognitive-soft: #E3EEFA;
  --pc-language-soft: #FCE6DF;
  --pc-social-emotional-soft: #F1E6F6;
  --pc-physical-soft: #DEF4E8;

  /* Extra playful palette (places, art) */
  --pc-sky: #7CC6E8;
  --pc-sky-soft: #E2F3FB;
  --pc-pink: #F27BA0;
  --pc-pink-soft: #FDE6EE;
  --pc-teal: #1FA6A0;
  --pc-teal-soft: #DDF3F1;
  --pc-orange: #F59E42;
  --pc-brown: #8B5E3C;

  /* Feedback */
  --pc-success: #2EAD6B;
  --pc-danger: #C8402A;
  --pc-info: #4A90D9;

  /* Type */
  --pc-font: "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --pc-text-xs: 14px;
  --pc-text-sm: 16px;
  --pc-text: 18px;               /* body minimum */
  --pc-text-md: 20px;
  --pc-text-lg: 22px;
  --pc-text-xl: 26px;
  --pc-text-2xl: 32px;
  --pc-text-3xl: 40px;
  --pc-leading: 1.7;
  --pc-leading-tight: 1.35;

  /* Space (4px grid) */
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-5: 20px;
  --pc-space-6: 24px;
  --pc-space-8: 32px;
  --pc-space-10: 40px;

  /* Shape */
  --pc-radius-sm: 12px;
  --pc-radius: 20px;
  --pc-radius-lg: 28px;
  --pc-radius-pill: 999px;
  --pc-border: 2px;

  /* Elevation: warm, soft */
  --pc-shadow-sm: 0 1px 2px rgba(90, 60, 0, 0.10), 0 2px 6px rgba(90, 60, 0, 0.06);
  --pc-shadow: 0 2px 4px rgba(90, 60, 0, 0.08), 0 6px 18px rgba(90, 60, 0, 0.10);
  --pc-shadow-lg: 0 6px 12px rgba(90, 60, 0, 0.10), 0 16px 40px rgba(90, 60, 0, 0.16);
  --pc-shadow-press: 0 1px 2px rgba(90, 60, 0, 0.16);

  /* Layout */
  --pc-max: 560px;
  --pc-touch: 48px;              /* minimum touch target */
  --pc-touch-lg: 60px;
  --pc-gutter: 16px;
  --pc-header-h: 64px;
  --pc-safe-top: env(safe-area-inset-top, 0px);
  --pc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pc-safe-start: env(safe-area-inset-right, 0px);  /* RTL: inline-start is the right edge */
  --pc-safe-end: env(safe-area-inset-left, 0px);

  /* Focus */
  --pc-focus-color: #1A1A1A;
  --pc-focus-halo: #FFC72C;
  --pc-focus-ring: 0 0 0 3px var(--pc-focus-halo), 0 0 0 6px var(--pc-focus-color);

  /* Motion */
  --pc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --pc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pc-dur-fast: 120ms;
  --pc-dur: 220ms;
  --pc-dur-slow: 420ms;

  /* Layers */
  --pc-z-header: 20;
  --pc-z-overlay: 100;
  --pc-z-toast: 200;

  /* Short aliases (same values) */
  --yellow: var(--pc-yellow);
  --primary: var(--pc-yellow);
  --ink: var(--pc-ink);
  --text: var(--pc-ink);
  --bg: var(--pc-bg);
  --surface: var(--pc-surface);
  --muted: var(--pc-muted);
  --line: var(--pc-line);
  --radius: var(--pc-radius);
  --shadow: var(--pc-shadow);
  --font: var(--pc-font);
  --color-primary: var(--pc-yellow);
  --color-text: var(--pc-ink);
  --color-bg: var(--pc-bg);
  --cognitive: var(--pc-cognitive);
  --language: var(--pc-language);
  --social-emotional: var(--pc-social-emotional);
  --physical: var(--pc-physical);
  --domain-cognitive: var(--pc-cognitive);
  --domain-language: var(--pc-language);
  --domain-social-emotional: var(--pc-social-emotional);
  --domain-physical: var(--pc-physical);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pc-dur-fast: 0ms;
    --pc-dur: 0ms;
    --pc-dur-slow: 0ms;
  }
}

/* Devices (docs/FRAMEWORK.md «Devices»). One shared set of breakpoints; CSS cannot put them in variables, so
   every file writes them out the same way:
     phone landscape  (max-height: 500px) and (orientation: landscape)   short: compact HUDs, panels to one side
     tablet           (min-width: 768px)                                  iPad portrait and up: larger, not bloated
     desktop          (min-width: 1100px)                                 iPad landscape, laptops, big screens
   Put a phone-landscape block after the tablet/desktop blocks (a phone in landscape can be 844–932px wide).
   Older files still use 900px for their two-column layouts; that is the same family (tablet → desktop).
   Hover styles only under (hover: hover); tap targets at least 44px (--pc-touch is 48px). */

/* tablets: a wider column */
@media (min-width: 768px) {
  :root {
    --pc-max: 720px;
    --pc-gutter: 24px;
  }
}

/* Computers and tablets in landscape: a wider canvas. Screens add their own two-column layouts at the same width. */
@media (min-width: 900px) {
  :root {
    --pc-max: 1180px;
    --pc-gutter: 32px;
  }
}

/* big screens: a little wider still, never stretched edge to edge */
@media (min-width: 1600px) {
  :root {
    --pc-max: 1320px;
  }
}

/* phones in landscape (short): a slimmer sticky header */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --pc-header-h: 52px;
  }
}

/* English: a round, friendly Latin font first (system fonts only; Arabic words still fall back to the Arabic fonts) */
:root[lang="en"] {
  --pc-font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, "Noto Sans Arabic", "Geeza Pro", sans-serif;
}