/* Spectralmoon Studio · v4 · THE GRID CONTRACT
   ============================================
   Every number in this site is declared here once. Nothing downstream invents a value.
   If a section needs something not in this file, the answer is either "use the nearest
   token" or "we are adding a token on purpose" — never a one-off number.

   Verify with:  python3 tools/grid-check.py
   Source:       Learning/Web Design lessons 07, 09, 10 (Flux Academy fundamentals)
*/

:root{

  /* ---------- SPACING · strict 8px grid ----------
     8 divides cleanly by 4 and by 2, so we can get granular without muddy decimals.
     Allowed sub-grid values: 4px and 2px (hairlines, optical nudges). Nothing else. */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;
  --space-10:192px;

  /* ---------- SECTION RHYTHM · the half-padding system ----------
     A section carries HALF its rhythm value as padding, top and bottom. Two stacked
     sections then add up to the full value. This is what makes reordering sections
     free: every section carries the same padding, so any two always sum correctly.

     Note: the course teaches 88 / 128 / 200. Only 128 halves onto the 8px grid
     (88/2 = 44, 200/2 = 100, both off-grid). We use 96 / 128 / 192 so the trick
     actually holds. */
  --rhythm-s:  96px;   --pad-s: 48px;
  --rhythm-m: 128px;   --pad-m: 64px;
  --rhythm-l: 192px;   --pad-l: 96px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --margin:  64px;     /* outside margin, desktop */
  --gutter:  24px;     /* space between columns */
  --columns: 12;

  /* ---------- TYPE SCALE · four sizes plus one display ----------
     The cap is four (label · body · lede · heading). Display is the deliberate fifth,
     because the hero is the whole brand. Anything beyond these five has to argue
     for itself against this list. This is the cure for the 39-combo problem. */
  --text-label:   12px;
  --text-body:    16px;
  --text-lede:    18px;
  --text-heading: clamp(32px, 4vw, 48px);
  --text-display: clamp(48px, 9vw, 120px);

  /* line height: titles read as a solid block, body breathes */
  --leading-tight: 1;      /* titles, 100% */
  --leading-body:  1.4;    /* body, 140% */

  /* tracking: -2% is the default that makes Inter Tight look expensive, not cheap */
  --tracking:         -0.02em;
  --tracking-display: -0.03em;
  --tracking-label:    0.18em;   /* small caps labels want the opposite */

  /* weights: SemiBold, never Bold. Narrower weight gap reads more harmonious. */
  --weight-body: 400;
  --weight-mid:  500;
  --weight-bold: 600;

  /* ---------- COLOR ----------
     Measured against cream #F2EBDC on 2026-07-30. Ratios are WCAG, calculated.
     Text-legal:      espresso 13.40 · indigo 8.88 · teal 7.68 · sage-ink 5.72
     24px-and-up only: ochre 3.88 · rose-deep 3.02
     Decorative only:  rose 2.00  <- never a label, link or caption */
  --cream:#F2EBDC;
  --cream-deep:#EADFC7;
  --paper:#EFE7D5;
  --espresso:#2A201A;
  --espresso-soft:#5B4B3E;
  --rose:#E68FA8;          /* DECORATIVE ONLY · 2.00:1 · the signature fish */
  --rose-deep:#C76A89;     /* 24px+ only · 3.02:1 */
  --indigo:#26415C;        /* text-legal · 8.88:1 */
  --teal:#1F4E5C;          /* text-legal · 7.68:1 */
  --ochre:#9B6B3D;         /* 24px+ only · 3.88:1 */

  /* ---------- MOTION · two curves, locked ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.33,0,0,1);
}

/* ---------- BREAKPOINTS ----------
   Design widths are 1440 / 810 / 390. The query boundaries sit above each design
   width so a 390 phone and an 810 tablet each land inside their own band. */
@media (max-width: 1023px){         /* tablet */
  :root{ --margin:32px; --gutter:24px; --columns:6; }
}
@media (max-width: 639px){          /* phone */
  :root{ --margin:24px; --gutter:24px; --columns:4; }
}


/* =========================================================
   LAYOUT PRIMITIVES
   Two of them. Every section uses these. A section that wants a different
   width says `grid-column: span N` — it does NOT get its own margin.
   ========================================================= */

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--margin);
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(var(--columns), 1fr);
  gap:var(--gutter);
}

/* span helpers, desktop. Below the tablet breakpoint the column count drops,
   so spans clamp themselves rather than overflowing. */
.span-2{grid-column:span 2}   .span-3{grid-column:span 3}
.span-4{grid-column:span 4}   .span-5{grid-column:span 5}
.span-6{grid-column:span 6}   .span-7{grid-column:span 7}
.span-8{grid-column:span 8}   .span-9{grid-column:span 9}
.span-12{grid-column:1 / -1}

@media (max-width: 1023px){
  .span-7,.span-8,.span-9{grid-column:1 / -1}
  .span-5,.span-6{grid-column:span 6}
  .span-3,.span-4{grid-column:span 3}
}
@media (max-width: 639px){
  [class*="span-"]{grid-column:1 / -1}
}

/* the section rhythm, applied as half-padding */
.section   { padding-block:var(--pad-m); }
.section--s{ padding-block:var(--pad-s); }
.section--l{ padding-block:var(--pad-l); }

/* type primitives, so no element sets a raw font-size */
.t-display{font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);}
.t-heading{font-size:var(--text-heading);line-height:var(--leading-tight);letter-spacing:var(--tracking);}
.t-lede   {font-size:var(--text-lede);   line-height:var(--leading-body); letter-spacing:var(--tracking);}
.t-body   {font-size:var(--text-body);   line-height:var(--leading-body); letter-spacing:var(--tracking);}
.t-label  {font-size:var(--text-label);  line-height:var(--leading-body); letter-spacing:var(--tracking-label);text-transform:uppercase;}