/* ============================================================
   Sofia Gomez — Portfolio v2 · THEME
   Single source of truth for the palette, typography and measure.

   Loaded by every v2 page, including index.html, which otherwise
   carries its own inline CSS. Before this file existed the palette
   lived in two places — style.css and index.html — and the two had
   already drifted into different navigations and different page
   widths. Change a colour here and it changes everywhere.
   ============================================================ */
:root {
  --bg:          #EDF1F2;   /* flat water under overcast light    */
  --bg-elev:     #FFFFFF;   /* raised card. Pure white so the many
                               assets with a baked-in white ground
                               sit in their frame seamlessly.       */
  --surface:     #E4EAEC;   /* the journey's "one step deeper"     */
  --plate:       #FFFFFF;   /* paper under artwork. Theme-invariant
                               on purpose — see the .case-image img
                               rule for why.                        */
  --line-strong: #6E8892;   /* boundary of an interactive control,
                               where WCAG 1.4.11 wants 3:1 (3.30)  */
  --ink:         #0F1E25;   /* wet slate                          */
  --ink-soft:    #2B383D;   /* annotation ink, quieter than ink   */
  --muted:       #455B65;   /* labels, dates, secondary prose     */
  --line:        #CBD6DA;   /* hairlines and tick scales          */
  --accent:      #0A5261;   /* deep petrol — depth, not decoration */
  --accent-soft: #1E6B7C;   /* focus rings, hovers (5.35:1 on bg) */
  --on-accent:   #FFFFFF;

  /* journey aliases */
  --text:    var(--ink);
  --annot:   var(--ink-soft);
  --rule:    var(--line);

  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-util: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One measure for the whole site. The home page set these; the case
     pages used --container: 1180px with a clamped padding, which put the
     wordmark 16px further left than on the home page. Same values now. */
  --wrap:      clamp(676px, 88vw, 1100px);
  --gutter:    24px;
  --container: var(--wrap);
  --radius: 14px;
  /* the stroke: quick catch, long recovery */
  --ease: cubic-bezier(0.18, 0.72, 0.22, 1);
}

/* Explicit choice wins in both directions. */
:root[data-theme="dark"] {
  --bg:          #0B1418;
  --bg-elev:     #131F25;
  --surface:     #131F25;
  --line-strong: #4E7280;
  --ink:         #E8EFF1;
  --ink-soft:    #BECED2;
  --muted:       #9EB1B9;
  --line:        #22343C;
  --accent:      #6FC7D6;
  --accent-soft: #4A98A8;
  --on-accent:   #0B1418;
}

/* Default "system" setting stamps no attribute — only this matches. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0B1418;
    --bg-elev:     #131F25;
    --surface:     #131F25;
    --line-strong: #4E7280;
    --ink:         #E8EFF1;
    --ink-soft:    #BECED2;
    --muted:       #9EB1B9;
    --line:        #22343C;
    --accent:      #6FC7D6;
    --accent-soft: #4A98A8;
    --on-accent:   #0B1418;
  }
}


/* Narrow screens get a tighter gutter. Lived in index.html's inline CSS, so
   the case pages kept the wide one on a phone. */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
}

/* Print / PDF. Flatten to ink on white; the accent survives as the one colour. */
@media print {
  :root {
    --bg: #fff; --bg-elev: #fff; --plate: #fff;
    --ink: #111; --ink-soft: #333; --muted: #666;
    --line: #ccc; --line-strong: #999; --accent: #0A5261;
  }
}