/* ============================================================
   IdeHub Design System — Colors & Typography
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Hairline.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-UltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sloop Script";
  src: url("fonts/SloopScriptBoldTwo-Regular.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* === BRAND COLORS === */
  --ide-orange: #f2752f;          /* Primary accent — used for highlights, CTAs */
  --ide-orange-soft: #f3c27d;     /* Secondary warm accent — for italic display */
  --ide-orange-deep: #c95a1c;     /* Pressed / contrast variant */
  --ide-ink: #100f0d;             /* True brand black — backgrounds, hero */
  --ide-ink-2: #111111;           /* Pure ink — for type on white */
  --ide-paper: #ffffff;           /* White surface */
  --ide-offwhite: #f4eee2;        /* Brand off-white (matches "Off white" tee) */
  --ide-cream: #faf6ee;
  --ide-marrom: #4a3024;          /* Dark brown — earthy palette */
  --ide-verde-militar: #596247;   /* Military green — earthy palette */

  /* === NEUTRALS (stone scale) === */
  --stone-50:  #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;

  /* === SEMANTIC === */
  --bg:            var(--ide-paper);
  --bg-inverse:    var(--ide-ink);
  --bg-muted:      var(--stone-50);
  --surface:       #ffffff;
  --surface-dark:  #100f0d;

  --fg:            var(--stone-950);
  --fg-1:          var(--stone-950);   /* primary text */
  --fg-2:          var(--stone-600);   /* secondary text */
  --fg-3:          var(--stone-500);   /* muted text */
  --fg-4:          var(--stone-400);   /* disabled / hint */
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  #d6d3d1;            /* stone-300 on dark */
  --fg-accent:     var(--ide-orange);

  --border:        rgba(17, 17, 17, 0.08);
  --border-strong: rgba(17, 17, 17, 0.16);
  --border-dark:   rgba(255, 255, 255, 0.10);

  --success:       #059669;
  --success-soft:  #d1fae5;
  --whatsapp:      #25D366;
  --whatsapp-deep: #128C7E;

  /* === RADII === */
  --radius-sm: 0.5rem;     /* 8px  - tags */
  --radius-md: 1rem;       /* 16px - inputs */
  --radius-lg: 1.5rem;     /* 24px - small cards */
  --radius-xl: 2rem;       /* 32px - main cards (signature) */
  --radius-2xl: 3rem;      /* 48px - footer top, hero blocks */
  --radius-pill: 9999px;   /* pill — used everywhere for buttons & nav */

  /* === SPACING (4pt scale) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === SHADOWS === */
  --shadow-sm:    0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-card:  0 18px 60px rgba(17, 17, 17, 0.06);
  --shadow-card-hover: 0 26px 80px rgba(17, 17, 17, 0.12);
  --shadow-pop:   0 18px 55px rgba(28, 25, 23, 0.16);
  --shadow-hero:  0 25px 80px rgba(0, 0, 0, 0.30);
  --shadow-cta:   0 12px 30px rgba(242, 117, 47, 0.35);

  /* === MOTION === */
  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 180ms;
  --dur: 220ms;
  --dur-slow: 500ms;

  /* === TYPE FAMILIES === */
  --font-sans:    "Montserrat", "Inter", ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script:  "Sloop Script", "Playfair Display", cursive;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* === TYPE TOKENS === */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.24em;
}

/* ---------- TYPE PRIMITIVES ---------- */
html { color: var(--fg-1); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — gigantic black sans (signature IdeHub headline style) */
.t-display-xl {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.9rem, 8vw, 8.3rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
}
.t-display-l {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
}

/* Italic accent — Playfair Display Black Italic, used on a single accent word */
.t-accent-italic {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  color: var(--ide-orange);
  font-size: clamp(3.6rem, 10vw, 9.6rem);
  line-height: 0.95;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.05;
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* Eyebrow / kicker — uppercase tight tracking — used over every section */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ide-orange);
}
.t-eyebrow-light { color: var(--ide-orange-soft); }

p, .p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-2);
}
.p-lg {
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Tags / chips */
.t-tag {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Numeric / mono accent (used as 01 / 02 / 03 step counters) */
.t-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--ide-orange-soft);
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}