/* ==========================================================================
   Lara Benefits — Design Tokens
   Single source of truth. Do not hardcode a colour or size anywhere else.
   Values match the printed brand sheet (Identity v1, Route 01 "The Seal").
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --c-ink:            #15171A;  /* primary. type, rules, dark surfaces      */
  --c-ink-deep:       #101215;  /* outer edge of the field gradient         */
  --c-ink-lift:       #2A2E33;  /* field highlight                          */
  --c-surface-dark:   #1C1F23;  /* cards on dark. one step up from ink      */
  --c-bone:           #F3F2EF;  /* paper. default page background           */
  --c-white:          #FFFFFF;  /* panels that need to read as inset paper  */
  --c-pewter:         #B7B4AC;  /* foil stamp, reverse type                 */
  --c-pewter-hi:      #DAD7CF;  /* reverse headings                         */
  --c-pine:           #26332C;  /* accent only. never body type             */

  /* Derived greys — do not invent new ones */
  --c-body:           #4A4E55;  /* body copy on bone                        */
  --c-muted:          #8A8D93;  /* labels, captions, meta                   */
  --c-body-dark:      #7E7B75;  /* body copy on the field                   */
  --c-muted-dark:     #6E6B65;  /* labels on the field                      */
  --c-hair:           rgba(21, 23, 26, 0.15);   /* rules on bone            */
  --c-hair-dark:      rgba(255, 255, 255, 0.14);/* rules on the field       */
  --c-focus:          #B7B4AC;  /* keyboard focus ring                      */
  --c-error:          #A33B3B;

  /* ---- The field ------------------------------------------------------
     The dark surface is a light source, not flat black. Always this recipe. */
  --field: radial-gradient(118% 118% at 50% 0%,
             var(--c-ink-lift) 0%,
             var(--c-ink) 62%,
             var(--c-ink-deep) 100%);

  /* Foil gradient. Screen only — in print this is a pewter foil stamp. */
  --foil: linear-gradient(96deg,
            #8F8C84 0%, #E4E1D9 28%, #B7B4AC 52%, #F0EDE6 72%, #9A978F 100%);

  /* ---- Type ---------------------------------------------------------- */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Display scale — fluid. Cormorant Light only, never bolder than 400. */
  --t-hero:    clamp(2.75rem, 8vw,   5.25rem);
  --t-h1:      clamp(2.25rem, 6.4vw, 4rem);
  --t-h2:      clamp(1.75rem, 4.6vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 3vw,   1.625rem);

  /* Body scale — Inter. */
  --t-lead:    1.0625rem;   /* 17px  intro paragraphs      */
  --t-base:    0.9375rem;   /* 15px  body                  */
  --t-small:   0.8125rem;   /* 13px  secondary             */
  --t-label:   0.5625rem;   /* 9px   tracked caps labels   */

  --lh-display: 1.06;
  --lh-body:    1.72;

  /* Tracking. The label tracking matches the logo subline. */
  --tr-label:   0.24em;
  --tr-caps:    0.20em;
  --tr-display: 0.01em;

  /* ---- Space — 8px base ---------------------------------------------- */
  --s-1:  0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;
  --s-4:  1rem;      --s-5:  1.5rem;    --s-6:  2rem;
  --s-7:  2.75rem;   --s-8:  3.5rem;    --s-9:  5rem;
  --s-10: 7rem;      --s-11: 9.5rem;

  --gutter:    1.375rem;         /* page padding, mobile  */
  --gutter-lg: 2.5rem;           /* page padding, desktop */
  --measure:   34rem;            /* max line length       */
  --page:      68.75rem;         /* 1100px content cap    */

  /* ---- Lines & shape -------------------------------------------------
     The hairline is the brand device. It is 1px and it never gets thicker. */
  --hair-w: 1px;
  --radius: 2px;                 /* the system is square. 2px is the ceiling */

  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.22);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.30);

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}