/* ============================================================
   NIMRITA GAMES — DESIGN SYSTEM  (LOCKED)

   This file is the ONLY place the palette, spacing scale, type
   scale and shared primitives are defined. Every page on the site
   links it: index.html, privacy/ and support/.

   RULES
   - The palette is fixed. Do not add colour values anywhere else,
     and do not introduce a colour that is not a token below.
   - Spacing and type come from the scales below. No off-scale
     values — that is what made the previous site read as
     assembled rather than designed.
   - Shadows have zero blur, always. Cel shading steps; it does
     not bloom. There are no glow shadows on this site.
   - Contrast is verified against EVERY ground the page presents,
     including the darkest end of the body gradient. All 17 pairs
     meet WCAG AA (measured, not estimated). Worst cases:
       link on gradient foot ............ 4.62:1
       muted text on gradient foot ...... 4.86:1
       link on gradient top ............. 5.45:1
       white on primary button .......... 6.15:1
       footer small text on --bg-2 ...... 6.72:1
       body text on panel .............. 12.61:1
     --accent is #B4321D rather than the logo's own coral because
     the gradient foot is the darkest ground; a lighter coral fails
     there. If you change a colour you have broken these. Re-measure.

   ONE SANCTIONED DUPLICATE: <meta name="theme-color"> in each
   HTML file repeats --bg (#FEEFDC) as a literal, because a meta
   tag cannot read a CSS variable. If --bg ever changes, those
   three tags change with it. Nothing else may repeat a colour.

   NOTE: this file is served unhashed, so browsers may cache it.
   That is fine while it does not change — which is the intent.
   ============================================================ */

:root {
  /* ---- palette: sampled from the logo, then made accessible ----
     Every value below is either taken from brand/logo.jpg or
     derived from it. Sampled points: cream #FEEFDC, peach #F5D6C1,
     dusty rose #D7B3A5, mauve #AD9497, coral #F05A40, ink #372E33. */

  --bg:          #FEEFDC;  /* page ground — the logo's cream      */
  --bg-grad-mid: #FCEAD8;  /* gradient waypoint                   */
  --bg-grad-end: #F6DAC6;  /* gradient foot — light peach only    */

  /* Facet tones for the low-poly ground, mirroring the logo's crystalline
     background. All four sit between --bg and --bg-grad-end, so no facet
     is ever darker than the ground the contrast figures were measured
     against. That is what keeps the texture safe behind text. */
  --facet-1:     #FDEDD9;
  --facet-2:     #FAE5D0;
  --facet-3:     #F8DFCA;
  --facet-4:     #F5D9C4;
  --bg-2:        #F0D5C2;  /* recessed ground — footer, code      */
  --panel:       #FFFAF0;  /* raised surface — cards              */
  --line:        #372E33;  /* the logo's own outline colour       */
  --shadow:      #372E33;  /* stepped shadow, same as the outline */
  --text:        #372E33;  /* body copy and headings              */
  --text-2:      #534245;  /* secondary copy                      */
  --text-3:      #6B5A5C;  /* eyebrows, captions, meta            */

  /* Two corals, deliberately. The logo's exact coral cannot carry text
     (2.98:1 as a link, 3.36:1 under white), so it is reserved for
     graphics, and a darkened variant does the reading. */
  --brand:       #F05A40;  /* logo-exact. FILLS AND GRAPHICS ONLY */
  --accent:      #B4321D;  /* text, links, button fills           */
  --accent-tint: #FBE0D8;  /* accent at wash strength, for tags   */

  --gold:        #E9A93B;  /* secondary, sparingly                */
  --gold-tint:   #FBEDD0;
  --sky:         #5AA9D6;  /* secondary, sparingly                */
  --sky-tint:    #DDEEF8;

  /* ---- spacing: seven values ---- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;

  /* ---- type: one ratio, 1.2, from a 16px base ----
     Every step is a power of 1.2, so the whole ramp is one system rather
     than two. Headings climb in 1.2^2 increments (23 -> 33 -> 48), which
     is why the ramp reads evenly. Each step below has exactly one job:
       --t-1  uppercase labels, eyebrows, meta, footer  (never prose)
       --t0   ALL running prose, buttons, nav
       --t1   the hero's lead line
       --t2   h3 / card titles
       --t3   h2 / section titles
       --t4   h1 only
     If a step stops being used, delete it rather than leaving a gap —
     an unused rung is what previously made h3 jump straight to h2. */
  --t-1: 0.833rem;   /* 13.3px */
  --t0:  1rem;       /* 16px   */
  --t1:  1.2rem;     /* 19.2px */
  --t2:  1.44rem;    /* 23px   */
  --t3:  2.074rem;   /* 33.2px */
  --t4:  2.986rem;   /* 47.8px */

  --r:      12px;
  --r-sm:   8px;
  --r-pill: 999px;

  --rounded: "M PLUS Rounded 1c", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* ---- the signature: light that steps instead of blurring ---- */
  --cel:    4px 4px 0 var(--shadow);
  --cel-in: 2px 2px 0 var(--shadow);
}

