/* ============================================================
   APPTIMIZAR — colors & type tokens
   Source: sources/brandkit-v1.1.md, sources/logos-and-code-v1.1.md
   ============================================================ */

:root {
  /* ─── Brand primary ─── */
  --brand-primary:        #059669;  /* Emerald 600 — main brand green, "app", CTAs */
  --brand-primary-hover:  #047857;  /* Emerald 700 — primary button hover */
  --brand-dark:           #111827;  /* Gray 900 — "timizar", primary text */

  /* ─── Emerald scale ─── */
  --emerald-50:           #ECFDF5;  /* card / tag backgrounds */
  --emerald-100:          #D1FAE5;  /* hover backgrounds, soft borders */
  --emerald-200:          #A7F3D0;  /* accent dividers, hover borders */
  --emerald-400:          #34D399;  /* text on dark backgrounds */
  --emerald-600:          #059669;  /* alias of brand-primary */
  --emerald-700:          #047857;  /* alias of brand-primary-hover */

  /* ─── Neutrals ─── */
  --white:                #FFFFFF;
  --gray-50:              #F9FAFB;  /* alternate section bg */
  --gray-100:             #F3F4F6;  /* default borders, separators */
  --gray-200:             #E5E7EB;  /* button/input borders */
  --gray-400:             #9CA3AF;  /* tertiary text, placeholders */
  --gray-500:             #6B7280;  /* secondary text */
  --gray-900:             #111827;  /* primary text, "timizar" */
  --gray-950:             #030712;  /* footer / dark sections */

  /* ─── Semantic ─── */
  --error:                #F87171;  /* Red 400 */
  --error-bg:             #FEF2F2;  /* Red 50 */

  /* ─── Semantic foreground / background tokens ─── */
  --fg-1:                 var(--gray-900);  /* primary text */
  --fg-2:                 var(--gray-500);  /* secondary text */
  --fg-3:                 var(--gray-400);  /* tertiary text / placeholders */
  --fg-on-dark:           var(--white);
  --fg-accent:            var(--emerald-600);

  --bg-1:                 var(--white);     /* main */
  --bg-2:                 var(--gray-50);   /* alt section */
  --bg-3:                 var(--gray-100);  /* input bg, separators */
  --bg-dark:              var(--gray-950);  /* footer, dark mode */
  --bg-highlight:         var(--emerald-600); /* highlight section bg */
  --bg-soft-emerald:      var(--emerald-50);

  --border-1:             var(--gray-100);
  --border-2:             var(--gray-200);
  --border-hover:         var(--emerald-200);
  --border-focus:         var(--emerald-400);

  /* ─── Typography ─── */
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-stack); /* Inter or system-ui in display weight */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Sizes — base / md (responsive) */
  --fs-h1:        36px;  --fs-h1-md:        60px;  /* hero */
  --fs-h2:        30px;  --fs-h2-md:        36px;  /* section title */
  --fs-h3:        20px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-tag:       12px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:     1.1;
  --lh-snug:      1.2;
  --lh-normal:    1.4;
  --lh-relaxed:   1.55;

  --ls-tight:     -0.02em; /* -1px on display */
  --ls-snug:      -0.5px;
  --ls-normal:    0;
  --ls-wider:     0.08em;  /* tags */

  /* ─── Radii ─── */
  --radius-button: 12px;
  --radius-input:  12px;
  --radius-card:   16px;
  --radius-pill:   9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-emerald: 0 10px 25px -10px rgba(5, 150, 105, 0.30);

  /* ─── Layout ─── */
  --max-width:           1152px;
  --section-py:          80px;
  --section-py-md:       112px;
  --section-px:          20px;
  --gap-cards:           24px;
  --card-padding:        24px;

  /* ─── Motion ─── */
  --ease-out:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast:       150ms;
  --duration-base:       300ms;
}

/* ============================================================
   Semantic type styles
   ============================================================ */

html { font-family: var(--font-stack); color: var(--fg-1); }
body { margin: 0; background: var(--bg-1); color: var(--fg-1); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
@media (min-width: 768px) {
  h1, .h1 { font-size: var(--fs-h1-md); }
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
@media (min-width: 768px) {
  h2, .h2 { font-size: var(--fs-h2-md); }
}

h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tag {
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-accent);
}

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

a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--emerald-700); }