/* ════════════════════════════════════════════════════════
   CETREL DESIGN TOKENS
   Modo claro (padrão) + escuro via [data-theme="dark"]
   ════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND ─────────────────────────────────────────── */
  --brand-blue-900:   #0D2E5C;
  --brand-blue-800:   #1B5EA8;   /* azul principal */
  --brand-blue-700:   #2470BF;
  --brand-blue-600:   #3A8DC4;   /* azul médio */
  --brand-blue-500:   #5BA8D6;
  --brand-blue-400:   #84C0E4;
  --brand-blue-200:   #C5DFF2;
  --brand-blue-100:   #E2F0F9;
  --brand-blue-50:    #F0F7FD;

  --brand-amber-900:  #7A3A00;
  --brand-amber-800:  #B55A00;
  --brand-amber-600:  #F5A623;
  --brand-amber-500:  #F7BC55;
  --brand-amber-200:  #FDECC4;
  --brand-amber-100:  #FEF5E4;
  --brand-amber-50:   #FFFBF2;

  --brand-green-900:  #1A4010;
  --brand-green-800:  #2E6B1E;
  --brand-green-700:  #3E8C28;
  --brand-green-600:  #5BAD3E;
  --brand-green-500:  #7CC25F;
  --brand-green-200:  #CDE9BE;
  --brand-green-100:  #E6F4DC;
  --brand-green-50:   #F3FAF0;

  /* ─── NEUTRALS ──────────────────────────────────────── */
  --neutral-950: #0C0D0E;
  --neutral-900: #1A1C1E;
  --neutral-800: #2E3135;
  --neutral-700: #45494F;
  --neutral-600: #5E6370;
  --neutral-500: #7C8290;
  --neutral-400: #9CA3AF;
  --neutral-300: #C4C9D2;
  --neutral-200: #DDE1E8;
  --neutral-150: #E8ECF2;
  --neutral-100: #F0F3F7;
  --neutral-50:  #F7F9FB;

  /* ─── SEMÂNTICAS ────────────────────────────────────── */
  --color-success:        var(--brand-green-600);
  --color-success-bg:     var(--brand-green-50);
  --color-success-border: var(--brand-green-200);
  --color-success-text:   var(--brand-green-800);

  --color-warning:        var(--brand-amber-600);
  --color-warning-bg:     var(--brand-amber-50);
  --color-warning-border: var(--brand-amber-200);
  --color-warning-text:   var(--brand-amber-800);

  --color-danger:         #D42B2B;
  --color-danger-bg:      #FEF0F0;
  --color-danger-border:  #F5B8B8;
  --color-danger-text:    #8B1A1A;

  --color-info:           var(--brand-blue-600);
  --color-info-bg:        var(--brand-blue-50);
  --color-info-border:    var(--brand-blue-200);
  --color-info-text:      var(--brand-blue-800);

  /* ─── SUPERFÍCIES (modo claro) ──────────────────────── */
  --surface-bg:       #FFFFFF;
  --surface-subtle:   var(--neutral-50);
  --surface-card:     #FFFFFF;
  --surface-overlay:  rgba(0, 0, 0, 0.45);

  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-focus:     var(--brand-blue-600);

  /* ─── TEXTOS (modo claro) ───────────────────────────── */
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-disabled:    var(--neutral-400);
  --text-on-brand:    #FFFFFF;
  --text-link:        var(--brand-blue-700);
  --text-link-hover:  var(--brand-blue-900);

  /* ─── SIDEBAR ────────────────────────────────────────── */
  --sidebar-bg:       var(--brand-blue-800);
  --sidebar-text:     rgba(255, 255, 255, 0.85);
  --sidebar-active:   rgba(255, 255, 255, 0.15);
  --sidebar-hover:    rgba(255, 255, 255, 0.08);
  --sidebar-border:   rgba(255, 255, 255, 0.12);

  /* ─── TIPOGRAFIA ─────────────────────────────────────── */
  --font-sans:  'Sora', system-ui, -apple-system, sans-serif;
  --font-mono:  'Source Code Pro', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

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

  /* ─── ESPAÇAMENTO ────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─── BORDAS ─────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ─── SOMBRAS ────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.16);

  /* ─── TRANSIÇÕES ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ─── LAYOUT ─────────────────────────────────────────── */
  --sidebar-width:      260px;
  --sidebar-collapsed:  64px;
  --header-height:      64px;
  --content-max-width:  900px;
}

/* ════════════════════════════════════════════════════════
   MODO ESCURO
   ════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --surface-bg:       var(--neutral-950);
  --surface-subtle:   var(--neutral-900);
  --surface-card:     var(--neutral-800);
  --surface-overlay:  rgba(0, 0, 0, 0.65);

  --border-default:   var(--neutral-700);
  --border-strong:    var(--neutral-600);
  --border-focus:     var(--brand-blue-400);

  --text-primary:     var(--neutral-50);
  --text-secondary:   var(--neutral-400);
  --text-disabled:    var(--neutral-600);
  --text-link:        var(--brand-blue-400);
  --text-link-hover:  var(--brand-blue-200);

  --sidebar-bg:       var(--neutral-900);
  --sidebar-text:     rgba(255, 255, 255, 0.75);
  --sidebar-active:   rgba(255, 255, 255, 0.10);
  --sidebar-hover:    rgba(255, 255, 255, 0.06);
  --sidebar-border:   rgba(255, 255, 255, 0.08);

  --color-success-bg:     rgba(91, 173, 62, 0.12);
  --color-warning-bg:     rgba(245, 166, 35, 0.12);
  --color-danger-bg:      rgba(212, 43, 43, 0.12);
  --color-info-bg:        rgba(58, 141, 196, 0.12);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.60);
}

/* Respeita preferência do sistema quando não há toggle manual */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-bg:       var(--neutral-950);
    --surface-subtle:   var(--neutral-900);
    --surface-card:     var(--neutral-800);
    --surface-overlay:  rgba(0, 0, 0, 0.65);
    --border-default:   var(--neutral-700);
    --border-strong:    var(--neutral-600);
    --border-focus:     var(--brand-blue-400);
    --text-primary:     var(--neutral-50);
    --text-secondary:   var(--neutral-400);
    --text-disabled:    var(--neutral-600);
    --text-link:        var(--brand-blue-400);
    --text-link-hover:  var(--brand-blue-200);
    --sidebar-bg:       var(--neutral-900);
    --sidebar-text:     rgba(255, 255, 255, 0.75);
    --sidebar-active:   rgba(255, 255, 255, 0.10);
    --sidebar-hover:    rgba(255, 255, 255, 0.06);
    --sidebar-border:   rgba(255, 255, 255, 0.08);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.60);
  }
}