/* ============================================================
   FileVault — Design System · variables.css
   Paleta industrial: #FF7F11 · #ACBFA4 · #E2E8CE · #262626
   ============================================================ */

:root {
  /* ── Paleta de marca ── */
  --orange:        #FF7F11;
  --orange-dim:    #CC6509;
  --orange-bright: #FF9D47;
  --orange-glow:   rgba(255, 127, 17, 0.18);
  --orange-subtle: rgba(255, 127, 17, 0.08);

  --sage:          #ACBFA4;
  --sage-dim:      #8AA07F;
  --sage-bright:   #C4D4BB;
  --sage-subtle:   rgba(172, 191, 164, 0.12);

  --cream:         #E2E8CE;
  --cream-dim:     #C8D1AE;
  --cream-bright:  #EFF2E0;
  --cream-subtle:  rgba(226, 232, 206, 0.07);

  --carbon:        #262626;
  --carbon-mid:    #303030;
  --carbon-light:  #3A3A3A;
  --carbon-lighter:#464646;

  /* ── Semánticos de estado ── */
  --success:       #4CAF7D;
  --success-dim:   rgba(76, 175, 125, 0.15);
  --warning:       #F0A500;
  --warning-dim:   rgba(240, 165, 0, 0.15);
  --danger:        #E84040;
  --danger-dim:    rgba(232, 64, 64, 0.15);
  --info:          #4A9EDB;
  --info-dim:      rgba(74, 158, 219, 0.15);

  /* ── Superficies (modo oscuro por defecto) ── */
  --surface-base:    #1A1A1A;
  --surface-raised:  #222222;
  --surface-overlay: #2A2A2A;
  --surface-inset:   #161616;
  --surface-card:    #242424;
  --surface-hover:   #2E2E2E;

  /* ── Bordes ── */
  --border-subtle:  rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-accent:  rgba(255, 127, 17, 0.35);
  --border-focus:   rgba(255, 127, 17, 0.7);

  /* ── Texto ── */
  --text-primary:   #E8E4DA;
  --text-secondary: #A09A8C;
  --text-tertiary:  #5C574F;
  --text-accent:    #FF7F11;
  --text-inverse:   #1A1A1A;
  --text-code:      #ACBFA4;

  /* ── Tipografía ── */
  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'Barlow', sans-serif;
  --font-mono:      'IBM Plex Mono', monospace;

  --font-size-xs:   0.65rem;   /* 10.4px */
  --font-size-sm:   0.75rem;   /* 12px   */
  --font-size-base: 0.875rem;  /* 14px   */
  --font-size-md:   1rem;      /* 16px   */
  --font-size-lg:   1.125rem;  /* 18px   */
  --font-size-xl:   1.375rem;  /* 22px   */
  --font-size-2xl:  1.75rem;   /* 28px   */
  --font-size-3xl:  2.5rem;    /* 40px   */
  --font-size-4xl:  3.5rem;    /* 56px   */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.8;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.06em;
  --letter-spacing-wider:    0.1em;
  --letter-spacing-widest:   0.2em;

  /* ── Espaciado ── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Radios ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.55);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.65);
  --shadow-accent: 0 0 20px rgba(255, 127, 17, 0.25);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.4);

  /* ── Layout ── */
  --sidebar-width:          240px;
  --sidebar-collapsed-width: 60px;
  --topbar-height:           52px;
  --content-max-width:       1400px;

  /* ── Transiciones ── */
  --transition-fast:    100ms ease;
  --transition-base:    180ms ease;
  --transition-slow:    320ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-sidebar: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   20;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-loader:   400;
}

/* ── Modo claro (override) ── */
[data-theme="light"] {
  --surface-base:    #F5F4EF;
  --surface-raised:  #FFFFFF;
  --surface-overlay: #F0EEE8;
  --surface-inset:   #ECEAE3;
  --surface-card:    #FFFFFF;
  --surface-hover:   #EDEBE4;

  --border-subtle:  rgba(38, 38, 38, 0.06);
  --border-default: rgba(38, 38, 38, 0.11);
  --border-strong:  rgba(38, 38, 38, 0.2);

  --text-primary:   #1E1C18;
  --text-secondary: #5A554C;
  --text-tertiary:  #9A9488;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);
}