/* ==========================================================================
   Ads&Law — Foundation Tokens
   Colors + Typography + Spacing + Elevation
   ========================================================================== */

/* ---- Webfonts ---------------------------------------------------------- */
/* Display/Brand: Gabarito — geometric rounded sans, closest match to the
   custom "ads&law" wordmark.  Body: Inter — neutral, clean, excellent for
   dashboards and data-dense UI.  Mono: JetBrains Mono for code/KPI values. */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===========================================================
     BRAND PALETTE
     =========================================================== */
  /* Teal — the legal/authoritative half of the brand */
  --teal-50:  #E8F0EF;
  --teal-100: #CCDEDB;
  --teal-200: #9BBDB8;
  --teal-300: #6A9C96;
  --teal-400: #3E7872;
  --teal-500: #0E4A44;  /* PRIMARY — sampled from logo */
  --teal-600: #0B3D38;
  --teal-700: #082E2A;
  --teal-800: #05201D;
  --teal-900: #031311;
  --teal-950: #010807;

  /* Cream — the advertising/warmth half of the brand */
  --cream-50:  #FBF8F2;
  --cream-100: #F3EDE0;  /* SECONDARY — sampled from logo */
  --cream-200: #E8DEC8;
  --cream-300: #D8C9A6;
  --cream-400: #C2AF83;
  --cream-500: #A68F5E;

  /* Neutrals — keyed to teal for harmony (cool-tinted grays) */
  --ink-0:   #FFFFFF;
  --ink-50:  #F7F8F8;
  --ink-100: #EEF0F0;
  --ink-200: #D9DDDC;
  --ink-300: #B3BAB9;
  --ink-400: #7F8988;
  --ink-500: #5A6463;
  --ink-600: #3E4746;
  --ink-700: #2A3131;
  --ink-800: #1A1F1F;
  --ink-900: #0F1313;
  --ink-950: #070909;

  /* ===========================================================
     SEMANTIC — STATUS / METRIC HEALTH
     Used for the client-health semaphore (verde/amarillo/rojo)
     and CPL/KPI delta badges.
     =========================================================== */
  --status-green:     #22A06B;
  --status-green-bg:  #DCF2E5;
  --status-green-fg:  #0F5A3A;

  --status-amber:     #C48411;
  --status-amber-bg:  #FAEBC8;
  --status-amber-fg:  #7A5208;

  --status-red:       #C53539;
  --status-red-bg:    #F9DCDD;
  --status-red-fg:    #8A1E22;

  --status-blue:      #3E7FE8;       /* info / links */
  --status-blue-bg:   #0E2140;

  /* Deltas */
  --delta-up:   var(--status-green);
  --delta-down: var(--status-red);
  --delta-flat: var(--ink-400);

  /* ===========================================================
     SEMANTIC — FOREGROUND / BACKGROUND (DARK MODE DEFAULT)
     The ALCM dashboard is dark-mode-first; light mode is a
     secondary surface used for marketing/printable exports.
     =========================================================== */

  /* Backgrounds — LIGHT MODE (cream canvas, teal ink) */
  --bg:           var(--cream-100);         /* app canvas — logo cream */
  --bg-elev-1:    var(--cream-50);          /* cards — lighter than canvas */
  --bg-elev-2:    #FFFFFF;                  /* popovers / modals */
  --bg-elev-3:    #FFFFFF;                  /* hover on cards */
  --bg-inset:     var(--cream-200);         /* inputs / code blocks */
  --bg-brand:     var(--teal-500);          /* brand-tinted surfaces */
  --bg-cream:     var(--cream-100);         /* warm callouts */

  /* Text — teal on cream */
  --fg-1:         var(--teal-500);          /* primary — logo teal */
  --fg-2:         var(--teal-400);          /* secondary */
  --fg-3:         #6B7978;                  /* tertiary / captions */
  --fg-4:         #A3ADAC;                  /* disabled */
  --fg-brand:     var(--teal-500);          /* text on cream */
  --fg-on-cream:  var(--teal-500);          /* text on cream */
  --fg-accent:    var(--teal-500);          /* accent text */

  /* Borders & lines — teal-tinted */
  --line-1:       rgba(14, 74, 68, 0.08);   /* subtle dividers */
  --line-2:       rgba(14, 74, 68, 0.16);   /* card borders */
  --line-3:       rgba(14, 74, 68, 0.28);   /* hover / focus rings */
  --line-strong:  var(--teal-500);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */
  --font-display: 'Gabarito', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizes — tuned for a data-dense internal dashboard (desktop-first). */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;   /* dashboard body default */
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  84px;   /* hero KPI numbers */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;   /* eyebrow labels / uppercase */
  --tracking-wider:   0.08em;

  /* ===========================================================
     SPACING (4px base)
     =========================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ===========================================================
     RADII — generous, following the logo's rounded geometry
     =========================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* ===========================================================
     ELEVATION — dark-mode shadows are subtle; lean on borders
     =========================================================== */
  --shadow-xs: 0 1px 2px rgba(14, 74, 68, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 74, 68, 0.08);
  --shadow-md: 0 6px 18px rgba(14, 74, 68, 0.10);
  --shadow-lg: 0 16px 40px rgba(14, 74, 68, 0.14);
  --shadow-xl: 0 24px 64px rgba(14, 74, 68, 0.18);
  --shadow-focus: 0 0 0 3px rgba(14, 74, 68, 0.22);
  --shadow-inner: inset 0 1px 0 rgba(14, 74, 68, 0.05);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --header-h:   56px;
  --sidebar-w:  240px;
  --content-max: 1440px;
}

/* ===========================================================
   SEMANTIC TYPE CLASSES
   =========================================================== */

/* Brand / display (uses Gabarito — the wordmark font) */
.t-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Body */
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Eyebrow — uppercase labels used above KPI groups */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xs);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* KPI numeric — tabular, mono */
.t-kpi {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.t-kpi-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.t-num {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Code */
.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ===========================================================
   BASE RESET HOOKS — opt-in, apply class="ads-app" to root
   =========================================================== */
.ads-app {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ads-app * { box-sizing: border-box; }