/*
  LCG Solutions Design Tokens · 2026
  CSS moderno usado aquí:
  - @layer: fija el orden de la cascada desde el origen y evita parches de especificidad.
  - oklch(): define escalas perceptualmente uniformes derivadas del esmeralda y naranja del logo.
  - clamp(): produce tipografía y espacios fluidos con límites previsibles.

  Contrastes WCAG 2.x verificados sobre sRGB (21-09-2026):
  - accent-500 oklch(55% .150 64) / #FFFFFF = 5.03:1 -> AA texto normal.
  - accent-500 / #000000 = 4.17:1 -> NO AA texto normal; por eso el CTA naranja usa texto blanco.
  - primary-700 / #FFFFFF = 6.20:1 -> AA texto normal.
  - primary-900 / #FFFFFF = 14.71:1 -> AAA.
  - neutral-950 / #FFFFFF = 18.07:1 -> AAA.
  - neutral-600 / #FFFFFF = 6.51:1 -> AA.
  - success / #FFFFFF = 4.57:1 -> AA.
  - danger / #FFFFFF = 5.61:1 -> AA.
  - info / #FFFFFF = 4.65:1 -> AA.
  - warning / #000000 = 7.73:1 -> AAA; warning usa texto oscuro.
*/

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --color-primary-50: #e7fce7;
    --color-primary-50: oklch(97% 0.035 145);
    --color-primary-100: #ccf5cc;
    --color-primary-100: oklch(93% 0.07 145);
    --color-primary-500: #12a02f;
    --color-primary-500: oklch(61.5% 0.188 145);
    --color-primary-700: #286f2f;
    --color-primary-700: oklch(48% 0.12 145);
    --color-primary-900: #072f0c;
    --color-primary-900: oklch(27% 0.075 145);

    --color-accent-500: #ac5900;
    --color-accent-500: oklch(55% 0.15 64);
    --color-accent-600: #934900;
    --color-accent-600: oklch(49% 0.145 64);

    --color-neutral-0: #fafdFA;
    --color-neutral-0: oklch(99% 0.004 150);
    --color-neutral-100: #eff3f0;
    --color-neutral-100: oklch(96% 0.006 150);
    --color-neutral-300: #c5cccf;
    --color-neutral-300: oklch(84% 0.009 230);
    --color-neutral-600: #555f67;
    --color-neutral-600: oklch(48% 0.018 240);
    --color-neutral-950: #0f171d;
    --color-neutral-950: oklch(20% 0.018 240);

    --color-success: #308639;
    --color-success: oklch(55% 0.14 145);
    --color-warning: #ce9200;
    --color-warning: oklch(70% 0.15 80);
    --color-danger: #c9222b;
    --color-danger: oklch(54% 0.20 25);
    --color-info: #2378c2;
    --color-info: oklch(56% 0.14 250);

    --color-bg: #ffffff;
    --color-surface: var(--color-neutral-0);
    --color-surface-muted: var(--color-neutral-100);
    --color-text: var(--color-neutral-950);
    --color-text-muted: var(--color-neutral-600);
    --color-border: var(--color-neutral-300);
    --color-link: var(--color-primary-700);
    --color-focus: var(--color-info);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --radius-sm: 0.75rem;
    --radius-md: 1.125rem;
    --radius-lg: 1.75rem;
    --radius-pill: 999px;

    --shadow-sm: 0 8px 24px color-mix(in oklch, var(--color-neutral-950) 8%, transparent);
    --shadow-md: 0 18px 50px color-mix(in oklch, var(--color-neutral-950) 12%, transparent);

    --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.18rem, 1.08rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.42rem, 1.23rem + 0.85vw, 1.95rem);
    --step-3: clamp(1.78rem, 1.42rem + 1.5vw, 2.75rem);
    --step-4: clamp(2.2rem, 1.7rem + 2.45vw, 4rem);
    --step-5: clamp(2.75rem, 1.95rem + 3.65vw, 5.4rem);

    --content-wide: 74rem;
    --content-narrow: 52rem;
    --header-height: 4.75rem;
  }
}