/* ============================================================
   SEAMOSS PURE — Design tokens
   v1.0 · 2026-07-23

   Single source of truth for the visual system.
   Tailwind v4: import this file; every token becomes a utility.

   Rule: components reference SEMANTIC tokens (--color-ink,
   --color-brand), never raw palette values (--ps-olive).
   Swapping a palette value must never require touching a component.
   ============================================================ */

@import "tailwindcss";

@theme {
  /* ----------------------------------------------------------
     PALETTE — raw values. Do not use these directly in markup.
     ---------------------------------------------------------- */
  --color-ps-cream:      #F5F1E8;  /* warm off-white — the brand's air */
  --color-ps-stone:      #D8D3C4;  /* muted sand — raised surfaces */
  --color-ps-sage:       #8A9B6E;  /* light green — DECORATIVE ONLY */
  --color-ps-olive:      #55603F;  /* deep olive — the brand colour */
  --color-ps-olive-deep: #3E4730;  /* olive, darkened — hover / pressed */
  --color-ps-carbon:     #2B2B28;  /* near-black — text */
  --color-ps-slate:      #6B6A60;  /* warm grey — secondary text */

  /* ----------------------------------------------------------
     SEMANTIC COLOUR — use these.
     Every pair below is contrast-audited. See README.md.
     ---------------------------------------------------------- */
  --color-surface:          #F5F1E8;  /* page background */
  --color-surface-raised:   #D8D3C4;  /* cards, wells, input fields */
  --color-surface-inverse:  #2B2B28;  /* dark sections, footer */
  --color-surface-brand:    #55603F;  /* brand-filled blocks */

  --color-ink:              #2B2B28;  /* body text        — 12.60:1 on surface */
  --color-ink-muted:        #6B6A60;  /* secondary text   —  4.83:1 on surface */
  --color-ink-brand:        #55603F;  /* headings, links  —  5.95:1 on surface */
  --color-ink-inverse:      #F5F1E8;  /* text on dark     — 12.60:1 on inverse */

  --color-border:           #D8D3C4;  /* hairlines, dividers */
  --color-border-strong:    #6B6A60;  /* input borders, focus outlines */

  --color-action:           #55603F;  /* primary button fill */
  --color-action-hover:     #3E4730;  /* primary button hover */
  --color-on-action:        #F5F1E8;  /* text on primary  —  5.95:1 */

  --color-focus:            #3E4730;  /* focus ring */
  --color-danger:           #8C3A2B;  /* errors — muted brick, not fire-engine red */

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Display  = Cormorant Garamond (same family as the wordmark)
     Body/UI  = Montserrat
     ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

  /* Fluid scale. Display sizes only — Cormorant is too delicate small. */
  --text-display:   clamp(2.75rem, 6vw,   4.5rem);
  --text-h1:        clamp(2.125rem, 4.5vw, 3.25rem);
  --text-h2:        clamp(1.625rem, 3vw,   2.25rem);
  --text-h3:        1.5rem;
  --text-lead:      1.125rem;
  --text-body:      1rem;      /* never below this on mobile */
  --text-small:     0.875rem;
  --text-eyebrow:   0.75rem;

  --leading-display: 1.08;
  --leading-heading: 1.18;
  --leading-body:    1.65;

  --tracking-display: -0.015em;  /* large serif tightens slightly */
  --tracking-body:     0em;
  --tracking-eyebrow:  0.18em;   /* the brand's signature wide caps */
  --tracking-wordmark: 0.30em;   /* matches the logo lockup */

  /* ----------------------------------------------------------
     SPACE — 4px base
     ---------------------------------------------------------- */
  --spacing: 0.25rem;

  /* ----------------------------------------------------------
     RADIUS — apothecary is square. Curves are the exception.
     ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     ELEVATION — this brand separates with hairlines, not shadows.
     Only overlays get a shadow.
     ---------------------------------------------------------- */
  --shadow-overlay: 0 8px 32px rgb(43 43 40 / 0.12);

  /* ----------------------------------------------------------
     MOTION — restrained. Nothing bounces.
     ---------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  html {
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;              /* Light — the elegance is in the thinness */
    color: var(--color-ink-brand);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-heading);
  }

  p { line-height: var(--leading-body); max-width: 68ch; }

  /* Eyebrow / label — the wide-caps device carried over from the logo */
  .eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }

  /* Focus: always visible, never removed */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}