/*
 * Variables de diseño de Flowmerce 2.0, según la dirección elegida por el cliente
 * (docs/DISENO.md, "Dirección visual elegida por el cliente"). Tres capas: valores,
 * uso y componente. Las hojas de componentes usan solo las de uso y las de componente.
 */
@layer tokens, base, components, layout, screens;

@layer tokens {
  :root {
    --blue-600: #1660c2;
    --blue-700: #114fa2;
    --blue-50: #eff4ff;
    --gray-950: #101828;
    --gray-700: #344054;
    --gray-600: #475467;
    --gray-500: #667085;
    --gray-300: #d0d5dd;
    --gray-200: #eaecf0;
    --gray-100: #f2f4f7;
    --gray-50: #f9fafb;
    --canvas: #f5f6f8;
    --white: #fff;
    --green-700: #067647;
    --green-50: #ecfdf3;
    --amber-700: #b54708;
    --amber-50: #fffaeb;
    --red-700: #b42318;
    --red-50: #fef3f2;

    --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.875rem;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

    --radius-control: 8px;
    --radius-card: 12px;
    --radius-sheet: 16px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-float: 0 24px 48px -12px rgb(16 24 40 / 18%);

    --duration-short: 160ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    --sidebar-width: 264px;
    --topbar-height: 64px;
    --touch-min: 44px;

    /* Uso */
    --color-canvas: var(--canvas);
    --color-surface: var(--white);
    --color-surface-alt: var(--gray-50);
    --color-surface-hover: var(--gray-100);
    --color-line: var(--gray-200);
    --color-control-border: var(--gray-300);
    --color-text: var(--gray-950);
    --color-text-muted: var(--gray-600);
    --color-text-subtle: var(--gray-500);
    --color-action: var(--blue-600);
    --color-action-hover: var(--blue-700);
    --color-action-soft: var(--blue-50);
    --color-on-action: var(--white);
    --color-success: var(--green-700);
    --color-success-soft: var(--green-50);
    --color-warning: var(--amber-700);
    --color-warning-soft: var(--amber-50);
    --color-danger: var(--red-700);
    --color-danger-soft: var(--red-50);
    --color-focus: var(--blue-600);

    /* Colores de empresa: tinta y fondo de su distintivo */
    --company-petroleo-ink: #0f6e7a; --company-petroleo-bg: #e8f3f4;
    --company-violeta-ink: #6b4fa3;  --company-violeta-bg: #f1edf8;
    --company-oxido-ink: #9a3f22;    --company-oxido-bg: #f8ece8;
    --company-pino-ink: #2f6e45;     --company-pino-bg: #eaf3ee;
    --company-anil-ink: #1f5aa8;     --company-anil-bg: #e9f0fa;
    --company-mostaza-ink: #7a5110;  --company-mostaza-bg: #f6f0e6;

    color-scheme: light;
  }
}