/* ============================================================================
   brand.css — the ONLY file to edit when the branding changes.
   ============================================================================

   Every colour, typeface, weight, radius and rhythm value on this site is
   declared here and referenced by token everywhere else. Nothing in site.css
   or in any page hard-codes a brand value.

   That means a rebrand is an edit to this file. Change --brand and the accent
   moves everywhere at once: links, rules, buttons, focus rings, the lot. Change
   --radius from 0 to 8px and every edge on the site softens together.

   The identity is taken from the existing logo, sampled from the artwork rather
   than guessed: #D8125B magenta, with near-black type.

   TWO SURFACES
   The site alternates dark bookends (header, hero, footer) against warm paper
   in between. So there are two colour contexts, and both need to stay legible:

     light context -> --ink / --ink-2 / --ink-3 on --paper / --paper-2
     dark context  -> --dark-ink / --dark-ink-2 on --dark / --dark-2

   The accent has a separate value per context. --brand is tuned for white and
   is too dark to sit on near-black, so --brand-on-dark is a lifted version used
   automatically inside .dark. If you change one, change the other.

   THE LOGO
   The supplied artwork was black and magenta baked onto an opaque white
   rectangle, with no transparency at all. That box is visible against warm
   paper and unusable on dark, so two variants were cut from it by solving for
   what had been composited over white:

     logo.png           dark wordmark, transparent   -> light backgrounds
     logo-knockout.png  white wordmark, transparent  -> dark backgrounds
     logo-original.png  the untouched supplied file, kept for reference

   Replacing the wordmark means replacing both variants, then checking
   --logo-height still suits its proportions.
   ------------------------------------------------------------------------- */

:root {

  /* --- Identity ---------------------------------------------------------- */
  --brand:          #D8125B;   /* sampled from the logo mark */
  --brand-deep:     #A60D45;   /* hovers, pressed states */
  --brand-tint:     #FCEDF3;   /* quiet fills that still read as brand */
  --brand-on-dark:  #FF4E86;   /* lifted, for accents inside .dark */

  --logo-height:    38px;

  /* --- Light context: ink and paper -------------------------------------- */
  /* Warm off-white rather than pure #FFF. Large areas of pure white read cold,
     and the stock-template look is exactly the register this studio is
     leaving behind. */
  --paper:        #FAF9F7;
  --paper-2:      #F1EFEA;   /* alternating section bands */
  --paper-3:      #E7E4DD;   /* wells, quiet cards */
  --line:         #E2DED6;
  --line-strong:  #CBC5BA;

  --ink:          #16171B;   /* headings */
  --ink-2:        #4C4F56;   /* body text */
  --ink-3:        #6A6D74;   /* captions, meta, muted. Darkened from #7C7F86,
                                  which measured 3.49:1 on --paper-2 and failed AA. */

  /* --- Dark context ------------------------------------------------------ */
  --dark:         #14151A;
  --dark-2:       #1C1E24;   /* raised panels on dark */
  --dark-ink:     #F7F5F1;
  --dark-ink-2:   #A9ACB4;
  --dark-ink-3:   #7E828B;
  --dark-line:    rgba(247, 245, 241, 0.14);

  /* --- Type -------------------------------------------------------------- */
  /* System stack on purpose: no third-party requests, nothing blocking
     render, and no external dependency on a marketing surface. */
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                  "Liberation Mono", Menlo, monospace;

  --weight-display: 800;
  --weight-bold:    700;
  --weight-body:    400;

  --track-display: -0.028em;  /* tight, to match the logo's set */
  --track-eyebrow:  0.18em;

  /* Fluid type scale. Each step clamps between a phone and a desktop size. */
  --step-eyebrow: 0.78rem;
  --step-small:   0.9rem;
  --step-body:    clamp(1rem, 0.3vw + 0.94rem, 1.09rem);
  --step-lead:    clamp(1.13rem, 0.8vw + 1rem, 1.4rem);
  --step-h3:      clamp(1.2rem, 0.9vw + 1.05rem, 1.5rem);
  --step-h2:      clamp(1.7rem, 2.6vw + 1.1rem, 2.7rem);
  --step-h1:      clamp(2.4rem, 5.4vw + 1.1rem, 4.6rem);

  --leading-tight: 1.06;
  --leading-body:  1.65;

  /* --- Shape ------------------------------------------------------------- */
  /* 0 by design: the logo is hard-edged geometry and the site follows it.
     Raise this one value to soften every card, button and input at once. */
  --radius:       0px;
  --border:       1px;
  --rule-accent:  3px;       /* the magenta rules and card tops */

  /* --- Rhythm ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --section-y: clamp(56px, 8vw, 104px);

  /* --- Measure and width ------------------------------------------------- */
  --wrap:        1120px;
  --wrap-narrow: 760px;
  --measure:     68ch;       /* reading width for body copy */

  /* --- Print ------------------------------------------------------------- */
  --print-ink: #000000;      /* true black on paper, whatever the screen does */

  /* --- Motion ------------------------------------------------------------ */
  --ease:     cubic-bezier(.2, .7, .3, 1);
  --duration: 140ms;
}