/* ============================================================
   SWAP — DESIGN TOKENS
   LAYER: View
   Namespace: .SWAPstyles  (project.config.md §1 — overrides .AQstyles)

   Every value a designer adjusts lives in this file. Nothing below the token
   blocks in layout.css or components.css contains a raw colour or pixel size.
   ============================================================ */

/* ------------------------------------------------------------
   BREAKPOINTS
   TWEAK: Adjust to match the target device range. Media queries reference
          these values — never hardcode a pixel width in a media query.
   ------------------------------------------------------------ */
:root {
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
  /* WHY --bp-tv exists (project.config.md §2): the Room is not a wide desktop.
     It is read from three to ten feet away, and above this width the type scale
     and character art step up rather than the layout simply widening. */
  --bp-tv:      1920px;
}

/* ------------------------------------------------------------
   COLOR TOKENS
   TWEAK: Swap entire themes here. Names are semantic, not literal, so a theme
          change does not require renaming anything.
   ------------------------------------------------------------ */
:root {
  --color-primary:       #0055FF;
  --color-primary-light: #EBF0FF;
  --color-primary-dark:  #003DBB;

  --color-bg:            #F9FAFB;
  --color-surface:       #FFFFFF;
  --color-border:        #E5E7EB;
  --color-text:          #111827;
  --color-text-muted:    #6B7280;

  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-danger:        #CC2200;
  --color-info:          #0284C7;

  /* Room surface — a teaching screen is dark so lesson media carries the light */
  --color-room-bg:       #0B1220;
  --color-room-surface:  #16203A;
  --color-room-text:     #F8FAFC;
  --color-room-accent:   #38BDF8;
}

/* ------------------------------------------------------------
   ANSWER COLOUR PALETTE
   TWEAK: These are the ONLY colours an answer option may use.
   WHY (project.config.md §7): options must differ by hue AND value, never hue
        alone, and red never sits beside green — the most common colour-vision
        deficiency would otherwise mark a correct child wrong. Authors cannot
        supply hex values; they pick from this set.
   ------------------------------------------------------------ */
:root {
  --answer-blue:   #1D4ED8;
  --answer-yellow: #FACC15;
  --answer-purple: #7E22CE;
  --answer-orange: #EA580C;
  --answer-teal:   #0F766E;
  --answer-pink:   #DB2777;

  /* Text laid over each swatch, chosen for contrast against that swatch */
  --answer-blue-ink:   #FFFFFF;
  --answer-yellow-ink: #1F2937;
  --answer-purple-ink: #FFFFFF;
  --answer-orange-ink: #FFFFFF;
  --answer-teal-ink:   #FFFFFF;
  --answer-pink-ink:   #FFFFFF;
}

/* ------------------------------------------------------------
   TYPOGRAPHY
   TWEAK: Changing --font-base scales the whole adult-facing type system.
   ------------------------------------------------------------ */
:root {
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-base:   16px;

  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.8;
}

/* ------------------------------------------------------------
   ROOM TYPE SCALE — override (project.config.md §4)
   TWEAK: These drive text size on the Room screen only. Seat and adult pages
          use the standard scale above.
   WHY viewport-relative rather than fixed: the Room runs on a 1080p television,
        a 4K panel, or a classroom projector. Fixed pixel sizing is legible on
        one of those and wrong on the others.
   ------------------------------------------------------------ */
:root {
  --room-text-body:    2.2vw;
  --room-text-heading: 3.6vw;
  --room-text-code:    6.0vw;
}

/* ------------------------------------------------------------
   SPACING & COMPONENT LAYOUT
   TWEAK: Gaps, padding, and grid column counts app-wide.
   ------------------------------------------------------------ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --section-gap:     24px;
  --component-gap:   16px;
  --content-padding: 24px;

  --card-columns:        3;
  --card-columns-tablet: 2;
  --card-columns-mobile: 1;

  --max-list-items:     20;
  --max-card-items:     12;
  --max-dropdown-items:  8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.10);
  --shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.18);
}

/* ------------------------------------------------------------
   REGION LAYOUT — GRID TEMPLATE
   TWEAK: Edit the template strings to rearrange whole regions.
   WHY grid-template-areas for macro layout: named regions can be repositioned
        without touching HTML or JS. Flexbox handles alignment inside a region.
   ------------------------------------------------------------ */
:root {
  --desktop-layout:
    "header  header  header"
    "sidebar main    panel"
    "footer  footer  footer";

  --tablet-layout:
    "header  header"
    "sidebar main"
    "footer  footer";

  --mobile-layout:
    "header"
    "main"
    "footer";

  --desktop-columns: 220px 1fr 280px;
  --tablet-columns:  200px 1fr;
  --mobile-columns:  1fr;

  --header-height: 64px;
  --footer-height: 48px;
}

/* ------------------------------------------------------------
   REGION VISIBILITY
   TWEAK: 0 hides a region at that breakpoint, 1 shows it.
   ------------------------------------------------------------ */
:root {
  --show-header:  1;
  --show-sidebar: 1;
  --show-panel:   1;
  --show-footer:  1;

  --show-sidebar-tablet: 1;
  --show-panel-tablet:   0;

  --show-sidebar-mobile: 0;
  --show-panel-mobile:   0;
}

/* ------------------------------------------------------------
   FORM & TOUCH TARGETS
   TWEAK: --field-height is the adult minimum and applies to every adult form.
   ------------------------------------------------------------ */
:root {
  --field-height:  44px;
  --field-padding: 10px 12px;

  /* TWEAK: Answer-pad targets on the Seat.
     WHY they are twice the adult minimum (project.config.md §6): the primary
     user is a young child, frequently pre-literate, often on a moving tablet.
     A 44px target produces mis-taps that get RECORDED AS WRONG ANSWERS — a
     correctness bug wearing a styling choice as a disguise. */
  --answer-target-min: 88px;
  --answer-target-gap: 16px;
}