/* One visual world, deliberately. A parchment ground with hard outlines has
   no honest dark counterpart — inverting it yields a different, weaker
   design — so the palette is declared once and color-scheme keeps the
   browser's own chrome in step. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; }

body {
  margin: 0;
  /* The logo's crystalline ground, rebuilt in CSS. Each conic-gradient is a
     single wedge with a hard stop, so its edges are crisp rather than
     blurred — facets, like cel shading, step. Layered over the base
     gradient they read as one low-poly plane.

     The logo's own ground continues into rose and mauve; this stops at
     light peach, because secondary text measures only 3.36:1 on that rose.
     Deep tones are allowed only where no body copy sits — see .footer. */
  background-color: var(--bg);
  background-image:
    conic-gradient(from 195deg at 8% 4%,   var(--facet-2) 0 14%, transparent 14%),
    conic-gradient(from 25deg  at 78% 2%,  var(--facet-3) 0 11%, transparent 11%),
    conic-gradient(from 300deg at 96% 22%, var(--facet-4) 0 16%, transparent 16%),
    conic-gradient(from 130deg at 32% 30%, var(--facet-1) 0 12%, transparent 12%),
    conic-gradient(from 75deg  at 60% 48%, var(--facet-3) 0 9%,  transparent 9%),
    conic-gradient(from 250deg at 12% 62%, var(--facet-2) 0 13%, transparent 13%),
    conic-gradient(from 340deg at 88% 74%, var(--facet-4) 0 15%, transparent 15%),
    conic-gradient(from 160deg at 44% 88%, var(--facet-2) 0 11%, transparent 11%),
    conic-gradient(from 60deg  at 4% 96%,  var(--facet-3) 0 10%, transparent 10%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg-grad-mid) 45%, var(--bg-grad-end) 100%);
  /* Deliberately NOT background-attachment: fixed. Ten compositing layers
     pinned to the viewport is a known source of scroll jank on Android and
     iOS, and this site's audience is on phones. Letting it scroll with the
     document costs nothing visually. */
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--rounded);
  font-size: var(--t0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Leading tightens as size grows — a display line needs less than a
   heading that wraps at card width. One value for all three was wrong. */
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; }
h1 { font-size: var(--t4); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--t3); line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: var(--t2); line-height: 1.3; letter-spacing: -0.008em; font-weight: 700; }
p  { margin: 0; }

a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

code { font-family: var(--mono); font-size: 0.9em; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--s3);
  top: var(--s3);
  z-index: 100;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  box-shadow: var(--cel);
}

/* ---- shared primitives ------------------------------------------------ */

/* Never put a max-width on .shell's own element as well — the two compete
   and the block centres instead of aligning to the page gutter. Nest. */
.shell {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--s4);
}

.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--cel);
}

.eyebrow {
  font-size: var(--t-1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--t0);
  font-weight: 800;
  padding: var(--s2) var(--s4);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--cel);
  transition: transform 0.12s steps(2), box-shadow 0.12s steps(2);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: var(--cel-in); color: var(--text); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---- nav -------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 800;
  font-size: var(--t1);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
/* The Om, transparent and trimmed to its own bounding box. No frame: the
   mark carries its own black outline, and boxing it would double that. */
.brand-mark {
  width: 1.9rem;
  height: 1.9rem;
  background-image: url("/brand/mark.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
}
.nav-links { display: flex; gap: var(--s4); align-items: center; }
.nav-links a { color: var(--text-2); font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* ---- footer ----------------------------------------------------------- */

.footer {
  border-top: 2px solid var(--line);
  padding-block: var(--s5);
  background: var(--bg-2);
  margin-top: var(--s6);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s4); }
/* --bg-2 is deeper than the page, so the footer steps up to --text-2;
   --text-3 does not hold contrast on it. */
.footer small { color: var(--text-2); font-size: var(--t-1); }
.footer a { font-size: var(--t-1); }

@media (max-width: 40rem) {
  /* Mobile shifts the heading ramp down one rung of the same scale,
     rather than inventing new sizes. */
  :root { --t4: 2.074rem; --t3: 1.728rem; }
  .nav-links { gap: var(--s3); }
  .nav-links a { font-size: var(--t-1); }
}

/* ---- homepage sections ------------------------------------------------ */

/* ---- tags ------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--t-1);
  font-weight: 800;
  padding: var(--s1) var(--s3);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--text);
  box-shadow: var(--cel-in);
}
.tag-gold { background: var(--gold-tint); }
.tag-sky { background: var(--sky-tint); }

/* ---- hero ------------------------------------------------------------- */

.hero { padding-block: var(--s7) var(--s6); }
.hero-inner { display: flex; flex-direction: column; gap: var(--s4); max-width: 36rem; }
.hero h1 { max-width: 22ch; }
.hero p { font-size: var(--t1); line-height: 1.5; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }

/* ---- sections --------------------------------------------------------- */

.section { padding-block: var(--s6); border-top: 2px solid var(--line); }
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
  max-width: 40rem;
}
.section-head p { color: var(--text-2); }

/* ---- games ------------------------------------------------------------ */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s4);
}
.game { display: flex; flex-direction: column; overflow: hidden; }
.game-art {
  aspect-ratio: 4 / 3;
  border-bottom: 2px solid var(--line);
  background: var(--bg-2);
  object-fit: cover;
  width: 100%;
  display: block;
}
.game-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.game-body p { color: var(--text-2); font-size: var(--t0); }

.empty {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: center;
  text-align: center;
  border-style: dashed;
  box-shadow: none;
}
.empty p { color: var(--text-2); max-width: 40ch; }

/* ---- tools ------------------------------------------------------------ */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s4); }
.tool { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.tool p { color: var(--text-2); font-size: var(--t0); }
.tool-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.tool-cmd {
  font-family: var(--mono);
  font-size: var(--t-1);
  background: var(--bg-2);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s2);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---- contact ---------------------------------------------------------- */

.contact-card { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.contact-card p { color: var(--text-2); max-width: 46ch; }

@media (max-width: 40rem) {
  .hero { padding-block: var(--s6) var(--s5); }
}