/* =============================================================
   Relevo Lab · colors_and_type.css
   Single source of truth for tokens. Pulled directly from
   Brand Book v3.0 (March 2026). All hex values are fixed —
   do not substitute approximations.
   ============================================================= */

/* ---------- WEB FONTS ---------------------------------------- */
/* Primary families load from local TTF files shipped in this design
   system (see /fonts). Only the two LOGO-ONLY families (GFS Didot,
   Poppins) still load from Google Fonts — they are used exclusively
   inside the RELEVO LAB wordmark, nowhere else. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Logo-only — stays on Google Fonts. Never use outside the wordmark. */
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Poppins:wght@300;400&display=swap');

/* =============================================================
   1.  COLOR TOKENS
   ============================================================= */
:root {
  /* ---------- Primary — the core brand palette ---------- */
  --rl-off-black:       #111111; /* Primary ink, headings, dark bg, logo on light. */
  --rl-cream:           #F5F3EF; /* Primary warm bg. Page bg — never pure white. */
  --rl-off-white:       #FAF9F7; /* Secondary bg, slightly lighter than Cream. */
  --rl-cream-deep:      #EDEAE4; /* Alt section bg for visual separation (web). */

  /* ---------- Accent — use sparingly, max one per context ---------- */
  --rl-forest:          #2C4A3E; /* PRIMARY accent. Default. */
  --rl-forest-light:    #EAF0EE; /* Tint of Forest — hover, info, positive bg. */
  --rl-midnight:        #2E4A7A; /* SECONDARY accent. Only when structurally needed.
                                    Never alongside Forest in the same section. */
  --rl-midnight-light:  #E8EDF5; /* Tint of Midnight. */

  /* ---------- Functional — text hierarchy & structure ---------- */
  --rl-ink:             #333333; /* Primary body text on light bg (Dark Gray). */
  --rl-ink-muted:       #666666; /* Secondary body text, captions. */
  --rl-ink-soft:        #999999; /* Metadata, footnotes, timestamps. */
  --rl-rule:            #CCCCCC; /* Table borders, horizontal rules. Never text. */

  /* ---------- Status — docs / UI only, never decorative ---------- */
  --rl-amber-text:      #7A4F00;
  --rl-amber-bg:        #FFF8E1;
  --rl-deleted-text:    #8B0000;
  --rl-deleted-bg:      #F5E6E6;
  --rl-fillable-bg:     #FFFDE7; /* Data-entry cell tint (docs). */
  --rl-fillable-border: #BBBBBB;

  /* =============================================================
     2.  SEMANTIC ALIASES
     Prefer these in components; swap the primitive above to retheme.
     ============================================================= */

  /* Surfaces */
  --bg:             var(--rl-cream);
  --bg-alt:         var(--rl-cream-deep);
  --bg-soft:        var(--rl-off-white);
  --bg-inverse:     var(--rl-off-black);

  /* Text */
  --fg1:            var(--rl-off-black);   /* Headlines, display. */
  --fg2:            var(--rl-ink);         /* Body on light bg. */
  --fg3:            var(--rl-ink-muted);   /* Secondary / captions. */
  --fg4:            var(--rl-ink-soft);    /* Metadata. */
  --fg-inverse:     var(--rl-cream);       /* Text on Off-black. */

  /* Accent */
  --accent:         var(--rl-forest);
  --accent-soft:    var(--rl-forest-light);
  --accent-alt:     var(--rl-midnight);
  --accent-alt-soft:var(--rl-midnight-light);

  /* Borders & dividers */
  --border:         var(--rl-rule);
  --border-strong:  var(--rl-off-black);

  /* =============================================================
     3.  TYPOGRAPHY FAMILIES
     ============================================================= */
  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-docs:      'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-logo-serif:'GFS Didot', 'Didot', 'Bodoni MT', Georgia, serif; /* LOGO ONLY */
  --font-logo-sans: 'Poppins', 'Futura', 'Century Gothic', sans-serif; /* LOGO ONLY */

  /* Weights used */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;

  /* =============================================================
     4.  TYPE SCALE — WEB & HTML  (see Brand Book §4.2)
     ============================================================= */
  --t-hero:         clamp(58px, 10.5vw, 108px);
  --t-h1:           clamp(30px, 5vw, 48px);
  --t-h2:           clamp(24px, 4vw, 38px);
  --t-body-lg:      18px;
  --t-body:         15px;
  --t-body-sm:      13px;
  --t-label:        10px;   /* Section labels: uppercase, tracked. */
  --t-caption:      13px;

  --lh-tight:       0.96;
  --lh-snug:        1.03;
  --lh-normal:      1.1;
  --lh-reading:     1.75;
  --lh-note:        1.65;

  --tracking-label: 0.20em; /* 0.18–0.22em range */
  --tracking-logo:  0.035em;

  /* =============================================================
     5.  SPACING, RADIUS, LAYOUT
     (Brand Book does not prescribe a granular token set; values
      below reflect what is observed in the reference HTML.)
     ============================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  --content-max:   900px;
  --content-pad:   clamp(28px, 5vw, 64px);
  --grid-gap:      1px;     /* Discipline: 1px gaps between grid cells. */

  --radius-0:      0px;     /* Default. Relevo Lab is square-cornered. */
  --radius-1:      2px;     /* Only for utility chips/inputs, sparingly. */

  --rule-thin:     1px;
  --rule-med:      2px;
  --rule-accent:   6px;     /* Heading underline weight, docs. */

  --nav-height:    60px;
  --nav-blur:      16px;

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:      180ms;
  --dur-med:       320ms;
  --dur-slow:      700ms;
  --reveal-y:      24px;
}

/* =============================================================
   6.  BASELINE ELEMENT STYLES (semantic, opt-in)
   Add `class="rl"` to a container to apply. Avoids global bleed.
   ============================================================= */
.rl, .rl * { box-sizing: border-box; }

.rl {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-body);
  line-height: var(--lh-reading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rl h1, .rl .h1, .rl .hero {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  color: var(--fg1);
  letter-spacing: -0.005em;
  margin: 0;
}

.rl h2, .rl .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

.rl h3, .rl .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-h2);
  line-height: var(--lh-normal);
  color: var(--fg1);
  margin: 0;
}

.rl .display-italic, .rl em.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent);
}

.rl p, .rl .body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-body);
  line-height: var(--lh-reading);
  color: var(--fg2);
  max-width: 540px;
  margin: 0;
}

.rl .body-lg  { font-size: var(--t-body-lg); }
.rl .body-sm  { font-size: var(--t-body-sm); line-height: var(--lh-note); }

.rl .label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.rl .caption {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--t-caption);
  color: var(--fg3);
}

.rl a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.rl a:hover { background: var(--accent-soft); }

.rl hr, .rl .rule {
  border: 0;
  border-top: var(--rule-thin) solid var(--border);
  margin: var(--space-5) 0;
}

.rl .rule--accent {
  border-top-width: var(--rule-accent);
  border-top-color: var(--accent);
  max-width: 96px;
  margin: var(--space-4) 0;
}

/* ---------- Section label pattern ---------- */
.rl .section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

/* ---------- Info & warning boxes (docs / web) ---------- */
.rl .info-box {
  background: var(--accent-soft);
  border-left: 20px solid var(--accent);
  padding: var(--space-4) var(--space-5);
  color: var(--fg2);
}
.rl .warning-box {
  background: var(--rl-amber-bg);
  border-left: 20px solid var(--rl-amber-text);
  color: var(--rl-amber-text);
  padding: var(--space-4) var(--space-5);
}

/* ---------- Reveal animation (opt-in) ---------- */
.rl .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.rl .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}