/*
 * pa-tokens.css — Prothom Alo hero-games design tokens.
 * Established by the শব্দভেদ build; inherited by the other four heroes
 * and the 35 catalogue reskins.
 *
 * THE SYSTEM IS A THREE-COLOUR PRESS.
 * Prothom Alo's printed puzzle page is a cyan tint on newsprint — that much
 * is measured off the scans in Screenshot/. The spot red is the paper's
 * MASTHEAD ink, imported deliberately; it is not on the printed puzzle page,
 * and this comment used to imply otherwise. Green was admitted third, on the
 * শব্দফুল build (2026-08-15), by the same kind of deliberate import.
 *
 * Every surface colour here is paper, ink-black, or a screen of one of those
 * three inks. Nothing else is admitted. That constraint is what makes a grid
 * of 64 cells read as a newspaper rather than as a UI.
 *
 * EACH INK CARRIES EXACTLY ONE MEANING, and that is what makes three inks a
 * system rather than a palette:
 *
 *   cyan   — NOT YOURS TO FILL. A blocked square, and nothing else.
 *   red    — NOW. The square, word or letter you are acting on. Also wrong.
 *   green  — SETTLED. Solved, found, correct, finished. Never in play.
 *
 * Portal chrome (violet) is inherited for interactive affordances only —
 * app bar controls, sheet tabs, primary buttons — so a game launched from
 * the portal does not read as a different product.
 */

