/* =========================================================
   Zemploo Design System - Colors & Type
   Dark-mode first. Three brand accents on graphite ground.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- RAW COLORS ---------- */

  /* Brand accents (from the logo) */
  --magenta-500: #E91E78;          /* primary brand magenta - "economizam tempo" */
  --magenta-400: #F24A93;
  --magenta-600: #C9145F;
  --magenta-100: rgba(233, 30, 120, 0.12);

  --blue-500: #2D7DFF;             /* electric blue - growth, arrow, "resultado" */
  --blue-400: #5A9BFF;
  --blue-600: #1A5FD9;
  --blue-100: rgba(45, 125, 255, 0.12);

  --amber-500: #F2C14E;            /* hourglass amber - time, flourish only */
  --amber-400: #F7D275;
  --amber-600: #D49E2E;
  --amber-100: rgba(242, 193, 78, 0.14);

  /* Surfaces (dark) */
  --graphite-900: #0E1014;         /* deepest - modal underlay */
  --graphite-800: #16181D;         /* page background */
  --graphite-700: #1F2228;         /* card surface - Carbon */
  --graphite-600: #282C34;         /* card hover */
  --graphite-500: #353A44;         /* divider strong */

  /* Foregrounds */
  --bone:  #F4F4F2;                /* primary text / headlines on dark */
  --mist:  #A8ADB8;                /* body / secondary text */
  --slate: #6B7280;                /* tertiary, captions, metadata */
  --steel: #4A5060;                /* disabled */

  /* Light surfaces (alternate light-mode pages, accent sections) */
  --paper:    #FAFAF7;             /* page light alt */
  --paper-2:  #F1F0EB;             /* card on paper */
  --paper-3:  #E4E2DA;             /* divider on paper */
  --ink:      #14161B;             /* dark text on paper */

  /* Brand gradients (use on hero halos, section dividers, CTA backgrounds) */
  --grad-brand:    linear-gradient(120deg, #E91E78 0%, #2D7DFF 100%);
  --grad-warm:     linear-gradient(120deg, #E91E78 0%, #F2C14E 100%);
  --grad-cool:     linear-gradient(120deg, #2D7DFF 0%, #5A9BFF 100%);
  --grad-trio:     linear-gradient(120deg, #E91E78 0%, #F2C14E 50%, #2D7DFF 100%);
  --grad-page:     radial-gradient(1200px 700px at 80% -10%, rgba(233,30,120,0.18), transparent 60%),
                   radial-gradient(1000px 600px at 0% 100%, rgba(45,125,255,0.16), transparent 60%),
                   #16181D;

  /* Page tones - alternate across the carta to break the all-black register */
  --tone-dark:     #16181D;                                                       /* graphite default */
  --tone-light:    #FAFAF7;                                                       /* paper */
  --tone-magenta:  radial-gradient(1100px 800px at 85% -10%, rgba(233,30,120,0.32), transparent 60%),
                   radial-gradient(900px 700px at -10% 110%, rgba(45,125,255,0.18), transparent 60%),
                   #14161B;                                                       /* magenta-washed dark */
  --tone-blue:     radial-gradient(1100px 800px at -10% 0%, rgba(45,125,255,0.30), transparent 60%),
                   radial-gradient(800px 700px at 110% 110%, rgba(233,30,120,0.16), transparent 60%),
                   #12141A;                                                       /* blue-washed dark */
  --tone-paper-pink: radial-gradient(900px 700px at 95% -10%, rgba(233,30,120,0.18), transparent 60%),
                     radial-gradient(700px 600px at -10% 110%, rgba(45,125,255,0.10), transparent 60%),
                     #FAFAF7;                                                     /* light w/ pink halo */

  /* Borders */
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  /* Glows (use sparingly - hero CTAs / emphasis) */
  --glow-magenta: 0 0 60px -20px rgba(233, 30, 120, 0.45);
  --glow-blue:    0 0 60px -20px rgba(45, 125, 255, 0.45);

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg-page:       var(--graphite-800);
  --bg-card:       var(--graphite-700);
  --bg-card-hover: var(--graphite-600);
  --bg-overlay:    rgba(14, 16, 20, 0.72);

  --fg-1: var(--bone);             /* headlines */
  --fg-2: var(--mist);             /* body */
  --fg-3: var(--slate);            /* captions */
  --fg-4: var(--steel);            /* disabled */

  --accent-primary:   var(--magenta-500);    /* time / emphasis */
  --accent-secondary: var(--blue-500);       /* growth / direction */
  --accent-tertiary:  var(--amber-500);      /* time-detail flourish */

  --border-default: var(--hairline);
  --border-strong:  var(--hairline-strong);
  --border-magenta: var(--magenta-500);
  --border-blue:    var(--blue-500);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SIZES ---------- */
  --text-display-xl: clamp(56px, 6vw, 88px);   /* cover headline */
  --text-display-l:  clamp(44px, 4.5vw, 64px); /* page H1 */
  --text-display-m:  clamp(32px, 3vw, 44px);   /* H2 / section title */
  --text-h3:         24px;
  --text-h4:         18px;
  --text-body-l:     17px;                     /* hero subcopy */
  --text-body:       15px;
  --text-body-s:     13px;
  --text-caption:    12px;
  --text-eyebrow:    11px;

  /* ---------- TYPE WEIGHTS ---------- */
  --weight-bold:    700;
  --weight-semi:    600;
  --weight-medium:  500;
  --weight-regular: 400;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* ---------- LETTER SPACING ---------- */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.18em;

  /* ---------- SPACING (8px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-card: 14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  600ms;
}

/* =========================================================
   Semantic element styles - drop-in defaults
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-display-l); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-display-m); }
h3 { font-size: var(--text-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--text-h4); line-height: var(--lh-snug); letter-spacing: 0; }

p {
  margin: 0;
  color: var(--fg-2);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--text-caption);
  color: var(--fg-3);
}

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

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

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

/* Highlight spans for hero copy: <span class="hl-magenta">economizam tempo</span> */
.hl-magenta { color: var(--accent-primary); }
.hl-blue    { color: var(--accent-secondary); }
.hl-amber   { color: var(--accent-tertiary); }

/* Standard card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}
.card--feature { border-radius: var(--radius-lg); padding: var(--sp-6); }
.card--accent-magenta { border-top: 2px solid var(--border-magenta); }
.card--accent-blue    { border-top: 2px solid var(--border-blue); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--text-body);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  letter-spacing: 0;
}
.btn--primary {
  background: var(--accent-primary);
  color: var(--bone);
  box-shadow: var(--glow-magenta);
}
.btn--primary:hover { filter: brightness(1.08); }
.btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg-1);
}
.btn--secondary:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--bone);
}
.btn:active { transform: scale(0.98); }