/* ============================================================
   DRH24 — Diretora de RH 24/7
   Foundational tokens: color + type
   Corporate-minimalist · navy / gold / serene blue · Crimson Pro
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../assets/fonts/CrimsonPro-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     CORE PALETTE  (the six brand colors)
     ---------------------------------------------------------- */
  --ink:          #190504;  /* near-black espresso — primary surface / ink */
  --navy:         #33100a;  /* raised umber — cards, panels on dark        */
  --serene:       #481206;  /* terracotta — cool-role counterweight        */
  --gold:         #a6713b;  /* CANONICAL brand gold (ochre)                */
  --white:        #ffffff;
  --black:        #000000;

  /* --marigold kept as an alias for the palette's lightest warm tone. */
  --marigold:     #ffd074;

  /* ----------------------------------------------------------
     EXTENDED RAMPS  (tints/shades derived in oklch from the core)
     ---------------------------------------------------------- */
  /* Ink / espresso ramp */
  --ink-900:      #190504;
  --ink-800:      #241009;
  --ink-700:      #33100a;
  --ink-600:      #3f1a10;
  --ink-500:      #55291a;  /* hairline borders on dark / muted ink text  */
  --ink-400:      #6e3c28;

  /* Gold ramp — built around the canonical ochre #a6713b + light #ffd074 */
  --gold-700:     #7a4f22;  /* deep amber — gold text/icons on light       */
  --gold-600:     #8f5e2c;
  --gold-500:     #a6713b;  /* = --gold */
  --gold-400:     #c08f5c;
  --gold-300:     #ffd074;  /* = --marigold, the palette's light gold      */
  --gold-100:     #ffecc7;  /* gold wash background on light               */

  /* Terracotta ramp (cool-role counterweight; brick/maroon-brown) */
  --serene-600:   #33100a;
  --serene-500:   #481206;  /* = --serene */
  --serene-400:   #6b2412;
  --serene-300:   #a1553a;
  --serene-100:   #f1ddd2;  /* tint background on light */

  /* Warm neutral / paper ramp (for light surfaces) */
  --paper:        #faf8f4;  /* off-white warm paper — default light bg     */
  --paper-2:      #f3efe7;  /* secondary light surface                     */
  --line:         #e5e0d6;  /* hairline border on light                    */
  --line-strong:  #d2cabb;
  --mist:         #8b8678;  /* muted warm grey — captions on light         */

  /* ----------------------------------------------------------
     SEMANTIC COLOR (light context — the default)
     ---------------------------------------------------------- */
  --bg:           var(--paper);
  --bg-elevated:  var(--white);
  --bg-sunken:    var(--paper-2);
  --fg1:          var(--ink-900);   /* primary text                       */
  --fg2:          #3b3d57;          /* secondary text                     */
  --fg3:          var(--mist);      /* tertiary / captions                */
  --border:       var(--line);
  --border-2:     var(--line-strong);
  --accent:       var(--gold);      /* primary accent                     */
  --accent-ink:   var(--ink-900);   /* text/icon on gold                  */
  --link:         var(--serene-600);

  /* Status */
  --success:      #3f7d5c;
  --warning:      #c98a2b;
  --danger:       #b8503f;
  --info:         var(--serene-600);

  /* ----------------------------------------------------------
     RADii · SHADOW · SPACING · MOTION
     ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(2,3,47,0.06);
  --shadow-sm: 0 2px 8px rgba(2,3,47,0.07);
  --shadow-md: 0 10px 30px -8px rgba(2,3,47,0.16);
  --shadow-lg: 0 28px 60px -18px rgba(2,3,47,0.30);
  --shadow-gold: 0 14px 34px -12px rgba(166,113,59,0.42);

  --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;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 460ms; /* @kind other */

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  --font-serif: "Crimson Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-display: "Crimson Pro", Georgia, serif;       /* light, large, airy */
  --font-ui: "Crimson Pro", Georgia, serif;            /* brand keeps serif everywhere */
  --font-mono: "SFMono-Regular", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid display sizes */
  --t-display: clamp(48px, 7vw, 104px); /* @kind font */
  --t-h1: clamp(38px, 5vw, 68px); /* @kind font */
  --t-h2: clamp(28px, 3.4vw, 44px); /* @kind font */
  --t-h3: clamp(22px, 2.2vw, 30px); /* @kind font */
  --t-h4: 22px;
  --t-body-lg: 20px;
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;
  --t-eyebrow: 12px;
}

/* ----------------------------------------------------------
   DARK CONTEXT — opt-in by adding .on-ink to a container.
   Flips semantic vars so components compose on navy.
   ---------------------------------------------------------- */
.on-ink {
  --bg:          var(--ink-900);
  --bg-elevated: var(--ink-700);
  --bg-sunken:   var(--ink-800);
  --fg1:         #f4f1ea;
  --fg2:         #c3c4d6;
  --fg3:         #8587a6;
  --border:      var(--ink-500);
  --border-2:    var(--ink-400);
  --accent:      var(--gold-400);
  --accent-ink:  var(--ink-900);
  --link:        var(--serene-400);
  color: var(--fg1);
  background: var(--bg);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--fg1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--fg1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.25;
  color: var(--fg1);
  margin: 0;
}
.lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--fg2);
}
p, .p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
}
.small { font-size: var(--t-small); line-height: 1.5; }
.caption {
  font-family: var(--font-serif);
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--fg3);
}
/* UI label — the one place we go sans for dense data tables / chips */
.t-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  color: var(--fg1);
}
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
}