/* ============================================================
   NEST HOUSE — design tokens
   Source: Nest Productions rebrand by Foundry (madebyfoundry.co.uk)
   Sam's house aesthetic. Import this in any app to inherit the system.
   Two colours only, fully reversible, flat (no gradients / no shadows),
   heavy WIDE grotesque set huge + tight, cropped to bleed off the edge.
   ============================================================ */
:root {
  /* --- core palette (two colours + white) --- */
  --nest-blue: #02008B;        /* deep ultramarine */
  --nest-pink: #FB54E5;        /* vivid magenta */
  --nest-white: #FFFFFF;

  /* --- working tints (derived; keep flat) --- */
  --nest-blue-ink: #04026B;    /* darker blue — device frame, deepest fields */
  --nest-blue-card: #211CC4;   /* lighter blue — the card layer */
  --nest-blue-card-hi: #322CDA;/* card hover */
  --nest-pink-soft: #FF8BEE;   /* soft pink — safe small text on blue (AA/AAA) */
  --nest-pink-dim: rgba(251, 84, 229, .4); /* track / muted fills */

  /* rgb channels for alpha use */
  --nest-blue-rgb: 2, 0, 139;
  --nest-pink-rgb: 251, 84, 229;

  /* --- section accents (extends the two-colour base; one signature hue per context) ---
     All read AAA on --nest-blue. Use sparingly: lit nav item, section eyebrow, section
     markers/bars. The blue+pink foundation still carries the brand. */
  --nest-amber: #FFC24A;   /* budgeting / spending / money-in-motion   (9.5:1 on blue) */
  --nest-green: #22E0A3;   /* investments / goals / growth              (8.9:1 on blue) */
  --nest-cyan:  #38D6EA;   /* insights / analysis / "what I'm noticing" (8.7:1 on blue) */

  /* semantic section aliases — apps map their screens to these */
  --sec-today:   var(--nest-pink);
  --sec-budget:  var(--nest-amber);
  --sec-invest:  var(--nest-green);
  --sec-insight: var(--nest-cyan);

  /* --- type --- */
  --nest-display: 'Archivo Black', system-ui, sans-serif; /* heavy wide grotesque, ALWAYS caps */
  --nest-text: 'Archivo', system-ui, sans-serif;          /* body, 400–700 */
}

/* Load with:
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet"> */

/* ---------- principle utilities ---------- */
.nest-flat        { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.nest-on-blue     { background: var(--nest-blue); color: var(--nest-pink); }
.nest-on-pink     { background: var(--nest-pink); color: var(--nest-blue); }   /* reversible */
.nest-on-white    { background: var(--nest-white); color: var(--nest-blue); }

.nest-display     { font-family: var(--nest-display); text-transform: uppercase; letter-spacing: -.01em; line-height: .86; }
.nest-eyebrow     { font: 700 10px var(--nest-text); letter-spacing: .18em; text-transform: uppercase; }

/* Oversized headline cropped to the container edge (the "tote bag" move).
   Parent must have overflow: hidden. */
.nest-bleed       { font-family: var(--nest-display); text-transform: uppercase; line-height: .82;
                    letter-spacing: -.02em; white-space: nowrap; margin: 0 -.06em; }

/* Accessible over-limit / alert marker: pink pill, blue text (5.45:1, AA).
   Use instead of small pink text on the card layer (that combo is only ~3.7:1). */
.nest-alert       { background: var(--nest-pink); color: var(--nest-blue);
                    font: 700 10px var(--nest-text); letter-spacing: .1em; text-transform: uppercase;
                    padding: 4px 8px; white-space: nowrap; }