/* =============================================================
   Coliga Group · colors_and_type.css   (v3)
   Updated to v3 brand guidelines:
   - Wordmark: "Coliga Group" — saffron dot replaces forge amber
   - Heritage (core): Kiln · Limestone · Parchment · Saffron
   - Ambition (secondary): Cielo · Grove · Terracotta + Wash tints
   ============================================================= */

/* Local brand fonts — variable .ttf files in /fonts/ */
@font-face {
  font-family: "Crimson Pro";
  src: url("./fonts/CrimsonPro-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/CrimsonPro-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/InstrumentSans-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("./fonts/InstrumentSans-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/GeistMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============== HERITAGE PALETTE (core) ==============
     "The colours of the building itself. Warm, earthy, grounded —
     the identity lives here."                                */

  /* Kiln — primary text, dark backgrounds */
  --kiln-900:        #1F1B19;   /* deepest */
  --kiln-800:        #2E2A26;   /* primary */
  --kiln-700:        #44403B;   /* hover */

  /* Limestone — secondary text, GROUP lockup */
  --limestone-700:   #7F6B5D;
  --limestone-500:   #A4897B;   /* primary, GROUP wordmark */
  --limestone-300:   #C8B6A4;

  /* Parchment — primary background, reversed text on dark */
  --parchment-300:   #D9D0C0;
  --parchment-200:   #F2EDE4;   /* canvas */
  --parchment-100:   #F8F2EA;

  /* Saffron — the dot, bold accent — sparingly */
  --saffron-700:     #C77519;   /* deepest */
  --saffron-500:     #FBAB20;   /* primary — i-dot */
  --saffron-300:     #FFD06D;   /* light */

  /* ============== AMBITION PALETTE (secondary) ==============
     "Bold, warm-shifted, functional. These do the work in
     digital, data, and marketing."                           */

  /* Cielo — links, info states, data viz, trust */
  --cielo-700:       #1F47A0;
  --cielo-500:       #3567C7;
  --cielo-300:       #7CA4E2;

  /* Grove — success, positive states, confirmation */
  --grove-700:       #1F6D3F;
  --grove-500:       #2F9558;
  --grove-300:       #69C088;

  /* Terracotta — alerts, emphasis, energy, warnings */
  --terracotta-700: #B5391A;
  --terracotta-500: #D8623C;
  --terracotta-300: #F09875;

  /* Background tints (washes — pair w/ Ambition fills) */
  --wash-honey:      #FBF1D8;   /* paired with Saffron */
  --wash-sky:        #E5EAF6;   /* paired with Cielo */
  --wash-grove:      #E0EFE5;   /* paired with Grove */
  --wash-clay:       #F7E4DC;   /* paired with Terracotta */

  /* ============== SEMANTIC ROLES ============== */
  --bg:              var(--parchment-200);
  --bg-elevated:     var(--parchment-100);
  --bg-inset:        var(--parchment-300);
  --bg-inverse:      var(--kiln-800);

  --fg:              var(--kiln-800);
  --fg-muted:        var(--limestone-700);
  --fg-subtle:       var(--limestone-500);
  --fg-inverse:      var(--parchment-200);

  --border:          rgba(46,42,38,0.12);
  --border-strong:   rgba(46,42,38,0.24);
  --rule:            rgba(46,42,38,0.18);

  --accent:          var(--saffron-500);   /* the dot */
  --accent-deep:     var(--saffron-700);
  --accent-soft:     var(--saffron-300);

  /* Status (from Ambition) */
  --link:            var(--cielo-500);
  --link-hover:      var(--cielo-700);
  --success:         var(--grove-500);
  --warning:         var(--saffron-500);
  --danger:          var(--terracotta-500);

  /* ============== TYPOGRAPHY ============== */
  --font-display: "Crimson Pro", "Crimson Text", Georgia, serif;
  --font-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fs-display-xl: 96px;
  --fs-display-lg: 64px;
  --fs-display:    48px;
  --fs-section:    32px;
  --fs-subsection: 24px;
  --fs-lead:       20px;
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-micro:      12px;
  --fs-data:       13px;

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

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-group:  0.18em;   /* the GROUP lockup tracking */

  /* ============== SPACING ============== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ============== RADII ============== */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 6px;
  --r-card: 2px;
  --r-pill: 999px;

  /* ============== SHADOWS ============== */
  --shadow-1: 0 1px 0 rgba(46,42,38,0.04), 0 1px 2px rgba(46,42,38,0.06);
  --shadow-2: 0 1px 0 rgba(46,42,38,0.04), 0 4px 12px rgba(46,42,38,0.08);
  --shadow-3: 0 1px 0 rgba(46,42,38,0.04), 0 12px 32px rgba(46,42,38,0.12);
  --shadow-inset: inset 0 0 0 1px rgba(46,42,38,0.08);

  /* ============== MOTION ============== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

/* ============== ELEMENT STYLES ============== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-section); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-subsection); line-height: var(--lh-snug); }
h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-snug); }

.lead  { font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg); }
p, .p  { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg); text-wrap: pretty; }
small, .small { font-size: var(--fs-small); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-body); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.label-meta {
  font-family: var(--font-body); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-subtle); font-weight: 500;
}

code, kbd, samp, .mono, .data {
  font-family: var(--font-mono); font-size: var(--fs-data);
  letter-spacing: 0; color: var(--fg-muted);
}

.brand-underline { position: relative; display: inline-block; padding-bottom: 6px; }
.brand-underline::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background: var(--accent); }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-deep); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }