/* ==========================================================================
   Saint Society Scrubs - Design Tokens
   --------------------------------------------------------------------------
   Single source of truth. Every colour, type step, spacing unit and easing
   curve in the build resolves back to this file. A rebrand is an edit here,
   never a find and replace across templates.

   Ported verbatim from the React build. The only change is that the Tailwind
   `@theme { }` wrapper became a plain `:root { }`, because there is no
   Tailwind here. Every custom property name is unchanged, deliberately, so
   the two builds stay diff-able against each other.

   Colour names come from the client brand sheet: Black Onyx, Warm Taupe,
   Bone, Espresso, Dark Cherry, with a metallic gold accent.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Ground
     Not pure black. A warm near black so the accent sits in the same light
     as the surface instead of floating on a void.
     --------------------------------------------------------------------- */
  --color-onyx: #0b0a09;
  --color-onyx-raised: #14110f;
  --color-onyx-sunken: #060505;
  --color-espresso: #2a201a;
  --color-espresso-deep: #1a1310;

  /* Warm neutrals, taken from the product colourways */
  --color-bone: #e8e1d8;
  --color-bone-dim: #c9c0b4;
  --color-taupe: #8a7361;
  --color-taupe-light: #b3a08c;
  --color-cherry: #4a1420;
  --color-cherry-bright: #6e1f2e;

  /* ---------------------------------------------------------------------
     Accent ramp (historically the gold ramp)
     A rich accent is a light response, not a single hex. Multiple stops so
     it reads as a surface catching light rather than a flat fill.

     NOTE ON NAMING: the brand accent is BURGUNDY, not gold. The token names
     are unchanged from the original gold ramp so the rebrand stayed a
     one-file change. The literal gold is preserved separately below
     (--logo-gold-*) and used only by the logo lockup.
     --------------------------------------------------------------------- */
  --color-gold-deep: #340e10;
  /* Flat accent for small text (eyebrows, breadcrumbs). The darkest red that
     still clears WCAG AA (4.5:1) for 11px text on the raised near black
     ground. It cannot go darker without failing that rule. */
  --color-gold: #d15751;
  --color-gold-light: #e78a80;
  --color-gold-highlight: #e58a80;
  /* Client requested #340e10 for the deep wine. It is near black, so a solid
     fill in it needs a hairline to stay visible as a button. */
  --color-accent-solid: #340e10;
  --color-accent-solid-hover: #4c1417;

  /* Logo gold. The one place the original metallic gold survives: the SS
     wordmark and monogram. Referenced only by --gradient-foil-gold. */
  --logo-gold-deep: #8a6a2f;
  --logo-gold: #c9a961;
  --logo-gold-light: #e3cd93;
  --logo-gold-highlight: #f5e9c8;

  /* Text. The accent is decorative and large only. Body copy is warm off
     white, which clears WCAG AA against the onyx ground at every size. */
  --color-ink: #f0ebe4;
  --color-ink-muted: #a49c92;
  /* ink-faint is for tiny legal print. Kept just above WCAG AA against the
     darkest ground (onyx-sunken) rather than pushed darker. */
  --color-ink-faint: #8a8276;

  /* Lines. Luxury sites use hairlines, not borders. */
  --color-rule: rgba(232, 225, 216, 0.14);
  --color-rule-strong: rgba(232, 225, 216, 0.28);
  --color-rule-gold: rgba(160, 34, 40, 0.55);

  /* ---------------------------------------------------------------------
     Type
     --------------------------------------------------------------------- */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Fluid display scale. Clamps mean no breakpoint jumps in headline size. */
  --text-hero: clamp(2.75rem, 7vw, 6.5rem);
  --text-display: clamp(2.25rem, 5vw, 4.25rem);
  --text-title: clamp(1.75rem, 3.2vw, 2.75rem);
  --text-heading: clamp(1.25rem, 2vw, 1.75rem);
  --text-lead: clamp(1rem, 1.3vw, 1.1875rem);
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-eyebrow: 0.6875rem;

  /* ---------------------------------------------------------------------
     Spacing rhythm
     Sections hold one vertical value throughout a page. Inconsistent section
     padding is the single loudest tell of a template build.
     --------------------------------------------------------------------- */
  --spacing-section: clamp(5rem, 11vw, 11.25rem);
  --spacing-section-tight: clamp(3.5rem, 7vw, 7rem);
  --spacing-gutter: clamp(1.25rem, 4vw, 3.75rem);
  --spacing-shell: 96rem;
  --spacing-readable: 40rem;

  /* ---------------------------------------------------------------------
     Motion
     Long, eased, unhurried. Luxury motion never snaps.
     --------------------------------------------------------------------- */
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drape: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --duration-quick: 320ms;
  --duration-base: 620ms;
  --duration-slow: 1100ms;
  --duration-curtain: 1600ms;

  /* Radii. Almost none. Sharp corners read as tailored. */
  --radius-none: 0px;
  --radius-hair: 1px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Composite tokens
     --------------------------------------------------------------------- */

  /* The accent sheen. Multi stop, angled, so it catches light like a rich
     lacquer rather than a flat fill. Hardcoded wine stops rather than the
     flat accent token, so large foil headlines read as deep burgundy with a
     soft sheen. The sheen peaks at a mid wine, never a pastel pink. */
  --gradient-foil: linear-gradient(
    100deg,
    #340e10 0%,
    #6d151a 24%,
    #a83036 44%,
    #7a1f26 62%,
    #451114 82%,
    #340e10 100%
  );

  /* The metallic gold sheen, preserved for the logo only. */
  --gradient-foil-gold: linear-gradient(
    100deg,
    var(--logo-gold-deep) 0%,
    var(--logo-gold) 22%,
    var(--logo-gold-highlight) 42%,
    var(--logo-gold-light) 58%,
    var(--logo-gold) 76%,
    var(--logo-gold-deep) 100%
  );

  /* Scrim for text sitting over photography */
  --gradient-scrim: linear-gradient(
    to top,
    rgba(6, 5, 5, 0.88) 0%,
    rgba(6, 5, 5, 0.55) 32%,
    rgba(6, 5, 5, 0.12) 64%,
    rgba(6, 5, 5, 0) 100%
  );

  --gradient-scrim-soft: linear-gradient(
    to top,
    rgba(6, 5, 5, 0.7) 0%,
    rgba(6, 5, 5, 0.15) 55%,
    rgba(6, 5, 5, 0) 100%
  );

  /* Tracking presets. Uppercase at small sizes needs air or it reads cheap. */
  --tracking-eyebrow: 0.34em;
  --tracking-wordmark: 0.28em;
  --tracking-nav: 0.16em;
  --tracking-display: -0.015em;

  /* Header height, referenced by scroll offsets and sticky positions */
  --header-h: 76px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
  }
}