/* Variables de marca: colores, tipografía, espacios y tiempos */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --brand: #5D9634;
  --brand-dark: #1B4322;
  --brand-deep: #132F18;
  --brand-surface: #EBF3EC;
  --brand-border: #D2E5D5;
  --brand-glow: #DCEBD9;
  --brand-tint: #F4FAEF;
  --lime: #A6E22E;
  --sand: #EFE4CF;

  --ink: #1A2F22;
  --ink-body: #545454;
  --ink-soft: #66736A;
  --ink-muted: #8898AA;

  --surface-page: #F8F9F5;
  --surface-muted: #F3F5F3;
  --border: #E4E4E7;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --fs-lead: clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --tracking-tight: -.025em;
  --tracking-wide: .2em;

  --gutter: 16px;
  --container: 1240px;
  --section-y: clamp(4.5rem, 3rem + 5vw, 8rem);
  --header-h: 68px;

  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 22px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-card: 0 2px 12px rgb(0 0 0 / .03);
  --shadow-lift: 0 8px 30px rgb(0 0 0 / .08);
  --shadow-brand: 0 24px 80px rgb(27 67 34 / .12);

  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-media: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

/* Degradados compartidos con EPE-Web: src/index.css y brandGradients.ts. */
:root {
  --brand-gradient: linear-gradient(135deg, #86c653, #65a338);
  --brand-gradient-border: linear-gradient(135deg, #bce19c, #52842e);
  --brand-gradient-glow: rgb(93 150 52 / .45);
  --brand-gradient-mid: #77af4c;
  --brand-active-shadow: 0 10px 26px -8px rgb(93 150 52 / .6), 0 0 24px -6px var(--brand-gradient-glow), inset 0 1px 0 rgb(255 255 255 / .3);
  --brand-hover-shadow: 0 12px 30px -8px var(--brand-gradient-glow), inset 0 1px 0 rgb(255 255 255 / .4);
  --brand-pressed-shadow: 0 1px 4px -1px var(--brand-gradient-glow);
}

@supports (color: oklch(from #5D9634 l c h)) {
  :root {
    --brand-gradient: linear-gradient(135deg, oklch(from var(--brand) calc(l + 0.13) calc(c * 1.35) h), oklch(from var(--brand) calc(l + 0.03) calc(c * 1.3) h));
    --brand-gradient-border: linear-gradient(135deg, oklch(from var(--brand) calc(l + 0.28) calc(c * 0.9) h), oklch(from var(--brand) calc(l - 0.04) calc(c * 1.1) h));
    --brand-gradient-glow: color-mix(in oklch, var(--brand) 45%, transparent);
    --brand-gradient-mid: oklch(from var(--brand) calc(l + 0.08) calc(c * 1.2) h);
    --brand-active-shadow: 0 10px 26px -8px oklch(from var(--brand) calc(l + 0.08) calc(c * 1.3) h / .6), 0 0 24px -6px oklch(from var(--brand) calc(l + 0.1) calc(c * 1.3) h / .45), inset 0 1px 0 rgb(255 255 255 / .3);
  }
}