/*
  LCG Solutions Design Tokens · 2026-10
  Paleta derivada del logo (esmeralda + naranja) y de TIMES (verde azulado sobre fondos profundos).
  Contrastes WCAG 2.x verificados en sRGB:
  - accent-500 #AC5900 / #FFFFFF = 5.03:1 -> AA (botón principal con texto blanco).
  - primary-700 #286F2F / #FFFFFF = 6.20:1 -> AA.
  - neutral-950 #0F171D / #FFFFFF = 18.07:1 -> AAA.
  - neutral-600 #555F67 / #FFFFFF = 6.51:1 -> AA.
  - #FFFFFF / ink-950 #061219 = 18.95:1 -> AAA (texto sobre secciones oscuras).
  - on-dark-muted #B9C9D3 / ink-950 = 11.15:1 -> AAA.
  - mint-300 #8EE6A2 / ink-950 = 12.62:1 -> AAA (acentos de texto sobre oscuro).
  - teal-300 #5EDCC4 / ink-900 #0A1C24 = 10.39:1 -> AAA.
*/

@layer tokens, base, components, utilities;

@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/fonts/inter-display-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

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

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Marca */
    --color-primary-50: #ecfbef;
    --color-primary-100: #d3f5da;
    --color-primary-300: #8ee6a2;
    --color-primary-500: #12a02f;
    --color-primary-600: #13892e;
    --color-primary-700: #286f2f;
    --color-primary-900: #072f0c;

    --color-teal-300: #5edcc4;
    --color-teal-500: #0fa48b;
    --color-teal-700: #087969;

    --color-accent-400: #d9771c;
    --color-accent-500: #ac5900;
    --color-accent-600: #934900;

    /* Superficies oscuras (portada, TIMES, cierre) */
    --color-ink-950: #061219;
    --color-ink-900: #0a1c24;
    --color-ink-800: #10303a;
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #b9c9d3;
    --color-on-dark-line: rgb(255 255 255 / 0.12);

    /* Neutros claros */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #f6f9f7;
    --color-neutral-100: #eef3f0;
    --color-neutral-200: #e0e8e3;
    --color-neutral-300: #c5cccf;
    --color-neutral-600: #555f67;
    --color-neutral-950: #0f171d;

    /* Estados de TIMES (mismos colores que el sistema) */
    --state-disponible: #16a34a;
    --state-almuerzo: #d97706;
    --state-bano: #0284c7;
    --state-reunion: #7c3aed;
    --state-permiso: #db2777;
    --state-capacitacion: #0d9488;
    --state-desconectado: #94a3b8;

    --color-bg: #ffffff;
    --color-surface: var(--color-neutral-0);
    --color-surface-muted: var(--color-neutral-50);
    --color-text: var(--color-neutral-950);
    --color-text-muted: var(--color-neutral-600);
    --color-border: var(--color-neutral-200);
    --color-link: var(--color-primary-700);
    --color-focus: #2378c2;

    --gradient-dark: radial-gradient(900px 600px at 85% -10%, rgb(15 164 139 / 0.28), transparent 60%),
                     radial-gradient(700px 520px at -10% 110%, rgb(18 160 47 / 0.22), transparent 60%),
                     linear-gradient(160deg, var(--color-ink-950), var(--color-ink-900));
    --gradient-brand: linear-gradient(120deg, var(--color-primary-700), var(--color-teal-700));

    --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 rgb(15 23 29 / 0.07);
    --shadow-md: 0 18px 50px rgb(15 23 29 / 0.12);
    --shadow-lg: 0 40px 100px rgb(0 0 0 / 0.45);

    --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, 3.75rem);
    --step-5: clamp(2.6rem, 1.9rem + 3.3vw, 4.8rem);

    --content-wide: 76rem;
    --content-narrow: 52rem;
    --header-height: 4.5rem;
  }
}