/* ============================================================
   WATTNEY GRC · Design Tokens
   Lavender, silver and earned wisdom.
   v2.0 · April 2026
   ============================================================ */

/* --------------------------------------------
   Web fonts — self-hosted brand TTFs.
   Cormorant Garamond + EB Garamond + Playfair Display
   Variable fonts; weight axis 300–700.
   -------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/IbarraRealNova-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/IbarraRealNova-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Taviraj";
  src: url("fonts/Taviraj-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Taviraj";
  src: url("fonts/Taviraj-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Taviraj";
  src: url("fonts/Taviraj-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Taviraj";
  src: url("fonts/Taviraj-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== FOUNDATION — DEEP PURPLES ===== */
  --wt-aubergine: #2D1B3D;       /* Midnight Cellar — primary website bg */
  --wt-deep-violet: #3D2456;     /* Old Library — secondary bg, gradient partner */
  --wt-wine: #5C2D6E;            /* Dark Grape — the standout, CTAs only */

  /* ===== LAVENDER FAMILY — MID TONES ===== */
  --wt-lavender: #8B6FA0;        /* Dried Stems — borders, hover */
  --wt-soft-lavender: #B5A0C8;   /* Morning Bloom — labels, eyebrows */
  --wt-periwinkle: #7B82B8;      /* Dusk Sky — links, Aivery interface */
  --wt-pale-lavender: #DDD0E8;   /* Linen — light section bg, dividers */

  /* ===== SAGE, SILVER & PARCHMENT — DIFFERENTIATORS ===== */
  --wt-sage: #7A8C7E;            /* Lavender Stem — surprise sections */
  --wt-sage-light: #A8B8AC;      /* Morning Mist — secondary text on sage */
  --wt-silver: #9BA5A8;          /* Aged Mercury — borders, metadata */
  --wt-silver-light: #C4CCCE;    /* Cool Linen — light accents */
  --wt-parchment: #F2E8D5;       /* Old Page — primary text on dark; warm bg */
  --wt-cream: #FAF5EC;           /* Warm White — lightest bg, never #fff */

  /* ===== SEMANTIC — SURFACES ===== */
  --wt-bg: var(--wt-aubergine);                 /* default canvas */
  --wt-bg-alt: var(--wt-deep-violet);           /* card / banded section */
  --wt-bg-elevated: #3A2350;                    /* slightly lifted card on dark */
  --wt-bg-light: var(--wt-cream);               /* light document mode */
  --wt-bg-light-alt: var(--wt-parchment);       /* warm panel on light */
  --wt-bg-sage: var(--wt-sage);                 /* unexpected differentiator */

  /* ===== SEMANTIC — FOREGROUND ===== */
  /* On dark (aubergine/violet): parchment is "candlelight in a purple room" */
  --wt-fg: var(--wt-parchment);                 /* primary text on dark */
  --wt-fg-muted: var(--wt-soft-lavender);       /* secondary text on dark */
  --wt-fg-subtle: var(--wt-lavender);           /* tertiary, metadata on dark */
  --wt-fg-eyebrow: var(--wt-soft-lavender);     /* small caps labels */

  /* On light (cream/parchment): aubergine is the anchor */
  --wt-fg-on-light: var(--wt-aubergine);
  --wt-fg-on-light-muted: #5A4A6E;              /* tinted aubergine for body */
  --wt-fg-on-light-subtle: var(--wt-silver);

  /* ===== INTERACTIVE ===== */
  --wt-link: var(--wt-periwinkle);              /* Dusk Sky for links */
  --wt-link-hover: var(--wt-soft-lavender);
  --wt-cta: var(--wt-wine);                     /* the Wine Purple Rule — sparingly */
  --wt-cta-hover: #6B3580;
  --wt-cta-fg: var(--wt-parchment);

  /* ===== BORDERS / DIVIDERS ===== */
  --wt-border: rgba(139, 111, 160, 0.28);       /* lavender at low alpha */
  --wt-border-strong: var(--wt-lavender);
  --wt-divider-light: var(--wt-pale-lavender);
  --wt-rule-on-dark: rgba(242, 232, 213, 0.18); /* parchment hairlines */

  /* ===== SHADOWS ===== */
  /* Soft, warm — never harsh black. Always tinted toward aubergine. */
  --wt-shadow-sm: 0 1px 2px rgba(45, 27, 61, 0.18);
  --wt-shadow-md: 0 6px 18px rgba(45, 27, 61, 0.22);
  --wt-shadow-lg: 0 18px 40px rgba(45, 27, 61, 0.30);
  --wt-shadow-glow: 0 0 0 1px rgba(181, 160, 200, 0.20),
                    0 12px 30px rgba(45, 27, 61, 0.35);
  --wt-shadow-inset: inset 0 1px 0 rgba(242, 232, 213, 0.06);

  /* ===== RADII ===== */
  /* Modest. We're not a startup. Sharp-ish, considered. */
  --wt-radius-xs: 2px;
  --wt-radius-sm: 4px;
  --wt-radius-md: 8px;
  --wt-radius-lg: 14px;
  --wt-radius-xl: 22px;
  --wt-radius-pill: 999px;

  /* ===== SPACING (8pt grid, with finer 4pt steps) ===== */
  --wt-space-1: 4px;
  --wt-space-2: 8px;
  --wt-space-3: 12px;
  --wt-space-4: 16px;
  --wt-space-5: 24px;
  --wt-space-6: 32px;
  --wt-space-7: 48px;
  --wt-space-8: 64px;
  --wt-space-9: 96px;
  --wt-space-10: 128px;

  /* ===== TYPE — FAMILIES ===== */
  --wt-font-display: "Ibarra Real Nova", "EB Garamond", Garamond, "Times New Roman", serif;
  --wt-font-display-tracking: 0.04em;
  --wt-font-subhead: "Taviraj", "Cormorant Garamond", Garamond, serif;
  --wt-font-subhead-weight: 300;
  --wt-font-subhead-tracking: 0.1em;
  --wt-font-button: "Taviraj", "Cormorant Garamond", Garamond, serif;
  --wt-font-button-weight: 400;
  --wt-font-button-tracking: 0.1em;
  --wt-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wt-font-body-weight: 300;
  --wt-font-body-tracking: 0.1em;
  --wt-font-editorial: "EB Garamond", "Cormorant Garamond", Garamond, serif;
  --wt-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== TYPE — SCALE ===== */
  /* Display sizes lean large + airy — the brand should feel composed. */
  --wt-text-xs: 12px;
  --wt-text-sm: 14px;
  --wt-text-base: 17px;          /* body — slightly larger; serif reads better */
  --wt-text-md: 19px;
  --wt-text-lg: 22px;
  --wt-text-xl: 28px;
  --wt-text-2xl: 36px;
  --wt-text-3xl: 48px;
  --wt-text-4xl: 64px;
  --wt-text-5xl: 84px;
  --wt-text-hero: 112px;

  /* ===== TYPE — TRACKING ===== */
  --wt-tracking-eyebrow: 0.22em;   /* small-caps section labels */
  --wt-tracking-wordmark: 0.32em;  /* WATTNEY GRC under W */
  --wt-tracking-tight: -0.015em;
  --wt-tracking-display: 0.04em;   /* Ibarra Real Nova headings */

  /* ===== TYPE — LEADING ===== */
  --wt-leading-tight: 1.05;
  --wt-leading-snug: 1.18;
  --wt-leading-body: 1.55;
  --wt-leading-loose: 1.75;

  /* ===== MOTION ===== */
  --wt-ease: cubic-bezier(0.32, 0.72, 0.20, 1);   /* gentle, considered */
  --wt-ease-out: cubic-bezier(0.16, 0.84, 0.30, 1);
  --wt-dur-fast: 140ms;
  --wt-dur: 240ms;
  --wt-dur-slow: 480ms;

  /* ===== LAYOUT ===== */
  --wt-content-narrow: 640px;
  --wt-content: 880px;
  --wt-content-wide: 1180px;
  --wt-page: 1320px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by adding `class="wt"` to a root, OR import into your
   global stylesheet. Designed for dark-by-default contexts.
   ============================================================ */

