/* =============================================================
   BLAKE ROY — COLORS & TYPE
   A palette built on contrast, clarity, and intention.
   Clean. Powerful. Timeless.
   ============================================================= */

/* ---------- FONT FACES ----------
   The brand voice is precise, structured, sharp. We pair a
   high-contrast serif display (Cormorant Garamond — used wide-tracked
   in uppercase for headlines, like the 'COLOR PALETTE' specimen)
   with a clean geometric sans (Inter / system) for body and UI,
   plus JetBrains Mono for data/labels.

   Webfonts loaded from Google Fonts for portability. If the brand
   ships custom fonts later, drop them in /fonts and replace.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS (raw) ---------- */
  --br-jet-black:    #0A0A0A;  /* Backgrounds, primary surfaces, bold statements */
  --br-charcoal:     #121212;  /* Secondary backgrounds, depth */
  --br-slate:        #1E1E1E;  /* Tertiary surfaces, balance */
  --br-gold:         #D4AF37;  /* Accents, highlights, important elements */
  --br-light-gold:   #E6C77A;  /* Subtle accents, gradients, supportive */
  --br-off-white:    #F5F5F5;  /* Typography, contrast, clean space */

  /* Gold tints for tracking precision states */
  --br-gold-90:      rgba(212, 175, 55, 0.90);
  --br-gold-60:      rgba(212, 175, 55, 0.60);
  --br-gold-30:      rgba(212, 175, 55, 0.30);
  --br-gold-12:      rgba(212, 175, 55, 0.12);
  --br-gold-06:      rgba(212, 175, 55, 0.06);

  /* Off-white tints */
  --br-fg-90:        rgba(245, 245, 245, 0.90);
  --br-fg-70:        rgba(245, 245, 245, 0.70);
  --br-fg-50:        rgba(245, 245, 245, 0.50);
  --br-fg-30:        rgba(245, 245, 245, 0.30);
  --br-fg-12:        rgba(245, 245, 245, 0.12);
  --br-fg-06:        rgba(245, 245, 245, 0.06);

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-0:            var(--br-jet-black);   /* Page */
  --bg-1:            var(--br-charcoal);    /* Cards, secondary surfaces */
  --bg-2:            var(--br-slate);       /* Elevated / hover surfaces */
  --bg-inverse:      var(--br-off-white);

  --fg-1:            var(--br-off-white);   /* Primary text */
  --fg-2:            var(--br-fg-70);       /* Secondary text */
  --fg-3:            var(--br-fg-50);       /* Tertiary / meta */
  --fg-mute:         var(--br-fg-30);       /* Disabled, decorative */
  --fg-inverse:      var(--br-jet-black);

  --accent:          var(--br-gold);
  --accent-soft:     var(--br-light-gold);
  --accent-mute:     var(--br-gold-30);

  --border:          var(--br-fg-12);       /* Hairline dividers */
  --border-strong:   var(--br-fg-30);
  --border-gold:     var(--br-gold-30);

  /* Status — restrained, gold-leaning */
  --status-positive: #C9B87A;
  --status-warn:     #D4AF37;
  --status-negative: #B0524A;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:    'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Display & headlines — generous, wide-tracked uppercase for the
     editorial 'specimen' feel; mixed-case for long-form headlines. */
  --fs-display:      clamp(48px, 6vw, 88px);
  --fs-h1:           clamp(36px, 4vw, 56px);
  --fs-h2:           clamp(28px, 3vw, 40px);
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body:         16px;
  --fs-small:        14px;
  --fs-micro:        12px;

  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.5;
  --lh-loose:        1.7;

  /* Tracking — gold-on-black uppercase needs air to read precisely. */
  --tr-tight:        -0.02em;
  --tr-normal:        0;
  --tr-wide:          0.08em;
  --tr-wider:         0.16em;   /* eyebrow / specimen labels */
  --tr-widest:        0.24em;   /* section dividers */

  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* ---------- SPACING (8pt grid, restrained) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ----------
     Restraint over expression. Sharp corners are the default;
     a 2px hairline radius is the only 'softening' allowed.
     Pills are reserved for tags / status only. */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bd-hairline: 1px solid var(--border);
  --bd-strong:   1px solid var(--border-strong);
  --bd-gold:     1px solid var(--border-gold);
  --bd-rule:     1px solid var(--br-gold);   /* the gold underline rule */

  /* ---------- ELEVATION ----------
     The brand is flat. 'Elevation' is communicated by surface
     value-shifts and gold borders, not soft drop shadows. The one
     allowed shadow is a deep ambient cast for modal / dialog. */
  --shadow-1: 0 1px 0 0 var(--br-fg-06) inset;
  --shadow-2: 0 0 0 1px var(--border) inset;
  --shadow-modal: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
  --shadow-gold-glow: 0 0 0 1px var(--br-gold-30), 0 0 24px var(--br-gold-12);

  /* ---------- MOTION ----------
     No bounces. Crisp, short, precise. */
  --ease-precise: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     320ms;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   Use these as utility classes OR via @extend in component CSS.
   ============================================================= */

.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.type-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-1);
}

.type-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-1);
}

.type-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.type-body-strong {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.type-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.type-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--fg-2);
}

.type-spec-label {
  /* Used under specimen swatches: 'JET BLACK' / '#0A0A0A' */
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-1);
}

.type-spec-value {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}

/* The signature gold rule under section labels */
.gold-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--br-gold);
  margin-top: var(--sp-3);
}

/* =============================================================
   ROOT DEFAULTS
   ============================================================= */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--br-gold);
  color: var(--br-jet-black);
}