:root {
  /* ---- paper & ink ------------------------------------------------ */
  --pa-paper:        #F4F3EF;  /* cool newsprint, not cream */
  --pa-paper-lift:   #FBFAF8;
  --pa-cell:         #FFFFFF;  /* unprinted stock inside the grid */
  --pa-ink:          #16171A;
  --pa-ink-2:        #55585F;
  --pa-ink-3:        #8A8D94;
  --pa-rule:         #D6D5D0;
  --pa-rule-strong:  #16171A;

  /* ---- cyan ink, by screen percentage ----------------------------- */
  --pa-cyan-08:      #EDF4F9;
  --pa-cyan-16:      #D7E7F2;  /* block cells — measured off the print scans */
  --pa-cyan-30:      #B9D8EC;  /* active word */
  --pa-cyan-45:      #93C1DF;
  --pa-cyan:         #1B6FA8;

  /* ---- red ink, by screen percentage ------------------------------ */
  --pa-red-08:       #FDECE8;
  --pa-red-16:       #FBD9D2;  /* active cell */
  --pa-red-40:       #F6A492;
  --pa-red:          #EE4023;  /* PA masthead red */
  --pa-red-deep:     #C22A12;

  /* ---- green ink — SETTLED. Deliberately no 08 or 16 step ---------
     Green screened to 16% is #D9E7E1. Cyan tint, the single most protected
     value in the system, is #D7E7F2. Identical red and green channels, 15
     steps of blue apart: at cell size on a phone they are one colour. A
     documented "don't use green-16 on a board" rule would be enforced by
     memory, and this system has already had one such rule broken. So the
     step does not exist. The collision is unreachable because there is
     nothing to reach for.

     Consequence, accepted on the শব্দফুল build: a settled cell is green-30,
     which is visibly heavier than the cyan-16 it replaces. A nearly-solved
     board therefore looks substantially resolved, which is correct. */
  --pa-green-30:     #B7D3C7;  /* settled cell — the lightest green admitted */
  --pa-green-45:     #93BCAB;  /* settled, emphatic: rules, strikes, marks */
  --pa-green:        #0F6B45;  /* full strength: text, glyphs, numerals only */

  /* ---- portal chrome (inherited, interactive affordances only) ----- */
  --pa-chrome:        #7C3AED;
  --pa-chrome-strong: #6D28D9;
  --pa-chrome-tint:   #F3F0FB;
  --pa-chrome-line:   #7C3AED29;

  /* ---- type ------------------------------------------------------- */
  --pa-serif: 'Noto Serif Bengali', 'Kalpurush', Georgia, serif;
  --pa-sans:  'Noto Sans Bengali', 'Kalpurush', system-ui, sans-serif;

  --pa-size-masthead: 1.625rem;
  --pa-size-title:    1.25rem;
  --pa-size-body:     0.9375rem;
  --pa-size-meta:     0.75rem;
  /* four steps, each a real one. A fifth size 9% off its neighbour was
     noise pretending to be hierarchy. */

  /* Bangla needs more leading than Latin — kars and conjuncts extend
     above and below the x-height on both sides. */
  --pa-leading-tight: 1.35;
  --pa-leading-body:  1.7;

  /* ---- metrics ---------------------------------------------------- */
  --pa-r-sm: 0.375rem;
  --pa-r-md: 0.5rem;
  --pa-r-lg: 0.75rem;
  --pa-r-xl: 1rem;

  --pa-s-1: 0.25rem;
  --pa-s-2: 0.5rem;
  --pa-s-3: 0.75rem;
  --pa-s-4: 1rem;
  --pa-s-5: 1.5rem;
  --pa-s-6: 2rem;

  --pa-bar-h: 3rem;
  /* The WCAG AA touch-target floor, and it is stated in px on purpose.

     This system deliberately runs a 15px root — pa-ui.css sets html's
     font-size to --pa-size-body, which is what makes the four type steps
     land on the 24.4 / 18.8 / 14.1 / 11.2px DESIGN.md records as measured.
     The consequence is that every rem in the programme is 15-based, so the
     2.75rem this token used to hold computed to 41.25px: three pixels under
     the floor its own comment claimed, on every icon button, menu row and
     primary button in four shipped heroes.

     A floor set in the unit that floor is defined in cannot drift with the
     type ramp. Found on the কুইজ build (2026-08-19) by an assertion that
     measured a rendered option rather than reading the token. */
  --pa-tap:   44px;

  /* Depth is one press impression: offset plus soft blur, never a halo. */
  --pa-lift-1: 0 1px 2px rgba(22, 23, 26, 0.06), 0 2px 8px rgba(22, 23, 26, 0.05);
  --pa-lift-2: 0 2px 4px rgba(22, 23, 26, 0.08), 0 12px 28px rgba(22, 23, 26, 0.12);

  --pa-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- desktop: the same four steps, set larger -----------------------
   A phone type ramp on a 27-inch monitor reads as a shrunken phone, which
   is exactly what it is. This scales the ramp rather than adding to it:
   still four steps, still real ratios (1.33 / 1.41 / 1.31), so The Real
   Step Rule holds. Bound to the same two-dimensional breakpoint the
   spread layout uses, so type and layout change together. */
@media (min-width: 60rem) and (min-height: 40rem) {
  :root {
    --pa-size-masthead: 2rem;
    --pa-size-title:    1.5rem;
    --pa-size-body:     1.0625rem;
    --pa-size-meta:     0.8125rem;

    /* The One Page Measure. Every surface in the programme — the hub, a
       game's front page, a game's board — is the same printed page, so on a
       desktop they take the same measure and sit on the same centre line.
       They did not: the hub was 68rem, a front page 76rem and a board an
       uncapped 100rem, so at 1440px their left edges fell at 142px, 74px and
       0px and the whole page slid left twice as a reader walked from the hub
       into a puzzle. A newspaper does not change width when you turn to the
       puzzle page.

       Widened past 90rem rather than held flat, because a board is the one
       surface with a real reason to grow: at the widest tier the crossword is
       8 cells at 112px (56rem) beside a 26rem clue rail, which does not fit
       in 76rem. Both steps are declared here so no surface can drift.

       The `100vw −` term is what keeps it a page. A flat 88rem on a 1440px
       laptop leaves 16px of paper either side, which is not a margin, it is a
       rounding error — the hairline page edges land under the window chrome
       and the spread reads as full-bleed. Subtracting from the viewport floors
       the margin instead, so there is always visible paper outside the rules
       no matter what the reader's window happens to be. */
    --pa-page: min(76rem, calc(100vw - 6rem));
  }
}

@media (min-width: 90rem) and (min-height: 48rem) {
  :root { --pa-page: min(88rem, calc(100vw - 8rem)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pa-ease: linear; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}