/* 2DAYMIND Design Tokens — Paleta Metálica Premium */

:root {
  /* ── Brand palette — valores crudos (referencias Pantone) ── */
  --petroleo-profundo:   #07111F;   /* Pantone 2965 C */
  --petroleo-metalico:   #0F1F2D;   /* Pantone 5477 C */
  --petroleo-electrico:  #1C5D6E;   /* Pantone 5473 C */
  --dorado-premium:      #C6A15A;   /* Pantone 872 C */
  --plata-cognitiva:     #E1E4E8;   /* Pantone Cool Gray 1 C */
  --antracita:           #2B3138;   /* Pantone 432 C */

  /* ── Derivados cromáticos ── */
  --dorado-light:        #D4B478;
  --dorado-dark:         #A8873D;
  --petro-elec-light:    #2A7A8F;
  --petro-elec-dark:     #124A57;
  --petroleo-oscuro:     #040C16;
  --petroleo-surface-2:  #162433;

  --error:    #dc3545;
  --success:  #22c55e;

  /* ── Tipografía ── */
  --font-title: 'Montserrat', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* ── Escala de espaciado ── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* ── Radios ── */
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;
  --r-20:   20px;
  --r-full: 9999px;

  /* ── Transiciones ── */
  --t-fast:   0.15s ease;
  --t-mid:    0.25s ease;
  --t-slow:   0.45s ease;

  /* ── Tamaños de texto ── */
  --txt-10: 10px;
  --txt-11: 11px;
  --txt-12: 12px;
  --txt-13: 13px;
  --txt-15: 15px;
  --txt-17: 17px;
  --txt-20: 20px;
  --txt-24: 24px;
  --txt-30: 30px;
}

/* ════════════════════════════════════════
   Tema OSCURO (por defecto)
   ════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-page:         var(--petroleo-profundo);
  --bg-card:         var(--petroleo-metalico);
  --bg-card-alt:     var(--petroleo-surface-2);
  --bg-input:        rgba(4, 12, 22, 0.7);

  --border-subtle:   rgba(28, 93, 110, 0.22);
  --border-default:  rgba(28, 93, 110, 0.4);
  --border-focus:    rgba(28, 93, 110, 0.9);

  --text-primary:    #CDD5DF;
  --text-secondary:  #8796A8;
  --text-strong:     #EEF1F5;
  --text-muted:      #56636F;
  --text-label:      #98A6B5;
  --text-placeholder:rgba(86, 99, 111, 0.8);

  --accent:          var(--petroleo-electrico);
  --accent-hover:    var(--petro-elec-light);
  --cta:             var(--dorado-premium);

  --grad-card:  linear-gradient(148deg, #192E40 0%, #0F1F2D 32%, #09171F 100%);
  --grad-btn:   linear-gradient(135deg, #D4B478 0%, #C6A15A 50%, #A8873D 100%);
  --grad-page:  radial-gradient(ellipse 110% 65% at 50% 105%, rgba(28,93,110,0.30) 0%, rgba(12,26,40,0.18) 42%, #07111F 72%);

  --shadow-card:  0 28px 70px rgba(0,0,0,0.72),
                  0 0 0 1px rgba(28,93,110,0.13),
                  inset 0 1px 0 rgba(255,255,255,0.04),
                  inset 0 -1px 0 rgba(0,0,0,0.25);
  --shadow-btn:   0 6px 22px rgba(198,161,90,0.38),
                  inset 0 1px 0 rgba(255,255,255,0.20),
                  inset 0 -1px 0 rgba(0,0,0,0.18);
  --shadow-input: inset 0 2px 5px rgba(0,0,0,0.45);

  --icon-stroke:   #5F7282;
  --badge-bg:      rgba(12, 26, 40, 0.65);
  --badge-border:  rgba(28, 93, 110, 0.18);
  --sep-color:     rgba(86, 99, 111, 0.28);
  --shimmer:       rgba(255,255,255,0.13);
  --toggle-bg:     rgba(20, 34, 50, 0.92);
  --toggle-border: rgba(28, 93, 110, 0.5);
}

/* ════════════════════════════════════════
   Tema CLARO
   ════════════════════════════════════════ */
[data-theme="light"] {
  --bg-page:         #C8CDD4;
  --bg-card:         #FFFFFF;
  --bg-card-alt:     #F3F5F7;
  --bg-input:        #F9FAFB;

  --border-subtle:   rgba(43, 49, 56, 0.10);
  --border-default:  rgba(43, 49, 56, 0.18);
  --border-focus:    rgba(28, 93, 110, 0.62);

  --text-primary:    #38454F;
  --text-secondary:  #67788A;
  --text-strong:     #1B2530;
  --text-muted:      #8A97A5;
  --text-label:      #526070;
  --text-placeholder:rgba(103, 120, 138, 0.65);

  --accent:          #1a6a7e;
  --accent-hover:    var(--petro-elec-dark);
  --cta:             var(--dorado-premium);

  --grad-card:  linear-gradient(148deg, #FFFFFF 0%, #FAFBFC 55%, #F3F5F8 100%);
  --grad-btn:   linear-gradient(135deg, #D4B478 0%, #C6A15A 50%, #A8873D 100%);
  --grad-page:  radial-gradient(ellipse 110% 65% at 50% 105%, rgba(28,93,110,0.10) 0%, rgba(185,200,215,0.22) 42%, #C8CDD4 72%);

  --shadow-card:  0 15px 50px rgba(0,0,0,0.10),
                  0 0 0 1px rgba(43,49,56,0.07),
                  inset 0 1px 0 rgba(255,255,255,0.95);
  --shadow-btn:   0 6px 22px rgba(198,161,90,0.25),
                  inset 0 1px 0 rgba(255,255,255,0.30),
                  inset 0 -1px 0 rgba(0,0,0,0.10);
  --shadow-input: inset 0 1px 3px rgba(0,0,0,0.07);

  --icon-stroke:   #8A97A5;
  --badge-bg:      rgba(240, 243, 246, 0.85);
  --badge-border:  rgba(43, 49, 56, 0.09);
  --sep-color:     rgba(103, 120, 138, 0.22);
  --shimmer:       rgba(255,255,255,0.38);
  --toggle-bg:     rgba(210, 218, 226, 0.92);
  --toggle-border: rgba(43, 49, 56, 0.18);
}