/* =============================================================
   Trazatech · AIDC Consulting — Design Tokens
   Brand System 2026
   ============================================================= */

/* ---------- Webfonts ----------
   Inter Tight (display) hosted locally as variable font.
   Inter (body) + JetBrains Mono (data) from Google Fonts. */
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================
     COLOR — BRAND (verde de marca muestreado del logo)
     Hue HSL 85.6° preservado en toda la escala
     ===================================================== */
  --brand-50:  #F5F7F2;
  --brand-100: #E8EEE1;
  --brand-200: #CEDCBB;
  --brand-300: #AAC783;
  --brand-400: #94C454;
  --brand-500: #8CC63E;  /* ★ BRAND PRIMARY — verde real del logo */
  --brand-600: #73A530;
  --brand-700: #5B8424;  /* AA-L sobre blanco */
  --brand-800: #456519;  /* AA sobre blanco para texto */
  --brand-900: #2C4110;
  --brand-on-dark: #A5D269; /* AAA sobre --ink-950 */

  /* =====================================================
     COLOR — INK (neutros cálidos, no gris frío)
     ===================================================== */
  --ink-950: #0C1406;    /* hero / footer dark */
  --ink-900: #101510;
  --ink-700: #2F3B40;    /* body text */
  --ink-500: #5C6A6E;    /* muted text */
  --ink-300: #D5DAD3;    /* borders */
  --ink-100: #F4F5F2;
  --ink-50:  #FAFAF7;    /* surface alterna, neutro cálido */
  --surface-0: #FFFFFF;

  /* Wordmark "TECH" gris (sólo logo en claro) */
  --logo-tech-grey: #999999;

  /* =====================================================
     COLOR — ESTADOS
     ===================================================== */
  --success-500: #16A34A;
  --warning-500: #D97706;
  --error-500:   #DC2626;
  --info-500:    #0369A1;

  --success-bg: rgba(22,163,74,0.12);
  --warning-bg: rgba(217,119,6,0.12);
  --error-bg:   rgba(220,38,38,0.12);
  --info-bg:    rgba(3,105,161,0.12);

  /* =====================================================
     SEMANTIC ALIASES
     ===================================================== */
  --fg-strong: var(--ink-900);
  --fg:        var(--ink-700);
  --fg-muted:  var(--ink-500);
  --fg-brand:  var(--brand-800);     /* verde para texto sobre blanco */
  --fg-on-dark: rgba(255,255,255,0.88);
  --fg-on-dark-muted: rgba(255,255,255,0.6);
  --fg-brand-on-dark: var(--brand-on-dark);

  --bg:        var(--surface-0);
  --bg-alt:    var(--ink-50);
  --bg-dark:   var(--ink-950);

  --border:        var(--ink-300);
  --border-strong: var(--ink-500);
  --border-on-dark: rgba(255,255,255,0.12);
  --border-on-dark-strong: rgba(255,255,255,0.25);

  /* =====================================================
     TYPOGRAPHY
     ===================================================== */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale (clamp min / preferred / max) */
  --text-display: clamp(3.5rem, 6vw, 6rem);          /* 56→96 */
  --text-h1:      clamp(2.5rem, 4.5vw, 4rem);        /* 40→64 */
  --text-h2:      clamp(2rem, 3vw, 2.5rem);          /* 32→40 */
  --text-h3:      clamp(1.5rem, 2.2vw, 1.75rem);     /* 24→28 */
  --text-h4:      1.25rem;                            /* 20 */
  --text-lead:    clamp(1.125rem, 1.4vw, 1.25rem);   /* 18→20 */
  --text-body:    1.0625rem;                          /* 17 */
  --text-sm:      0.9375rem;                          /* 15 */
  --text-xs:      0.8125rem;                          /* 13 */
  --text-mono:    0.875rem;                           /* 14 — JetBrains */
  --text-eyebrow: 0.8125rem;                          /* 13, uppercase */

  --tracking-display: -0.03em;
  --tracking-h1:      -0.025em;
  --tracking-h2:      -0.02em;
  --tracking-h3:      -0.015em;
  --tracking-body:    -0.005em;
  --tracking-eyebrow: 0.12em;

  --leading-tight:  1.02;
  --leading-snug:   1.15;
  --leading-normal: 1.4;
  --leading-body:   1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* =====================================================
     RADII — sistema 16px-first
     ===================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;   /* card / panel default */
  --radius-xl:   24px;   /* hero illustrations / large surfaces */
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* =====================================================
     SHADOWS — multinivel (no planas).
     Liquid Glass aplicado con disciplina.
     ===================================================== */
  --shadow-xs:  0 1px 2px rgba(12,20,6,0.04);
  --shadow-sm:  0 1px 3px rgba(12,20,6,0.06), 0 1px 2px rgba(12,20,6,0.04);
  --shadow-md:  0 4px 6px -1px rgba(12,20,6,0.07), 0 2px 4px -1px rgba(12,20,6,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(12,20,6,0.08), 0 4px 6px -2px rgba(12,20,6,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(12,20,6,0.10), 0 10px 10px -5px rgba(12,20,6,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(12,20,6,0.18);
  --shadow-brand: 0 8px 24px -6px rgba(140,198,62,0.45);
  --shadow-inner: inset 0 1px 2px rgba(255,255,255,0.18);

  --focus-ring: 0 0 0 4px rgba(140,198,62,0.28);

  /* =====================================================
     EASING — restringido. Sin bounces salvo en delight.
     ===================================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;
  --dur-stately: 420ms;

  /* =====================================================
     BLUR / GLASS (uso con disciplina sobre dark)
     ===================================================== */
  --blur-glass: blur(12px) saturate(1.4);
  --blur-overlay: blur(20px) saturate(1.4);

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container-max: 1280px;
  --container-pad: var(--space-6);
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--text-h4); letter-spacing: -0.01em; }

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--fg-strong);
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--brand-500); }

p { color: var(--fg); text-wrap: pretty; }
.lead { font-size: var(--text-lead); color: var(--fg); line-height: 1.55; }

a {
  color: var(--fg-brand);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--brand-700); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-900);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semi);
  color: var(--fg-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.small  { font-size: var(--text-sm);  color: var(--fg-muted); }
.xsmall { font-size: var(--text-xs);  color: var(--fg-muted); }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* =============================================================
   UTILITIES
   ============================================================= */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: var(--space-9) 0; }
.section-alt { background: var(--bg-alt); }

.surface-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  --fg: var(--fg-on-dark);
  --fg-strong: #ffffff;
  --fg-muted: var(--fg-on-dark-muted);
  --fg-brand: var(--brand-on-dark);
  --border: var(--border-on-dark);
}

/* Liquid-glass noise overlay (5%) for dark surfaces */
.noise::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}