/* themes/lemoncode/tokens.css
 * Tokens de identidad del tema LemonCode (dark-first + acento amarillo limón).
 * SCOPEADOS al container con la clase del tema activo. Regla CLAUDE.md §6: NUNCA en :root.
 *
 * Hablan el MISMO vocabulario que el resto de temas (--accent, --bg-*, --label-*, --fill-*,
 * --separator, --shadow-*) con valores propios, para que las secciones del motor (Hero, Services,
 * Steps, Faq, Header, Footer) rindan con esta identidad sin tocar su geometría (§5).
 *
 * A diferencia de befound/service-app (light-first), LemonCode VIVE EN OSCURO: la base del
 * container ya es la paleta oscura del mockup. El override [data-color-scheme="light"] existe por
 * completitud del motor, pero el default de marca es oscuro. Valores oklch verbatim del mockup
 * (v1-designer-html) para clonar 1:1.
 */

.lcl-container.theme-lemoncode {
  /* Tipografía: Sora (display, geométrica con carácter) + Manrope (cuerpo) + JetBrains Mono
     (eyebrows/etiquetas, el guiño "code"). */
  --font-display: "Sora", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-serif:   ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica — titulares grandes y confiados (del mockup). */
  --fs-display:  clamp(40px, 5vw, 64px);
  --fs-title-1:  22px;
  --fs-title-2:  19px;
  --fs-title-3:  17px;
  --fs-headline: 16px;
  --fs-body:     17px;
  --fs-callout:  15px;
  --fs-footnote: 12px;

  /* Weights (Sora llega a 800 para los display). */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line heights */
  --lh-tight:   1.03;
  --lh-snug:    1.1;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  /* Acento amarillo limón (del logo). Sobre el amarillo va texto OSCURO (--accent-contrast =
     --bg-primary), nunca crema — es la regla de contraste del mockup. Los derivados salen de
     --accent-2 (tono más profundo del mockup) y de color-mix para pressed/soft. */
  --accent:          oklch(0.88 0.17 100);
  --accent-2:        oklch(0.80 0.16 96);
  --accent-hover:    var(--accent-2);
  --accent-pressed:  color-mix(in oklab, var(--accent) 82%, #000);
  --accent-bg-soft:  color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-contrast: oklch(0.24 0.004 95); /* = --bg-primary: texto oscuro sobre el amarillo */

  /* Hero · aurora (variante de gradiente animado, por si se usa): tonos derivados del acento. */
  --hero-aurora-1: var(--accent);
  --hero-aurora-2: color-mix(in oklab, var(--accent) 70%, oklch(0.7 0.12 120));
  --hero-aurora-3: color-mix(in oklab, var(--accent) 60%, oklch(0.75 0.13 80));

  /* Labels (texto) — crema, NO blanco puro (tinte amarillo del wordmark). */
  --label-primary:    oklch(0.96 0.03 100);
  --label-secondary:  oklch(0.80 0.02 100);
  --label-tertiary:   oklch(0.62 0.015 100);
  --label-quaternary: oklch(0.50 0.012 100);

  /* Fills (superficies sutiles: ghost buttons, chips) — escalonados sobre el carbón. */
  --fill-1: oklch(0.31 0.006 95);
  --fill-2: oklch(0.34 0.006 95);
  --fill-3: oklch(0.38 0.006 95);

  /* Backgrounds en capas (carbón cálido, casi negro → superficie elevada). Del mockup. */
  --bg-primary:   oklch(0.24 0.004 95);
  --bg-secondary: oklch(0.28 0.005 95);
  --bg-tertiary:  oklch(0.31 0.006 95);

  /* Superficie de tarjeta/panel (cards, browser mockup, inputs). */
  --surface: oklch(0.31 0.006 95);

  /* Separadores: líneas finas de 1px. --line-2 = borde un poco más marcado (dots, dashed, hover). */
  --separator: oklch(0.38 0.006 95);
  --line-2:    oklch(0.44 0.007 95);

  /* Radios — LemonCode usa pill en botones (999px) y cards de esquina grande (18px). */
  --r-xs:   7px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* Sombras profundas para el modo oscuro (nunca "glow" de acento sin propósito). */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 8px 24px -12px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 30px 80px -30px rgba(0, 0, 0, 0.60);
  --shadow-accent: none; /* los botones del mockup no llevan glow amarillo */
}

/* Modo Claro (override por si el operador lo fuerza en el editor). LemonCode es dark-first, así que
   este set es secundario; mantiene el amarillo como acento sobre base clara neutra. */
.lcl-container.theme-lemoncode[data-color-scheme="light"],
.lcl-container.theme-lemoncode [data-color-scheme="light"] {
  --label-primary:    oklch(0.26 0.01 95);
  --label-secondary:  oklch(0.42 0.012 95);
  --label-tertiary:   oklch(0.56 0.012 95);
  --label-quaternary: oklch(0.68 0.010 95);

  --fill-1: oklch(0.96 0.004 95);
  --fill-2: oklch(0.93 0.005 95);
  --fill-3: oklch(0.90 0.006 95);

  --bg-primary:   oklch(0.99 0.003 95);
  --bg-secondary: oklch(0.965 0.004 95);
  --bg-tertiary:  oklch(0.94 0.005 95);
  --surface:      oklch(1 0 0);

  --separator: oklch(0.90 0.006 95);
  --line-2:    oklch(0.84 0.008 95);

  --accent-contrast: oklch(0.26 0.01 95); /* sobre amarillo, texto oscuro también en claro */
}