@layer legacy, tokens, base, components, layout, utilities;

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

    --brand-600: #1a73e8;
    --brand-700: #174ea6;
    --brand-800: color-mix(in srgb, var(--brand-700) 88%, var(--text));
    --brand-900: color-mix(in srgb, var(--brand-700) 84%, var(--text));
    --brand-100: color-mix(in srgb, var(--brand-600) 12%, white);
    --brand-50: color-mix(in srgb, var(--brand-600) 6%, white);

    --canvas: #f3f6fa;
    --surface: #ffffff;
    --surface-muted: #f6f8fc;
    --surface-raised: #ffffff;
    --text: #172033;
    --text-secondary: #667085;
    --border: #e2e7ef;
    --border-strong: #cbd4e1;

    --success: #1f7a45;
    --success-soft: #edf8f1;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --warning: #9a6700;
    --warning-soft: #fffaeb;

    --module-finance: #1f7a45;
    --module-balance: #0f766e;
    --module-pergola: #a86400;
    --module-access: #5b5bd6;
    --module-map: #087f9c;
    --module-tickets: var(--brand-600);
    --module-polls: #4f46e5;
    --module-gate: var(--danger);
    --module-users: var(--brand-600);
    --module-permissions: #7c3aed;
    --module-convivencia: #c2410c;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-control: 0.75rem;
    --radius-surface: 1rem;
    --radius-dialog: 1.25rem;
    --radius-launcher: 1.5rem;
    --radius-sheet: 2rem;
    --radius-pill: 999px;

    --shadow-subtle: 0 1px 2px color-mix(in srgb, var(--brand-700) 6%, transparent);
    --shadow-surface: 0 8px 24px color-mix(in srgb, var(--brand-700) 8%, transparent);
    --shadow-dialog: 0 16px 48px color-mix(in srgb, var(--brand-700) 14%, transparent);

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-product: "Geist", var(--font-sans);
    --font-login: var(--font-product);
    --text-page-title: clamp(1.625rem, 4vw, 2rem);
    --text-section-title: clamp(1.125rem, 2vw, 1.375rem);
    --text-body: 1rem;
    --text-secondary-size: 0.875rem;
    --text-label: 0.875rem;
    --text-caption: 0.75rem;
    --weight-medium: 560;
    --weight-semibold: 650;
    --weight-bold: 720;
    --leading-body: 1.55;

    --control-height: 3.25rem;
    --touch-target: 3rem;
    --transition-fast: 160ms ease;
    --transition-normal: 220ms ease;
    --transition-surface: 300ms ease-in-out;
    --content-task: 64rem;
    --content-standard: 72rem;
    --content-wide: 77.5rem;
    --content-max: var(--content-wide);
    --dialog-max: 68rem;
    --launcher-max: 50rem;
    --login-max: 29rem;

    /* Puente controlado para estilos de módulos previos a este sistema. */
    --surface-soft: var(--surface-muted);
    --muted: var(--text-secondary);
    --line: var(--border);
    --primary: var(--brand-600);
    --primary-hover: var(--brand-700);
    --radius: var(--radius-control);
    --ink: var(--text);
    --blue: var(--brand-600);
    --navy: var(--brand-700);
    --mist: var(--brand-50);
    --shadow: var(--shadow-surface);
  }
}