/* =====================================================================
   APICE S.A. — Sistema de Diseño (design tokens)
   Colores corporativos conservados del sitio original apice.com.co:
     · Teal petróleo  rgb(49,101,99)  = #316563   ← primario Apice
     · Teal oscuro    rgb(39,81,79)   = #27514F
     · Teal claro     rgb(90,132,130) = #5A8482
     · Cian acento    rgb(0,188,212)  = #00BCD4
   ===================================================================== */

:root {
  /* ---- Escala de marca (derivada de #316563) ---- */
  --brand-50:  #F1F7F6;
  --brand-100: #DCEBE9;
  --brand-200: #B9D6D3;
  --brand-300: #8FB9B6;
  --brand-400: #5A8482;
  --brand-500: #3D7B78;
  --brand-600: #316563;
  --brand-700: #27514F;
  --brand-800: #1E403E;
  --brand-900: #16302F;
  --brand-950: #0C1F1E;

  /* ---- Acento cian (energía / IA / datos) ---- */
  --accent-200: #B8F0F8;
  --accent-300: #6EE7F5;
  --accent-400: #22D3EE;
  --accent-500: #00BCD4;
  --accent-600: #0396AC;
  --accent-700: #077285;

  /* ---- Acento cálido (certificaciones, distinciones) ---- */
  --gold-200: #FAEBC6;
  --gold-300: #F5D48A;
  --gold-400: #E8B958;
  --gold-500: #D69E2E;
  --gold-600: #B07C1B;

  /* ---- Prioridades de ticket ---- */
  --p1: #D92D20;
  --p2: #E8722B;
  --p3: #2E90FA;
  --p4: #667085;

  /* ---- Tipografía ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* ---- Radios, medidas, motion ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-full: 999px;
  --container: 1240px;
  --header-h: 74px;
  --ease: cubic-bezier(0.22, 0.7, 0.32, 1);
  --dur: 220ms;
}

/* ============================ TEMA CLARO ============================ */
:root,
:root[data-theme="light"] {
  --bg: #F5F9F9;
  --bg-soft: #EBF2F2;
  --surface: #FFFFFF;
  --surface-2: #F7FAFA;
  --surface-3: #EDF3F3;
  --surface-brand: var(--brand-50);
  --border: #DDE7E6;
  --border-soft: #EBF1F0;
  --border-strong: #C4D4D3;

  --text: #10201F;
  --text-soft: #465957;
  --text-muted: #6E807E;
  --text-inv: #F1F7F6;

  --primary: var(--brand-600);
  --primary-hov: var(--brand-700);
  --primary-fg: #FFFFFF;
  --on-brand-soft: var(--brand-700);
  --link: var(--brand-600);

  --ok-bg: #E7F6EE;     --ok-fg: #16663A;     --ok-bd: #AADFC2;
  --warn-bg: #FEF4E2;   --warn-fg: #8A580F;   --warn-bd: #F2D69C;
  --danger-bg: #FDECEC; --danger-fg: #A81C1C; --danger-bd: #F2BABA;
  --info-bg: #E8F1FB;   --info-fg: #17558F;   --info-bd: #B0CFEE;
  --neutral-bg: #EDF1F1;--neutral-fg: #445655;--neutral-bd: #D2DBDA;
  --accent-bg: #E1F7FA; --accent-fg: #08606F; --accent-bd: #A5E4EE;

  --shadow-xs: 0 1px 2px rgba(16, 40, 39, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 40, 39, 0.08), 0 1px 2px rgba(16, 40, 39, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 40, 39, 0.08), 0 2px 4px rgba(16, 40, 39, 0.04);
  --shadow-lg: 0 14px 34px rgba(16, 40, 39, 0.10), 0 4px 10px rgba(16, 40, 39, 0.05);
  --shadow-xl: 0 28px 64px rgba(16, 40, 39, 0.14), 0 8px 20px rgba(16, 40, 39, 0.06);
  --shadow-brand: 0 14px 32px rgba(49, 101, 99, 0.24);

  --glass: rgba(255, 255, 255, 0.72);
  --glass-bd: rgba(255, 255, 255, 0.6);
  --hero-ink: #FFFFFF;
  --grid-line: rgba(49, 101, 99, 0.07);
  --ring: rgba(49, 101, 99, 0.36);
}

/* ============================ TEMA OSCURO =========================== */
:root[data-theme="dark"] {
  --bg: #081413;
  --bg-soft: #0C1C1B;
  --surface: #102322;
  --surface-2: #152D2B;
  --surface-3: #1B3735;
  --surface-brand: #12312F;
  --border: #22423F;
  --border-soft: #1A3331;
  --border-strong: #305A57;

  --text: #E8F2F1;
  --text-soft: #AFC5C3;
  --text-muted: #85A09D;
  --text-inv: #10201F;

  --primary: #4B9793;
  --primary-hov: #5FAEAA;
  --primary-fg: #04100F;
  --on-brand-soft: var(--accent-300);
  --link: #6FC7C2;

  --ok-bg: #0E2E1F;     --ok-fg: #6EDCA1;     --ok-bd: #1E5537;
  --warn-bg: #33260C;   --warn-fg: #F0C165;   --warn-bd: #5C441A;
  --danger-bg: #351516; --danger-fg: #F58C8C; --danger-bd: #62292B;
  --info-bg: #0F2438;   --info-fg: #86BDF0;   --info-bd: #234B72;
  --neutral-bg: #1A2E2D;--neutral-fg: #A3B7B5;--neutral-bd: #2C4643;
  --accent-bg: #062C33; --accent-fg: #6EE7F5; --accent-bd: #0D4E5A;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-brand: 0 14px 32px rgba(0, 188, 212, 0.16);

  --glass: rgba(16, 35, 34, 0.72);
  --glass-bd: rgba(111, 199, 194, 0.14);
  --hero-ink: #EAF6F5;
  --grid-line: rgba(111, 199, 194, 0.07);
  --ring: rgba(111, 199, 194, 0.38);
}

/* Gradientes (dependen del tema, se declaran después de ambos) */
:root {
  --grad-brand: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 48%, var(--brand-500) 100%);
  --grad-accent: linear-gradient(135deg, var(--brand-600) 0%, var(--accent-600) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 100%);
  --grad-hero:
    radial-gradient(1100px 560px at 80% -12%, rgba(0, 188, 212, 0.26) 0%, transparent 62%),
    radial-gradient(820px 480px at 4% 10%, rgba(90, 132, 130, 0.32) 0%, transparent 58%);
}

:root[data-theme="dark"] {
  --grad-brand: linear-gradient(135deg, #0B201F 0%, #14403D 50%, #1B4F4B 100%);
  --grad-hero:
    radial-gradient(1100px 560px at 80% -12%, rgba(0, 188, 212, 0.20) 0%, transparent 62%),
    radial-gradient(820px 480px at 4% 10%, rgba(49, 101, 99, 0.42) 0%, transparent 58%);
}