.wt, .wt-dark {
  background: var(--wt-bg);
  color: var(--wt-fg);
  font-family: var(--wt-font-body);
  font-weight: var(--wt-font-body-weight);
  font-size: var(--wt-text-base);
  line-height: var(--wt-leading-body);
  letter-spacing: var(--wt-font-body-tracking);
  font-feature-settings: "liga", "dlig", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wt-light {
  background: var(--wt-bg-light);
  color: var(--wt-fg-on-light);
  font-family: var(--wt-font-body);
  font-weight: var(--wt-font-body-weight);
  font-size: var(--wt-text-base);
  line-height: var(--wt-leading-body);
  letter-spacing: var(--wt-font-body-tracking);
}

/* Headings — Ibarra Real Nova. Roman for the run; italicise key words
   inline by wrapping them in <em> (or .wt-key). Letter-spacing 0.04em (40). */
.wt h1, .wt-h1 {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: var(--wt-text-4xl);
  line-height: var(--wt-leading-tight);
  letter-spacing: var(--wt-font-display-tracking);
  margin: 0 0 var(--wt-space-5);
  text-wrap: balance;
}

.wt h2, .wt-h2 {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: var(--wt-text-3xl);
  line-height: var(--wt-leading-snug);
  letter-spacing: var(--wt-font-display-tracking);
  margin: 0 0 var(--wt-space-4);
  text-wrap: balance;
}

.wt h3, .wt-h3 {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: var(--wt-text-2xl);
  line-height: var(--wt-leading-snug);
  letter-spacing: var(--wt-font-display-tracking);
  margin: 0 0 var(--wt-space-3);
  text-wrap: balance;
}

.wt h4, .wt-h4 {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: var(--wt-text-xl);
  line-height: var(--wt-leading-snug);
  letter-spacing: var(--wt-font-display-tracking);
  margin: 0 0 var(--wt-space-3);
}

/* Italic key word inside a heading. Use <em> or .wt-key. */
.wt h1 em, .wt h2 em, .wt h3 em, .wt h4 em,
.wt-h1 em, .wt-h2 em, .wt-h3 em, .wt-h4 em,
.wt-key {
  font-family: var(--wt-font-display);
  font-style: italic;
  font-weight: 500;
}

/* Sub-heading — Taviraj Light, all caps, 0.1em tracking */
.wt h5, .wt-h5, .wt-subhead {
  font-family: var(--wt-font-subhead);
  font-weight: var(--wt-font-subhead-weight);
  font-size: var(--wt-text-md);
  line-height: var(--wt-leading-snug);
  letter-spacing: var(--wt-font-subhead-tracking);
  text-transform: uppercase;
  margin: 0 0 var(--wt-space-3);
}

.wt p, .wt-p {
  font-family: var(--wt-font-body);
  font-weight: var(--wt-font-body-weight);
  font-size: var(--wt-text-base);
  line-height: var(--wt-leading-body);
  letter-spacing: var(--wt-font-body-tracking);
  margin: 0 0 var(--wt-space-4);
  text-wrap: pretty;
  max-width: 64ch;
}

.wt-lede {
  font-family: var(--wt-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--wt-text-lg);
  line-height: var(--wt-leading-snug);
  color: var(--wt-fg-muted);
}

/* Eyebrow — spaced uppercase Cormorant. The signature small-caps label. */
.wt-eyebrow {
  font-family: var(--wt-font-display);
  font-weight: 500;
  font-size: var(--wt-text-xs);
  letter-spacing: var(--wt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wt-fg-eyebrow);
}

.wt-eyebrow-rule::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: var(--wt-space-3);
  opacity: 0.6;
}

