/* Intranet Commerk — variables CSS.
   1) Tokens del design system Commerk (tokens.json v1), con los mismos nombres y valores,
      para que los componentes de components/bundle.css se pinten en el canvas.
   2) Capa intranet: ajustes AA propuestos (ver artboard "12 · UX copy y patrones nuevos"). */

:root {
  /* Marca */
  --commerk-navy: #030746;
  --commerk-coral: #EC4F61;
  --commerk-cream: #EEE8D5;
  --commerk-royal: #0B0F73;
  --commerk-berry: #C3134F;
  --commerk-ink: #0D0D0D;

  /* Rampas */
  --navy-900: #01031F;
  --navy-800: #020531;
  --navy-700: #030746;
  --navy-600: #0A0F5C;
  --navy-500: #151B78;
  --navy-400: #3A3F93;
  --navy-300: #6B6FB0;
  --navy-200: #A6A8CE;
  --navy-100: #D5D6E7;
  --navy-050: #EDEEF5;
  --coral-900: #7A1622;
  --coral-800: #A62232;
  --coral-700: #CC3247;
  --coral-600: #EC4F61;
  --coral-500: #F26C7B;
  --coral-400: #F79099;
  --coral-300: #FBB6BC;
  --coral-200: #FDD7DB;
  --coral-100: #FEECEE;
  --cream-700: #8C846B;
  --cream-600: #B3AA8D;
  --cream-500: #CFC7AB;
  --cream-400: #E2DBC4;
  --cream-300: #EEE8D5;
  --cream-200: #F4F0E3;
  --cream-100: #FAF8F1;
  --neutral-900: #14161F;
  --neutral-800: #2A2D3A;
  --neutral-700: #454857;
  --neutral-600: #666A7A;
  --neutral-500: #8A8E9C;
  --neutral-400: #B0B3BE;
  --neutral-300: #D2D4DB;
  --neutral-200: #E6E7EC;
  --neutral-100: #F2F3F6;
  --white: #FFFFFF;

  /* Estado */
  --status-success: #127A56;
  --status-success-soft: #E3F3EC;
  --status-warning: #B8791A;
  --status-warning-soft: #FBF0DC;
  --status-danger: #CC3247;
  --status-danger-soft: #FEECEE;
  --status-info: #151B78;
  --status-info-soft: #EDEEF5;

  /* Semánticos */
  --border-color: var(--neutral-200);
  --border-color-strong: var(--neutral-300);
  --border-color-inverse: rgba(255,255,255,.22);
  --text-strong: var(--commerk-navy);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-accent: var(--commerk-coral);
  --text-on-navy: var(--white);
  --text-on-navy-muted: rgba(255,255,255,.72);
  --text-on-coral: var(--white);
  --text-on-cream: var(--commerk-navy);
  --text-disabled: var(--neutral-400);
  --text-link: var(--commerk-navy);
  --text-link-hover: var(--commerk-coral);
  --surface-page: var(--white);
  --surface-page-warm: var(--cream-200);
  --surface-card: var(--white);
  --surface-card-warm: var(--cream-100);
  --surface-sunken: var(--neutral-100);
  --surface-navy: var(--commerk-navy);
  --surface-navy-deep: var(--navy-900);
  --surface-royal: var(--commerk-royal);
  --surface-coral: var(--commerk-coral);
  --surface-cream: var(--commerk-cream);
  --surface-ink: var(--commerk-ink);
  --surface-overlay: rgba(3,7,70,.62);
  --surface-glass: rgba(255,255,255,.08);
  --action-primary-bg: var(--commerk-navy);
  --action-primary-bg-hover: var(--navy-600);
  --action-primary-bg-active: var(--navy-800);
  --action-primary-fg: var(--white);
  --action-accent-bg: var(--commerk-coral);
  --action-accent-bg-hover: var(--coral-700);
  --action-accent-bg-active: var(--coral-800);
  --action-accent-fg: var(--white);
  --action-secondary-bg: rgba(255,255,255,0);
  --action-secondary-border: var(--commerk-navy);
  --action-secondary-fg: var(--commerk-navy);
  --action-secondary-bg-hover: var(--navy-050);
  --action-ghost-fg: var(--commerk-navy);
  --action-ghost-bg-hover: var(--neutral-100);
  --action-inverse-bg: var(--white);
  --action-inverse-fg: var(--commerk-navy);
  --action-inverse-bg-hover: var(--cream-300);
  --action-disabled-bg: var(--neutral-200);
  --action-disabled-fg: var(--neutral-400);
  --field-bg: var(--white);
  --field-bg-disabled: var(--neutral-100);
  --field-border: var(--neutral-300);
  --field-border-hover: var(--neutral-400);
  --field-border-focus: var(--commerk-navy);
  --field-fg: var(--neutral-900);
  --field-placeholder: var(--neutral-500);

  /* Espaciado */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter-sm: 20px;
  --gutter-md: 32px;
  --gutter-lg: 48px;
  --section-y: 96px;
  --section-y-lg: 128px;

  /* Radios */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius-5: 16px;
  --radius-pill: 999px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-surface: 10px;
  --radius-media: 4px;

  /* Sombras */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(3,7,70,.06),0 1px 1px rgba(3,7,70,.04);
  --shadow-2: 0 2px 6px rgba(3,7,70,.07),0 1px 2px rgba(3,7,70,.05);
  --shadow-3: 0 6px 18px rgba(3,7,70,.09),0 2px 6px rgba(3,7,70,.05);
  --shadow-4: 0 16px 40px rgba(3,7,70,.12),0 4px 12px rgba(3,7,70,.06);
  --shadow-5: 0 32px 72px rgba(3,7,70,.18),0 8px 20px rgba(3,7,70,.08);
  --shadow-inset: inset 0 1px 2px rgba(3,7,70,.10);

  /* Tipografía */
  --fs-050: 11px;
  --fs-100: 12px;
  --fs-200: 13px;
  --fs-300: 14px;
  --fs-400: 16px;
  --fs-500: 18px;
  --fs-600: 21px;
  --fs-700: 26px;
  --fs-800: 32px;
  --fs-900: 40px;
  --fs-1000: 52px;
  --fs-1100: 68px;
  --fs-1200: 88px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-heading: 1.24;
  --lh-body: 1.55;
  --lh-loose: 1.72;
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-caps: 0.14em;
  --tracking-caps-wide: 0.32em;

  /* Bordes */
  --border-hairline: 1px;
  --border-regular: 1.5px;
  --border-strong: 2px;
  --border-rule: 3px;

  /* Capas */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* Movimiento */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
  --dur-slower: 520ms;
  --ease-standard: cubic-bezier(.2,.6,.25,1);
  --ease-out: cubic-bezier(.16,.84,.28,1);
  --ease-in: cubic-bezier(.5,0,.9,.4);
  --ease-inout: cubic-bezier(.5,.05,.2,1);
}

/* Capa intranet — ajustes AA propuestos al design system.
   Coral #EC4F61 con texto blanco da 3,6:1 y no alcanza 4,5:1 en botones de 14–16 px.
   coral-700 #CC3247 da 5,1:1. Campos: el borde neutral-300 da 1,5:1 y WCAG 1.4.11 pide 3:1. */
:root {
  --action-accent-bg: var(--coral-700);
  --action-accent-bg-hover: var(--coral-800);
  --action-accent-bg-active: var(--coral-900);
  --text-accent: var(--coral-700);
  --field-border: var(--neutral-500);
  --field-border-hover: var(--neutral-600);
  --field-placeholder: var(--neutral-600);
}