/* ============================================================
   lightYOU Finance — Design System tokens (DEC-022)
   Fonte única de verdade dos tokens da UI (RF-UI-002, AC-016).
   Espelha o :root de design_system/design-system.html (Sprint DS-A).
   Front-end de telas consome SOMENTE var(--*) daqui — NENHUM valor
   visual hardcoded. Token faltante → registre bloqueio, não invente.
   Tema escuro: overrides em html.app-skin-dark (estratégia do tema).
   Tokens "doc-only" (não consumir em telas) vivem só no catálogo.
   ============================================================ */
:root {
  /* --- Brand (inalterados em dark) --- */
  --color-primary:   #3454d1;
  --color-secondary: #64748b;
  --color-success:   #17c666;
  --color-info:      #3dc7be;
  --color-warning:   #ffa21d;
  --color-danger:    #ea4d4d;
  --color-light:     #eff0f6;
  --color-dark:      #283c50;
  --color-darken:    #001327;
  --color-teal:      #41b2c4;
  --color-indigo:    #6610f2;

  /* --- Soft (light) --- */
  --color-soft-primary: #ebeefa;
  --color-soft-success: #e1fbed;
  --color-soft-danger:  #fdeded;
  --color-soft-info:    #dbf5f3;
  --color-soft-warning: #ffebd0;
  --color-soft-teal:    #ddf1f4;
  --color-soft-indigo:  #f1eafe;
  --color-soft-dark:    #e9eff4;
  --color-soft-darken:  #c0dfff;

  /* --- Gray scale (NXL, distinta do --bs-gray-*) --- */
  --color-gray-100: #eff0f6;
  --color-gray-200: #e9ecef;
  --color-gray-300: #e5e7eb;
  --color-gray-400: #ced4da;
  --color-gray-500: #91a1b6;
  --color-gray-600: #64748b;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* --- Superfícies / texto / estados (light) --- */
  --color-bg-body:         #f3f4f6;
  --color-bg-surface:      #ffffff;
  --color-bg-surface-alt:  #eff0f6;
  --color-border:          #e5e7eb;
  --color-border-strong:   #dcdee4;
  --color-divider:         #e5e7eb;
  --color-text-heading:    #283c50;
  --color-text-body:       #6b7885;
  --color-text-muted:      #7587a7;
  --color-text-placeholder:#91a1b6;
  --color-link:            #3454d1;
  --color-focus:           #3454d1;
  --color-backdrop:        #022142;
  --color-table-accent:    #f4f4f9;
  --color-menu-hover-bg:   #eaebef;

  /* --- Font --- */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-base:  .84rem;
  --font-size-body:  .84rem;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1rem;
  --font-size-h6: .9375rem;
  --font-size-small: .875em;
  --font-size-5:5px;  --font-size-6:6px;  --font-size-7:7px;  --font-size-8:8px;
  --font-size-9:9px;  --font-size-10:10px;--font-size-11:11px;--font-size-12:12px;
  --font-size-13:13px;--font-size-14:14px;--font-size-15:15px;--font-size-16:16px;
  --font-size-17:17px;--font-size-18:18px;--font-size-19:19px;--font-size-20:20px;
  --font-size-22:22px;--font-size-24:24px;--font-size-26:26px;--font-size-28:28px;--font-size-30:30px;
  --font-weight-base:400; --font-weight-heading:700; --font-weight-strong:600;
  --font-weight-btn:700; --font-weight-card-title:700; --font-weight-table-th:700;
  --font-weight-form-label:600; --font-weight-dropdown-item:600;
  --font-weight-nxl-link:600; --font-weight-breadcrumb:800; --font-weight-badge:600;
  --line-height-body:1.6; --line-height-heading:1.2;
  --letter-spacing-1:.5px; --letter-spacing-2:1px; --letter-spacing-3:1.5px;
  --letter-spacing-4:2px;  --letter-spacing-5:2.5px;
  --text-transform-btn:uppercase; --text-transform-caption:uppercase; --text-transform-table-th:uppercase;

  --label-margin:6px;                 /* margem inferior de .form-label */
  /* --- Space --- */
  --space-1:5px; --space-2:10px; --space-3:15px; --space-4:20px;
  --space-5:25px; --space-6:30px;
  --space-quarter:4px;                /* micro-espaçamento (gap/me helpers) */
  --space-half:8px;                   /* micro-espaçamento (gap/me helpers) */
  --gutter-x:1.5rem; --gutter-y:0;
  --padding-btn-y:12px; --padding-btn-x:16px;
  --padding-btn-sm-y:7px; --padding-btn-sm-x:15px;  --font-size-btn-sm:9px;
  --padding-btn-md-y:10px;--padding-btn-md-x:15px;  --font-size-btn-md:10px;
  --padding-btn-lg-y:15px;--padding-btn-lg-x:20px;  --font-size-btn-lg:11px;
  --padding-form-control-y:12px; --padding-form-control-x:15px;
  --padding-input-group-text-x:15px;
  --padding-table-th-y:8px; --padding-table-cell:15px;
  --padding-table-x-outer:30px;
  --padding-main-x:30px; --padding-page-header-x:30px; --padding-footer-x:30px;
  --padding-content-area-body:30px;

  /* --- Shell / size --- */
  --size-sidebar:280px; --size-sidebar-mini:100px; --size-logo-sm:42px;
  --width-content:1140px;            /* largura de container de tela (xl Bootstrap) */
  --border-width:1px;                 /* espessura padrão das bordas */
  --heading-margin:8px;               /* margem inferior dos headings (=.5rem@16) */
  --label-margin:6px;                 /* margem inferior de .form-label */
  --padding-code-y:1px; --padding-code-x:5px;
  --padding-badge-y:5px; --padding-badge-x:6px;
  --size-header:80px; --size-page-header:65px; --size-content-header:75px;
  --size-avatar:40px; --size-avatar-xs:12px; --size-avatar-sm:20px;
  --size-avatar-md:30px; --size-avatar-lg:50px; --size-avatar-xl:65px; --size-avatar-xxl:80px;
  --size-dropdown:225px; --size-dropdown-user:300px;
  --size-mega-menu-sm:576px; --size-mega-menu-md:768px; --size-mega-menu-lg:992px;
  --size-mega-menu-xl:1200px; --size-mega-menu-xxl:1400px;
  --bp-sm:576px; --bp-md:768px; --bp-lg:992px; --bp-xl:1200px; --bp-xxl:1400px;

  /* --- Radius --- */
  --radius:4px; --radius-sm:2px; --radius-lg:6px; --radius-xl:1rem; --radius-2xl:2rem;
  --radius-pill:50rem; --radius-circle:50%;
  --radius-btn:3px; --radius-badge:3px; --radius-img:3px;
  --radius-input:5px; --radius-dropdown-item:5px; --radius-accordion:5px;
  --radius-nxl-link:5px; --radius-nxl-link-mini:6px;
  --radius-card:10px; --radius-modal-content:10px;
  --radius-dropdown-bottom:0 0 10px 10px; --radius-dropdown-top:10px 10px 0 0;
  --radius-hamburger:4px;

  /* --- Shadow --- */
  --shadow-card: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-page-header: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-dropdown: 0 10px 24px 0 rgba(62,57,107,.18);
  --shadow-dropdown-top: 0 -10px 24px 0 rgba(62,57,107,.18);
  --shadow-sm: 0 1px 5px rgba(40,60,80,.15);
  --shadow-md: 0 5px 15px rgba(40,60,80,.15);
  --shadow-lg: 0 10px 25px rgba(40,60,80,.15);
  --shadow-xl: 0 15px 35px rgba(40,60,80,.15);
  --shadow-xxl: 0 20px 45px rgba(40,60,80,.15);
  --shadow-card-primary:  0 10px 10px -1px rgba(52,84,209,.3);
  --shadow-card-secondary:0 10px 10px -1px rgba(100,116,139,.3);
  --shadow-card-success:  0 10px 10px -1px rgba(23,198,102,.3);
  --shadow-card-info:     0 10px 10px -1px rgba(61,199,190,.3);
  --shadow-card-warning:  0 10px 10px -1px rgba(255,162,29,.3);
  --shadow-card-danger:   0 10px 10px -1px rgba(234,77,77,.3);
  --shadow-card-light:    0 10px 10px -1px rgba(239,240,246,.3);
  --shadow-card-dark:     0 10px 10px -1px rgba(40,60,80,.3);

  /* --- Motion --- */
  --transition-base: all .3s ease;
  --transition-arrow: all .2s ease-in-out;
  --transition-backdrop: all .2s linear;
  --transition-hamburger: transform .15s ease;
  --transition-card-footer: box-shadow .2s ease-in-out;
  --transition-progress: width .6s ease;
  --transition-options-label: all .5s ease;
  --focus-ring: none;
  --anim-fadein-duration: .4s;
  --anim-infinite-duration: 2s;
  --anim-wave-duration: 1.3s;

  /* --- Z-index --- */
  --z-menu-overlay:1; --z-page-header:1023; --z-header:1025; --z-sidebar:1026;
  --z-card-loader:1030; --z-modal:1055; --z-toast-container:1090; --z-card-expand:99999;

  /* --- Icon --- */
  --icon-size:16px; --icon-size-menu:18px; --icon-size-head-link:20px;
}

