/* ============================================================
   MOSAEK — Design Tokens
   Palette source: mosaek-brand-colors.md (authoritative)
   Layout language: editorial-grid-magazine (ui-ux-pro-max)
   ============================================================ */

:root {
  /* ---- Brand (from logo) ---- */
  --brand-dark:       #4D282F;   /* burgundy  */
  --brand-light:      #CBB4A1;   /* sand      */

  /* ---- Extended palette ---- */
  --page-base:        #F6F1EA;   /* warm off-white page ground */
  --ink:              #241016;   /* body copy on light         */
  --accent:           #7E5D23;   /* bronze — interactive. Darkened twice: the
                                    brand doc's #8C6A2E measures 4.43:1 on Page
                                    Base, and #866426 still measured only
                                    4.35:1 on Chrome Surface. This reads 4.84:1
                                    there and 5.16:1 on Page Base. */
  --divider:          #D8CFC4;   /* hairline rules             */
  --surface-alt:      #3A1E23;   /* deeper burgundy, layering  */

  /* ---- Derived / semantic ---- */
  --ink-muted:        #5C4148;   /* secondary copy on light (AA at 16px+) */
  --on-dark:          #E8DDD2;   /* body copy on burgundy — lightened from
                                    sand so long-form passes AA, per the
                                    contrast note in the brand doc */
  --on-dark-muted:    #B9A18F;
  --accent-on-dark:   #C99A4A;   /* bronze lifted for dark surfaces. The brand
                                    doc's #8C6A2E measures only 2.54:1 on
                                    burgundy — unusable. This reads 4.94:1. */
  --divider-on-dark:  rgba(203,180,161,.24);
  --focus:            #866426;

  /* ---- Typography ------------------------------------------
     NOTE: --font-display / --font-body are the ONLY places the
     typeface is declared. Swapping in the final brand face
     (Neue Montreal, or its licensed substitute) is a one-line
     change here — nothing else in the stylesheet references a
     family name directly.
     ---------------------------------------------------------- */
  --font-display: 'Neue Montreal', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Neue Montreal', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — 375px floor, 1440px ceiling.
     Tightened to match the reference: it runs noticeably smaller and
     tighter than a default marketing scale, which is what makes it read
     as editorial rather than as a landing page. */
  --step-label: 0.625rem;                               /* 10px  nav + labels */
  --step--1:    clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0:     clamp(0.9375rem, 0.92rem + 0.12vw, 1rem);
  --step-1:     clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-2:     clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
  --step-3:     clamp(1.3125rem, 1.16rem + 0.66vw, 1.75rem);
  --step-4:     clamp(1.625rem, 1.3rem + 1.35vw, 2.5rem);
  --step-5:     clamp(1.875rem, 1.4rem + 2vw, 3.125rem);
  --step-6:     clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem);  /* hero */

  /* Headings sit tight; body stays comfortable. */
  --lh-tight:   0.98;
  --lh-snug:    1.06;
  --lh-body:    1.5;
  --lh-loose:   1.6;

  --track-tight:  -0.032em;
  --track-normal: -0.011em;
  --track-label:  0.14em;

  /* ---- Spacing (density 4/10 — standard marketing rhythm) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Section rhythm */
  --section-y: clamp(3rem, 1.6rem + 5.4vw, 6rem);   /* tightened: the gap from
                                                      heading to the next colour
                                                      change was reading as a hole */

  /* ---- Layout ---- */
  --wrap-max:  90rem;   /* 1440 */
  --measure:   68ch;
  --gutter:    clamp(1.25rem, 0.6rem + 2.8vw, 4rem);

  /* ---- Motion (tier: Standard, 5/10) ---- */
  --dur-fast:  160ms;
  --dur-base:  260ms;
  --dur-slow:  520ms;
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);

  /* ---- Radius scale ----
     The reference leans hard on soft rectangles: pills for chrome,
     generously rounded frames for media. --radius-media is the one
     that carries the look. */
  --radius-sm:    4px;
  --radius-md:    10px;
  --radius-pill:  10px;   /* chrome corners: less round than the media frames */
  --chrome-h:     46px;   /* the brand pill */
  --chrome-nav-h: 36px;   /* nav + contact: subordinate to the mark */
  --radius-media: 22px;
  --radius-section: 34px;   /* corner curve where a background colour changes */
  --radius-round: 999px;

  /* ---- Glass chrome ---- */
  --chrome-surface: #EDE5DA;   /* one step off Page Base — the nav group
                                  reads as a distinct plate, warm not grey */
  /* More glass: less tint, more blur, a touch more saturation so what shows
     through stays warm rather than grey. Text over these is re-measured. */
  --glass-light: color-mix(in srgb, var(--chrome-surface) 64%, transparent);
  --glass-dark:  color-mix(in srgb, var(--brand-dark) 46%, transparent);
  --glass-blur:  blur(26px) saturate(1.75);
  /* No top-edge highlight: alongside the 1px border it read as a doubled,
     thicker top edge rather than as glass. The blur and the drop do the work. */

  --z-nav: 100;
}