/* ==========================================================================
   nails by anh — brand tokens
   Drop this in first, before any other stylesheet. Everything else reads
   from these variables so the brand can be corrected in one place.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
  /* --- core -------------------------------------------------------------
     pink, ink and white are the brand. ivory is the ground it all sits on. */
  --pink:            #F4A5AB;
  --ink:             #111111;
  --white:           #FFFFFF;
  --ivory:           #FCF7EA;

  /* --- accents ----------------------------------------------------------
     taken from the paintbrushes in the logo. seasoning, never the meal.
     one accent per view. pink always leads. */
  --sky:             #A2C3E4;
  --butter:          #F9E292;
  --lilac:           #CFAAD3;

  /* --- pink scale ------------------------------------------------------- */
  --pink-50:         #FDF3F4;
  --pink-100:        #FBE4E6;
  --pink-200:        #F8CDD1;
  --pink-300:        #F4A5AB;   /* the brand pink */
  --pink-400:        #EC8A92;
  --pink-500:        #DE6C76;
  --pink-600:        #C7525E;
  --pink-700:        #A63F4A;   /* text and links on ivory — 5.7:1 */
  --pink-800:        #7E2F38;
  --pink-900:        #562127;

  /* --- accent scales ---------------------------------------------------- */
  --sky-100:         #E4EEF8;
  --sky-200:         #C8DBEF;
  --sky-300:         #A2C3E4;
  --sky-500:         #5E93C7;
  --sky-700:         #2F6394;

  --butter-100:      #FDF6DD;
  --butter-200:      #FCEEBF;
  --butter-300:      #F9E292;
  --butter-500:      #E9C458;
  --butter-700:      #93731A;

  --lilac-100:       #F1E8F2;
  --lilac-200:       #E3D2E6;
  --lilac-300:       #CFAAD3;
  --lilac-500:       #AE72B5;
  --lilac-700:       #7A4380;

  /* --- ivory + ink scales ----------------------------------------------- */
  --ivory-0:         #FCF7EA;   /* page */
  --ivory-100:       #F9F1DE;
  --ivory-200:       #F5ECD1;   /* the original logo cream — banding only */
  --ivory-300:       #EBDDBB;   /* hairlines */

  --ink-900:         #111111;
  --ink-800:         #2E2A26;   /* body copy */
  --ink-600:         #6E675C;   /* captions, meta */
  --ink-400:         #9C9488;   /* disabled, watermarks */

  /* --- semantic --------------------------------------------------------- */
  --surface:            var(--ivory-0);
  --surface-raised:     var(--white);
  --surface-sunken:     var(--ivory-200);
  --surface-accent:     var(--pink-300);
  --surface-inverse:    var(--ink-900);

  --text:               var(--ink-800);
  --text-strong:        var(--ink-900);
  --text-muted:         var(--ink-600);
  --text-on-pink:       var(--ink-900);   /* never white — see rules */
  --text-on-inverse:    var(--ivory-0);

  --border:             var(--ivory-300);
  --keyline:            var(--ink-900);   /* the miffy outline */
  --link:               var(--pink-700);
  --link-hover:         var(--pink-800);
  --focus:              var(--ink-900);

  /* --- type -------------------------------------------------------------
     one family, on purpose. dick bruna set miffy in a single clean
     geometric sans, all lowercase, with no decorative flourishes.
     the luxury comes from spacing and restraint, not from letterforms. */
  --font: 'Quicksand', 'Varela Round', 'Avenir Next Rounded', 'Century Gothic',
          ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;   /* headings */
  --w-bold:      700;   /* the wordmark, and only the wordmark */

  /* type scale — 1.25 major third, 16px base */
  --t-xs:      0.75rem;   /* 12 — legal, footnotes */
  --t-sm:      0.875rem;  /* 14 — captions, meta, labels */
  --t-base:    1rem;      /* 16 — body */
  --t-lg:      1.25rem;   /* 20 — lead paragraph */
  --t-xl:      1.5625rem; /* 25 — h3 */
  --t-2xl:     1.953rem;  /* 31 — h2 */
  --t-3xl:     2.441rem;  /* 39 — h1 */
  --t-4xl:     3.815rem;  /* 61 — hero */
  --t-5xl:     5.96rem;   /* 95 — display, one word only */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-body:   1.65;

  --track-display:  -0.01em;  /* quicksand is already open; tighten large sizes */
  --track-body:      0em;
  --track-label:     0.14em;  /* uppercase labels only */

  /* --- space ------------------------------------------------------------
     4px base. use these, not arbitrary numbers. */
  --s-1:   0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;   --s-4:  1rem;
  --s-5:   1.5rem;    --s-6:  2rem;      --s-7:  3rem;      --s-8:  4rem;
  --s-9:   6rem;      --s-10: 8rem;

  /* --- shape ------------------------------------------------------------
     miffy has no shadows and no gradients. depth comes from the black
     keyline and from flat colour sitting next to flat colour. */
  --radius-sm:   6px;
  --radius:      14px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --stroke:      2px;     /* standard keyline */
  --stroke-bold: 3px;     /* keyline on large surfaces */
  --shadow:      none;

  --measure:     65ch;    /* max line length for running text */
  --page:        1200px;  /* max content width */
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */
body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: var(--w-semibold);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  text-transform: lowercase;   /* the miffy rule */
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p  { max-width: var(--measure); }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: var(--stroke) solid var(--focus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   components
   -------------------------------------------------------------------------- */

/* the signature button: brand pink, black keyline, black label.
   9.7:1 contrast. never white text on pink. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--pink-300);
  color: var(--text-on-pink);
  border: var(--stroke) solid var(--keyline);
  border-radius: var(--radius-pill);
  font-weight: var(--w-semibold);
  text-transform: lowercase;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover  { background: var(--pink-400); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--quiet {
  background: transparent;
  color: var(--text-strong);
}
.btn--ink {
  background: var(--ink-900); color: var(--ivory-0); border-color: var(--ink-900);
}

/* card: white on ivory, keyline optional. use the keyline sparingly —
   if everything is outlined, nothing reads as the logo. */
.card {
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.card--keyline { border: var(--stroke) solid var(--keyline); }

/* uppercase micro-label — the ONE place capitals are allowed */
.label {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* accent chip */
.chip {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--butter-300);
  color: var(--ink-900);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

/* pattern grounds — tile files live in /patterns */
.pattern-bunny { background: var(--ivory-0) url("../patterns/pattern-bunny-ivory.svg") repeat; background-size: 300px; }
.pattern-x     { background: var(--ivory-0) url("../patterns/pattern-x-ivory.svg") repeat;     background-size: 220px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}