/* Wordmark utility — WATTNEY GRC */
.wt-wordmark {
  font-family: var(--wt-font-display);
  font-weight: 500;
  letter-spacing: var(--wt-tracking-wordmark);
  text-transform: uppercase;
}

/* Quote — pulls from style guide tagline pattern */
.wt-quote {
  font-family: var(--wt-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--wt-text-2xl);
  line-height: var(--wt-leading-snug);
  color: var(--wt-fg);
  text-wrap: balance;
}

.wt-quote-attribution {
  display: block;
  margin-top: var(--wt-space-4);
  font-family: var(--wt-font-display);
  font-style: normal;
  font-size: var(--wt-text-xs);
  letter-spacing: var(--wt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wt-fg-subtle);
}

/* Links */
.wt a, .wt-link {
  color: var(--wt-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(123, 130, 184, 0.45);
  transition: color var(--wt-dur) var(--wt-ease),
              text-decoration-color var(--wt-dur) var(--wt-ease);
}
.wt a:hover, .wt-link:hover {
  color: var(--wt-link-hover);
  text-decoration-color: currentColor;
}

/* Buttons — Taviraj Regular, all caps, 0.1em tracking */
.wt button, .wt .wt-btn, .wt-btn {
  font-family: var(--wt-font-button);
  font-weight: var(--wt-font-button-weight);
  font-size: var(--wt-text-sm);
  letter-spacing: var(--wt-font-button-tracking);
  text-transform: uppercase;
}

/* Code — small mono accent. Used sparingly. */
.wt code, .wt-code {
  font-family: var(--wt-font-mono);
  font-size: 0.92em;
  background: rgba(181, 160, 200, 0.10);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius-xs);
  padding: 0.08em 0.4em;
  color: var(--wt-soft-lavender);
}

/* Hairline divider — parchment at low alpha, with a centered diamond accent
   echoes the logo flourishes. */
.wt-rule {
  border: 0;
  height: 1px;
  background: var(--wt-rule-on-dark);
  margin: var(--wt-space-7) 0;
}
.wt-rule-flourish {
  position: relative;
  border: 0;
  height: 1px;
  background: var(--wt-rule-on-dark);
  margin: var(--wt-space-7) 0;
  overflow: visible;
}
.wt-rule-flourish::after {
  content: "◆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wt-bg);
  color: var(--wt-sage);
  padding: 0 var(--wt-space-3);
  font-size: 10px;
}