/* ============================================================
   GreenData · Design System
   colors_and_type.css
   Inteligencia integrada de activos.
   "GreenData no convence. Demuestra."
   ============================================================ */

/* All three brand families are self-hosted from uploaded variable fonts. No CDN. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND ---------- */
  --gd-deep:        #0A2540; /* institutional — backgrounds, authority text, premium surfaces */
  --gd-teal:        #00B5B8; /* brand accent — the gesture of intelligence (acento, never fondo) */
  --gd-teal-light:  #5BC8DB; /* teal in gradients / large fills */

  /* ---------- NEUTRALS ---------- */
  --gd-white:       #FFFFFF; /* space, breathing room, base background */
  --gd-paper:       #F7F8FA; /* editorial reading background, section fills */
  --gd-mist:        #E4E8EE; /* borders, separators, hairlines */
  --gd-steel:       #8A95A5; /* secondary text, metadata, mono labels */
  --gd-graphite:    #3B4858; /* body text */
  --gd-obsidian:    #0E1620; /* brand black, dark footers */

  /* ---------- SIGNAL · data & states ONLY, never decoration ---------- */
  --gd-signal-green:  #00D67D; /* positive, savings, achievement */
  --gd-signal-amber:  #FFB020; /* attention, threshold, payback */
  --gd-signal-red:    #FF4747; /* risk, excess, alert */
  --gd-insight-purple:#7B5CFF; /* finding, non-obvious data point */

  /* ---------- SEMANTIC ALIASES ---------- */
  --fg-1: var(--gd-deep);      /* primary heading / authority */
  --fg-2: var(--gd-graphite);  /* body */
  --fg-3: var(--gd-steel);     /* muted / metadata */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.70);
  --fg-on-dark-3: rgba(255,255,255,0.40);
  --bg-base:   var(--gd-white);
  --bg-subtle: var(--gd-paper);
  --bg-dark:   var(--gd-deep);
  --bg-black:  var(--gd-obsidian);
  --accent:    var(--gd-teal);
  --border:    var(--gd-mist);
  --border-strong: #CDD4DE;
  --border-on-dark: rgba(255,255,255,0.12);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;          /* Display + UI — the visible voice */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;              /* Data, labels, metadata, code */
  --font-serif: 'Source Serif 4', Georgia, serif;                       /* Editorial, quotes, manifesto */

  /* ---------- TYPE SCALE (px) ---------- */
  --fs-display: 88px;  /* cover headline */
  --fs-h1:      36px;  /* section title */
  --fs-h2:      28px;  /* chapter heading */
  --fs-h3:      20px;  /* subsection */
  --fs-h4:      16px;  /* card heading */
  --fs-lead:    21px;  /* serif lead paragraph */
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;  /* mono eyebrow */
  --fs-label:   10px;  /* mono spec label */
  --fs-micro:   8px;   /* mono caption */

  /* ---------- SPACING (8px base; 4px sub-step) ---------- */
  --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;

  /* ---------- GRID ---------- */
  --grid-web-cols: 12;
  --grid-web-gutter: 24px;
  --grid-deck-gutter: 32px;
  --grid-doc-cols: 6;
  --max-width: 1280px;

  /* ---------- RADII (restrained — never pill, never blob) ---------- */
  --radius-xs: 4px;   /* KPI cards, chart boxes, dense data surfaces */
  --radius-sm: 6px;   /* business cards, report covers, primary cards */
  --radius-md: 10px;  /* large panels, email signature blocks */
  --radius-full: 999px; /* dots, nodes, status indicators only */

  /* ---------- BORDERS ---------- */
  --border-hair: 1px solid var(--gd-mist);
  --border-accent: 2px solid var(--gd-teal); /* the left/top accent rule on data cards */

  /* ---------- ELEVATION (cool, deep-tinted; never neutral grey) ---------- */
  --shadow-sm: 0 1px 2px rgba(10,37,64,0.06), 0 1px 3px rgba(10,37,64,0.10);
  --shadow-md: 0 16px 40px -10px rgba(10,37,64,0.18);
  --shadow-lg: 0 20px 50px -15px rgba(10,37,64,0.30);
  --shadow-xl: 0 30px 60px -20px rgba(10,37,64,0.40), 0 18px 36px -18px rgba(0,0,0,0.30);

  /* ---------- MOTION (sober ease-out; the interface settles, never bounces) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;

  /* ---------- GRADIENTS (structural accents only — bars, rules) ---------- */
  --grad-bar: linear-gradient(90deg, var(--gd-teal) 0%, var(--gd-teal-light) 50%, var(--gd-deep) 100%);
  --grad-bar-tight: linear-gradient(90deg, var(--gd-teal) 0%, var(--gd-deep) 100%);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.gd-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -2.5px;
  color: var(--gd-deep);
}
.gd-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--gd-deep);
}
.gd-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--gd-deep);
}
.gd-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--gd-deep);
}
.gd-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--gd-deep);
}
.gd-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--gd-deep);
}
.gd-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gd-graphite);
}
.gd-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gd-graphite);
}
/* Mono eyebrow — the recurring GreenData signature: uppercase, tracked, teal */
.gd-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gd-teal);
}
.gd-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gd-steel);
}
.gd-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.2px;
  color: var(--gd-graphite);
}
.gd-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gd-deep);
  line-height: 1.45;
}
.gd-accent { color: var(--gd-teal); }