/* ===================== DARK (html.app-skin-dark) ===================== */
html.app-skin-dark {
  --color-bg-body:         #121a2d;
  --color-bg-surface:      #0f172a;
  --color-bg-surface-alt:  #1c2438;
  --color-border:          #1b2436;
  --color-border-strong:   #1b2436;
  --color-divider:         #25324a;
  --color-text-heading:    #ffffff;
  --color-text-body:       #b1b4c0;
  --color-link:            #3454d1;
  --color-focus:           #3454d1;
  --color-menu-hover-bg:   #1c2438;
  --color-soft-primary: rgba(52,84,209,.075);
  --color-soft-success: rgba(23,198,102,.075);
  --color-soft-danger:  rgba(234,77,77,.075);
  --color-soft-info:    rgba(61,199,190,.075);
  --color-soft-warning: rgba(255,162,29,.075);
  --color-soft-teal:    rgba(65,178,196,.075);
  --color-soft-indigo:  rgba(102,16,242,.075);
  --color-soft-dark:    rgba(40,60,80,.075);
  --color-soft-darken:  rgba(0,19,39,.075);
  --color-gray-100:#131c31; --color-gray-200:#151e34; --color-gray-300:#162038;
  --color-gray-400:#18223c; --color-gray-500:#19253f; --color-gray-600:#1b2743;
  --shadow-dropdown: 0 4px 24px 0 rgba(4,0,40,.8);
  --shadow-dropdown-top: 0 -4px 24px 0 rgba(4,0,40,.8);
}