/* ============================================================
   Salux Initia — Color Tokens
   Core palette → scales → semantic aliases
   ============================================================ */

:root {
  /* --- Core brand hues (reference / "core tokens") --- */
  --blue-50:  #e6f4fc;
  --blue-100: #c0e3f7;
  --blue-200: #96d0f1;
  --blue-300: #6bbcea;
  --blue-400: #38a3e0;  /* Azul Light */
  --blue-500: #0687d1;  /* Azul Default — PRIMARY */
  --blue-600: #0570b0;  /* Azul Dark */
  --blue-700: #045a8f;
  --blue-800: #03436b;
  --blue-900: #022d47;

  /* Navy — "Segurança e Inteligência" */
  --navy-50:  #e7eaf1;
  --navy-100: #c3cad9;
  --navy-200: #9aa6c0;
  --navy-300: #5f6f95;
  --navy-400: #26375f;
  --navy-500: #0a1a3f;  /* Navy Light */
  --navy-600: #010d2c;  /* Navy Default — base fg / dark surfaces */
  --navy-700: #010a22;
  --navy-800: #000816;  /* Navy Dark */
  --navy-900: #00050e;

  /* Gold — "Percepção e Decisão" (secondary accent) */
  --gold-50:  #fdedc9;
  --gold-100: #f7dca3;
  --gold-200: #eccc86;
  --gold-300: #dcbc78;
  --gold-400: #d0ad6a;  /* Dourado Default — SECONDARY */
  --gold-500: #b8924e;
  --gold-600: #8d6227;
  --gold-700: #74521f;
  --gold-800: #663500;
  --gold-900: #4a2800;

  /* Sand / warm neutral — "Sofisticação e Proximidade" */
  --sand-50:  #f7f6f1;
  --sand-100: #eeece2;
  --sand-200: #ddd9c7;
  --sand-300: #ccc6ac;
  --sand-400: #bbb399;
  --sand-500: #aba68d;  /* Sand Default */
  --sand-600: #8d8871;
  --sand-700: #6e6a58;
  --sand-800: #4f4c3f;
  --sand-900: #302e26;

  /* Cool gray / slate neutral (UI grays) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic status hues */
  --success-50:  #dcfce7;
  --success-100: #bbf7d0;
  --success-400: #4ade80;
  --success-500: #22c55e;  /* Success */
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50:  #fef3c7;
  --warning-100: #fde68a;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;  /* Warning */
  --warning-600: #d97706;
  --warning-700: #b45309;

  --error-50:  #fee2e2;
  --error-100: #fecaca;
  --error-400: #f87171;
  --error-500: #ef4444;  /* Error */
  --error-600: #dc2626;
  --error-700: #b91c1c;

  --info-50:  #e6f4fc;
  --info-500: #0687d1;  /* Info (== primary) */
  --info-600: #0570b0;

  /* --- Special gradients --- */
  --gradient-light: linear-gradient(120deg, #663500 0%, #d0ad6a 50%, #8d6227 100%); /* @kind other */
  --gradient-dark:  linear-gradient(120deg, #663500 0%, #d0ad6a 50%, #fdedc9 100%); /* @kind other */
  --gradient-brand: linear-gradient(120deg, #010d2c 0%, #0570b0 60%, #0687d1 100%); /* @kind other */

  /* ============================================================
     Semantic aliases (what components should reference)
     ============================================================ */

  /* Brand */
  --color-primary:          var(--blue-500);
  --color-primary-hover:    var(--blue-600);
  --color-primary-active:   var(--blue-700);
  --color-primary-subtle:   var(--blue-50);
  --color-secondary:        var(--gold-400);
  --color-secondary-hover:  var(--gold-500);
  --color-secondary-active: var(--gold-600);
  --color-secondary-subtle: var(--gold-50);

  /* Surfaces */
  --surface-background:  #ffffff;
  --surface-card:        #fbfdfe;
  --surface-muted:       #f5f5f3;
  --surface-inverse:     var(--navy-600);
  --surface-disabled:    #e2e8f0;

  /* Text */
  --text-foreground:      var(--navy-600);   /* #010d2c */
  --text-muted:           var(--gray-500);   /* #64748b */
  --text-link:            var(--blue-500);
  --text-disabled:        #94a3b8;
  --text-inverse:         #ffffff;
  --text-accent:          var(--gold-400);

  /* Borders */
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-disabled:  #cbd5e1;
  --border-focus:     var(--blue-500);

  /* Status semantic */
  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-error:   var(--error-500);
  --color-info:    var(--info-500);
  --color-success-subtle: var(--success-50);
  --color-warning-subtle: var(--warning-50);
  --color-error-subtle:   var(--error-50);
  --color-info-subtle:    var(--info-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(6, 135, 209, 0.35);
}


/* ============================================================
   Salux Initia — Typography Tokens
   Georama (Extra Expanded) for display/headings + brand
   Plus Jakarta Sans for UI / body
   NOTE: Georama's Extra-Expanded width is loaded via the wdth
   axis (125). Applied through --font-serif everywhere.
   ============================================================ */

/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
  /* Families */
  --font-serif: 'Georama', 'Arial Narrow', system-ui, sans-serif; /* display/brand — expanded width applied below */
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Font sizes (rem-based, 16px root) */
  --text-display: 48px;
  --text-h1: 36px;
  --text-h2: 30px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-h5: 18px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-caption: 12px;

  /* Line heights */
  --leading-display: 52px;
  --leading-h1: 40px;
  --leading-h2: 36px;
  --leading-h3: 32px;
  --leading-h4: 28px;
  --leading-h5: 28px;
  --leading-body-lg: 24px;
  --leading-body: 20px;
  --leading-caption: 16px;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
}

/* Apply expanded width axis to the display family wherever used */
.font-serif,
h1, h2, h3 {
  font-family: var(--font-serif);
  font-stretch: 125%;           /* Extra Expanded via variable wdth axis */
  font-variation-settings: 'wdth' 125;
}


/* ============================================================
   Salux Initia — Border System
   Signature: crisp hairlines at rest, 1.5px on interactive
   surfaces, 2px on active/selected. Radius rhythm "stepped
   soft": controls 10, containers 14, overlays 18 — a distinct
   cadence (not the generic 8/12/16) that reads as Initia.
   ============================================================ */
:root {
  /* Border widths */
  --border-width-hair: 1px;   /* @kind other */
  --border-width-base: 1.5px; /* @kind other */
  --border-width-bold: 2px;   /* @kind other */

  /* Semantic border colors (aliases already in colors.css:
     --border-default, --border-strong, --border-disabled, --border-focus) */
  --border-subtle:  var(--gray-100); /* @kind color */

  /* Radius rhythm — Initia "stepped soft" (component-facing) */
  --radius-control:   10px; /* @kind radius */  /* buttons, inputs, chips */
  --radius-container: 14px; /* @kind radius */  /* cards, panels */
  --radius-overlay:   18px; /* @kind radius */  /* modals, drawers, popovers */
  --radius-field-inner: 8px; /* @kind radius */ /* nested items inside controls */

  /* Composed border shorthands */
  --border-hairline: var(--border-width-hair) solid var(--border-default); /* @kind other */
  --border-interactive: var(--border-width-base) solid var(--border-strong); /* @kind other */
  --border-active: var(--border-width-bold) solid var(--color-primary); /* @kind other */
}


/* ============================================================
   Salux Initia — Motion Tokens
   Restrained, functional motion. The Initia signature is a
   crisp "settle": quick standard easing in, gentle emphasized
   easing out, small travel distances. No bounce.
   ============================================================ */
:root {
  /* Durations */
  --motion-instant: 80ms;   /* @kind other */
  --motion-fast:    120ms;  /* @kind other */
  --motion-normal:  200ms;  /* @kind other */
  --motion-slow:    320ms;  /* @kind other */
  --motion-slower:  480ms;  /* @kind other */

  /* Easing */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-entrance:   cubic-bezier(0, 0, 0.2, 1);     /* @kind other */
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);     /* @kind other */

  /* Named motion recipes (semantic) */
  --motion-hover:    background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); /* @kind other */
  --motion-pressed:  transform var(--motion-instant) var(--ease-standard); /* @kind other */
  --motion-focus:    box-shadow var(--motion-fast) var(--ease-standard); /* @kind other */
  --motion-fade:     opacity var(--motion-normal) var(--ease-standard); /* @kind other */
  --motion-scale:    transform var(--motion-normal) var(--ease-emphasized); /* @kind other */
  --motion-slide:    transform var(--motion-slow) var(--ease-emphasized); /* @kind other */
  --motion-overlay:  opacity var(--motion-normal) var(--ease-entrance); /* @kind other */
  --motion-drawer:   transform var(--motion-slow) var(--ease-emphasized); /* @kind other */

  /* Signature transforms */
  --press-scale: 0.97;      /* @kind other */
  --lift-y: -2px;           /* @kind other */

  /* Keyframe names shipped in base.css: sx-spin, sx-shimmer, sx-fade-in, sx-scale-in, sx-slide-up */

  /* Legacy aliases (components authored before the motion layer) */
  --duration-fast:   var(--motion-fast);   /* @kind other */
  --duration-normal: var(--motion-normal); /* @kind other */
  --duration-slow:   var(--motion-slow);   /* @kind other */
  --transition-fast:    all var(--motion-fast) var(--ease-standard);   /* @kind other */
  --transition-normal:  all var(--motion-normal) var(--ease-standard); /* @kind other */
  --transition-slow:    all var(--motion-slow) var(--ease-emphasized); /* @kind other */
  --transition-hover:   var(--motion-hover);   /* @kind other */
  --transition-focus:   var(--motion-focus);   /* @kind other */
  --transition-pressed: var(--motion-pressed); /* @kind other */
}


/* ============================================================
   Salux Initia — State & Opacity Tokens
   State layers are tint overlays applied consistently across
   every interactive component so states feel identical
   system-wide (part of the Initia "recognisable without logo").
   ============================================================ */
:root {
  /* Opacity scale */
  --opacity-0:   0;    /* @kind other */
  --opacity-5:   0.05; /* @kind other */
  --opacity-10:  0.10; /* @kind other */
  --opacity-20:  0.20; /* @kind other */
  --opacity-40:  0.40; /* @kind other */
  --opacity-60:  0.60; /* @kind other */
  --opacity-80:  0.80; /* @kind other */
  --opacity-disabled: 0.45; /* @kind other */
  --opacity-100: 1;    /* @kind other */

  /* State layer overlays (on light surfaces) */
  --state-hover:    rgba(6, 135, 209, 0.06);   /* @kind color */
  --state-pressed:  rgba(6, 135, 209, 0.12);   /* @kind color */
  --state-selected: rgba(6, 135, 209, 0.10);   /* @kind color */
  --state-focus-ring: none; /* @kind shadow */
  --state-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.32); /* @kind shadow */

  /* State layers on dark (navy) surfaces */
  --state-hover-inverse:   rgba(255, 255, 255, 0.08); /* @kind color */
  --state-pressed-inverse: rgba(255, 255, 255, 0.14); /* @kind color */
  --state-selected-inverse: rgba(255, 255, 255, 0.16); /* @kind color */

  /* Disabled recipe */
  --state-disabled-bg: var(--surface-disabled); /* @kind color */
  --state-disabled-fg: var(--text-disabled);    /* @kind color */
  --state-disabled-border: var(--border-disabled); /* @kind color */
}


/* ============================================================
   Salux Initia — Elevation Tokens ("Navy Float")
   Signature: navy-tinted (#010d2c), low-spread + high-blur so
   surfaces appear to float, never harsh. 6 semantic levels
   mapped to UI roles. Use --elevation-* by ROLE, not raw shadow.
   ============================================================ */
:root {
  /* Raw elevation scale */
  --elevation-0: none; /* @kind shadow */
  --elevation-1: 0 1px 2px rgba(1, 13, 44, 0.06); /* @kind shadow */
  --elevation-2: 0 2px 6px rgba(1, 13, 44, 0.08), 0 1px 2px rgba(1, 13, 44, 0.05); /* @kind shadow */
  --elevation-3: 0 6px 16px rgba(1, 13, 44, 0.10), 0 2px 4px rgba(1, 13, 44, 0.06); /* @kind shadow */
  --elevation-4: 0 12px 28px rgba(1, 13, 44, 0.12), 0 4px 10px rgba(1, 13, 44, 0.07); /* @kind shadow */
  --elevation-5: 0 24px 56px rgba(1, 13, 44, 0.16), 0 8px 20px rgba(1, 13, 44, 0.08); /* @kind shadow */

  /* Signature primary glow — used on active/focused key surfaces */
  --elevation-primary: 0 8px 24px rgba(6, 135, 209, 0.24); /* @kind shadow */

  /* Semantic elevation roles */
  --elevation-flat:     var(--elevation-0); /* @kind shadow */
  --elevation-card:     var(--elevation-1); /* @kind shadow */
  --elevation-raised:   var(--elevation-2); /* @kind shadow */
  --elevation-dropdown: var(--elevation-3); /* @kind shadow */
  --elevation-popover:  var(--elevation-3); /* @kind shadow */
  --elevation-drawer:   var(--elevation-4); /* @kind shadow */
  --elevation-modal:    var(--elevation-5); /* @kind shadow */
  --elevation-toast:    var(--elevation-4); /* @kind shadow */

  /* Legacy aliases (components authored before the elevation layer) */
  --shadow-xs: var(--elevation-1); /* @kind shadow */
  --shadow-sm: var(--elevation-2); /* @kind shadow */
  --shadow-md: var(--elevation-3); /* @kind shadow */
  --shadow-lg: var(--elevation-4); /* @kind shadow */
  --shadow-xl: var(--elevation-5); /* @kind shadow */
  --shadow-inner: inset 0 2px 4px rgba(1, 13, 44, 0.08); /* @kind shadow */
  --shadow-focus: none; /* @kind shadow */
}


/* ============================================================
   Salux Initia — Component Tokens
   The bridge between semantic tokens and components. Every
   component reads ITS OWN tokens so the whole system can be
   re-themed from one place and stays visually coherent.
   ============================================================ */
:root {
  /* --- Density: control heights (Initia rhythm) --- */
  --control-height-sm: 32px;
  --control-height-md: 40px;   /* default */
  --control-height-lg: 48px;
  --control-pad-x-sm: 12px;
  --control-pad-x-md: 16px;
  --control-pad-x-lg: 24px;
  --control-gap: 8px;

  /* --- Button --- */
  --button-radius: var(--radius-control);
  --button-font-weight: var(--weight-semibold);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-fg: #ffffff;
  --button-secondary-bg: var(--color-secondary);
  --button-secondary-fg: var(--navy-800);
  --button-shadow: var(--elevation-1);

  /* --- Input / field --- */
  --input-height: var(--control-height-md);
  --input-radius: var(--radius-control);
  --input-bg: var(--surface-background);
  --input-border: var(--border-width-hair) solid var(--border-strong);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--color-primary);
  --input-focus-ring: var(--state-focus-ring);
  --input-pad-x: 12px;
  --input-fg: var(--text-foreground);
  --input-placeholder: var(--text-muted);

  /* --- Card / surface --- */
  --card-bg: var(--surface-card);
  --card-radius: var(--radius-container);
  --card-border: var(--border-width-hair) solid var(--border-default);
  --card-shadow: var(--elevation-card);
  --card-shadow-hover: var(--elevation-3);
  --card-pad: 20px;

  /* --- Overlay surfaces (modal/drawer/popover) --- */
  --overlay-radius: var(--radius-overlay);
  --overlay-bg: #ffffff;
  --overlay-scrim: rgba(1, 13, 44, 0.45);
  --overlay-blur: 2px;

  /* --- Badge / Tag / Chip --- */
  --badge-radius: var(--radius-pill);
  --tag-radius: var(--radius-field-inner);
  --chip-radius: var(--radius-pill);

  /* --- Menu / list item --- */
  --menu-item-radius: var(--radius-field-inner);
  --menu-item-hover-bg: var(--surface-muted);
  --menu-item-selected-bg: var(--state-selected);

  /* --- Tooltip --- */
  --tooltip-bg: var(--navy-600);
  --tooltip-fg: #ffffff;
  --tooltip-radius: var(--radius-field-inner);

  /* --- Sidebar (dark navy signature) --- */
  --sidebar-bg: var(--navy-600);
  --sidebar-fg: rgba(255, 255, 255, 0.72);
  --sidebar-fg-active: #ffffff;
  --sidebar-item-active-bg: var(--color-primary);
  --sidebar-item-hover-bg: var(--state-hover-inverse);
  --sidebar-width: 248px;
}


/* ============================================================
   Salux Initia — Spacing, Radius, Shadow, Opacity, Motion, Layout
   4px base scale. Reference as spacing.N via --space-N.
   ============================================================ */

:root {
  /* --- Spacing (4px base) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* --- Border radius --- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows → tokens/elevation.css · Opacity + state → tokens/state.css
     Motion/transitions → tokens/motion.css · Borders → tokens/borders.css */

  /* --- Layout / grid --- */
  --container-max: 1280px; /* @kind other */
  --grid-columns-desktop: 12; /* @kind other */
  --grid-columns-tablet: 8; /* @kind other */
  --grid-columns-mobile: 4; /* @kind other */
  --grid-gutter: 24px; /* @kind other */
  --grid-margin-desktop: 64px; /* @kind other */
  --grid-margin-tablet: 32px; /* @kind other */
  --grid-margin-mobile: 16px; /* @kind other */
  --breakpoint-sm: 640px; /* @kind other */
  --breakpoint-md: 768px; /* @kind other */
  --breakpoint-lg: 1024px; /* @kind other */
  --breakpoint-xl: 1280px; /* @kind other */

  /* --- Iconography --- */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;
  --icon-2xl: 48px;
  --icon-stroke: 1.75px;

  /* --- Z-index --- */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky: 1100; /* @kind other */
  --z-drawer: 1200; /* @kind other */
  --z-modal: 1300; /* @kind other */
  --z-toast: 1400; /* @kind other */
  --z-tooltip: 1500; /* @kind other */
}


/* ============================================================
   Salux Initia — Base resets & element defaults
   Reachable from styles.css; safe, minimal global rules.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-foreground);
  background: var(--surface-background);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-hover);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--blue-100); color: var(--navy-600); }

/* --- Keyboard focus ring for custom form controls (hidden native input + styled sibling) --- */
input[type="checkbox"]:focus-visible + span,
input[type="radio"]:focus-visible + span {
  box-shadow: var(--state-focus-ring);
}
/* Range slider keyboard focus */
input[type="range"]:focus-visible {
  box-shadow: var(--state-focus-ring);
  border-radius: var(--radius-pill);
}

/* --- Signature keyframes (referenced by components & motion tokens) --- */
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes sx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes sx-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sx-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sx-sheet-from-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   Salux Initia Design System — global entry point
   Consumers link this single file. Imports only.
   Order: primitives → borders → motion → state → elevation →
   component tokens → layout → base resets.
   ============================================================ */
/* ============================================================
   Salux Initia — Color Tokens
   Core palette → scales → semantic aliases
   ============================================================ */

:root {
  /* --- Core brand hues (reference / "core tokens") --- */
  --blue-50:  #e6f4fc;
  --blue-100: #c0e3f7;
  --blue-200: #96d0f1;
  --blue-300: #6bbcea;
  --blue-400: #38a3e0;  /* Azul Light */
  --blue-500: #0687d1;  /* Azul Default — PRIMARY */
  --blue-600: #0570b0;  /* Azul Dark */
  --blue-700: #045a8f;
  --blue-800: #03436b;
  --blue-900: #022d47;

  /* Navy — "Segurança e Inteligência" */
  --navy-50:  #e7eaf1;
  --navy-100: #c3cad9;
  --navy-200: #9aa6c0;
  --navy-300: #5f6f95;
  --navy-400: #26375f;
  --navy-500: #0a1a3f;  /* Navy Light */
  --navy-600: #010d2c;  /* Navy Default — base fg / dark surfaces */
  --navy-700: #010a22;
  --navy-800: #000816;  /* Navy Dark */
  --navy-900: #00050e;

  /* Gold — "Percepção e Decisão" (secondary accent) */
  --gold-50:  #fdedc9;
  --gold-100: #f7dca3;
  --gold-200: #eccc86;
  --gold-300: #dcbc78;
  --gold-400: #d0ad6a;  /* Dourado Default — SECONDARY */
  --gold-500: #b8924e;
  --gold-600: #8d6227;
  --gold-700: #74521f;
  --gold-800: #663500;
  --gold-900: #4a2800;

  /* Sand / warm neutral — "Sofisticação e Proximidade" */
  --sand-50:  #f7f6f1;
  --sand-100: #eeece2;
  --sand-200: #ddd9c7;
  --sand-300: #ccc6ac;
  --sand-400: #bbb399;
  --sand-500: #aba68d;  /* Sand Default */
  --sand-600: #8d8871;
  --sand-700: #6e6a58;
  --sand-800: #4f4c3f;
  --sand-900: #302e26;

  /* Cool gray / slate neutral (UI grays) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic status hues */
  --success-50:  #dcfce7;
  --success-100: #bbf7d0;
  --success-400: #4ade80;
  --success-500: #22c55e;  /* Success */
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50:  #fef3c7;
  --warning-100: #fde68a;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;  /* Warning */
  --warning-600: #d97706;
  --warning-700: #b45309;

  --error-50:  #fee2e2;
  --error-100: #fecaca;
  --error-400: #f87171;
  --error-500: #ef4444;  /* Error */
  --error-600: #dc2626;
  --error-700: #b91c1c;

  --info-50:  #e6f4fc;
  --info-500: #0687d1;  /* Info (== primary) */
  --info-600: #0570b0;

  /* --- Special gradients --- */
  --gradient-light: linear-gradient(120deg, #663500 0%, #d0ad6a 50%, #8d6227 100%); /* @kind other */
  --gradient-dark:  linear-gradient(120deg, #663500 0%, #d0ad6a 50%, #fdedc9 100%); /* @kind other */
  --gradient-brand: linear-gradient(120deg, #010d2c 0%, #0570b0 60%, #0687d1 100%); /* @kind other */

  /* ============================================================
     Semantic aliases (what components should reference)
     ============================================================ */

  /* Brand */
  --color-primary:          var(--blue-500);
  --color-primary-hover:    var(--blue-600);
  --color-primary-active:   var(--blue-700);
  --color-primary-subtle:   var(--blue-50);
  --color-secondary:        var(--gold-400);
  --color-secondary-hover:  var(--gold-500);
  --color-secondary-active: var(--gold-600);
  --color-secondary-subtle: var(--gold-50);

  /* Surfaces */
  --surface-background:  #ffffff;
  --surface-card:        #fbfdfe;
  --surface-muted:       #f5f5f3;
  --surface-inverse:     var(--navy-600);
  --surface-disabled:    #e2e8f0;

  /* Text */
  --text-foreground:      var(--navy-600);   /* #010d2c */
  --text-muted:           var(--gray-500);   /* #64748b */
  --text-link:            var(--blue-500);
  --text-disabled:        #94a3b8;
  --text-inverse:         #ffffff;
  --text-accent:          var(--gold-400);

  /* Borders */
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-disabled:  #cbd5e1;
  --border-focus:     var(--blue-500);

  /* Status semantic */
  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-error:   var(--error-500);
  --color-info:    var(--info-500);
  --color-success-subtle: var(--success-50);
  --color-warning-subtle: var(--warning-50);
  --color-error-subtle:   var(--error-50);
  --color-info-subtle:    var(--info-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(6, 135, 209, 0.35);
}

/* ============================================================
   Salux Initia — Typography Tokens
   Georama (Extra Expanded) for display/headings + brand
   Plus Jakarta Sans for UI / body
   NOTE: Georama's Extra-Expanded width is loaded via the wdth
   axis (125). Applied through --font-serif everywhere.
   ============================================================ */

/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
  /* Families */
  --font-serif: 'Georama', 'Arial Narrow', system-ui, sans-serif; /* display/brand — expanded width applied below */
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Font sizes (rem-based, 16px root) */
  --text-display: 48px;
  --text-h1: 36px;
  --text-h2: 30px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-h5: 18px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-caption: 12px;

  /* Line heights */
  --leading-display: 52px;
  --leading-h1: 40px;
  --leading-h2: 36px;
  --leading-h3: 32px;
  --leading-h4: 28px;
  --leading-h5: 28px;
  --leading-body-lg: 24px;
  --leading-body: 20px;
  --leading-caption: 16px;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;
}

/* Apply expanded width axis to the display family wherever used */
.font-serif,
h1, h2, h3 {
  font-family: var(--font-serif);
  font-stretch: 125%;           /* Extra Expanded via variable wdth axis */
  font-variation-settings: 'wdth' 125;
}

/* ============================================================
   Salux Initia — Border System
   Signature: crisp hairlines at rest, 1.5px on interactive
   surfaces, 2px on active/selected. Radius rhythm "stepped
   soft": controls 10, containers 14, overlays 18 — a distinct
   cadence (not the generic 8/12/16) that reads as Initia.
   ============================================================ */
:root {
  /* Border widths */
  --border-width-hair: 1px;   /* @kind other */
  --border-width-base: 1.5px; /* @kind other */
  --border-width-bold: 2px;   /* @kind other */

  /* Semantic border colors (aliases already in colors.css:
     --border-default, --border-strong, --border-disabled, --border-focus) */
  --border-subtle:  var(--gray-100); /* @kind color */

  /* Radius rhythm — Initia "stepped soft" (component-facing) */
  --radius-control:   10px; /* @kind radius */  /* buttons, inputs, chips */
  --radius-container: 14px; /* @kind radius */  /* cards, panels */
  --radius-overlay:   18px; /* @kind radius */  /* modals, drawers, popovers */
  --radius-field-inner: 8px; /* @kind radius */ /* nested items inside controls */

  /* Composed border shorthands */
  --border-hairline: var(--border-width-hair) solid var(--border-default); /* @kind other */
  --border-interactive: var(--border-width-base) solid var(--border-strong); /* @kind other */
  --border-active: var(--border-width-bold) solid var(--color-primary); /* @kind other */
}

/* ============================================================
   Salux Initia — Motion Tokens
   Restrained, functional motion. The Initia signature is a
   crisp "settle": quick standard easing in, gentle emphasized
   easing out, small travel distances. No bounce.
   ============================================================ */
:root {
  /* Durations */
  --motion-instant: 80ms;   /* @kind other */
  --motion-fast:    120ms;  /* @kind other */
  --motion-normal:  200ms;  /* @kind other */
  --motion-slow:    320ms;  /* @kind other */
  --motion-slower:  480ms;  /* @kind other */

  /* Easing */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-entrance:   cubic-bezier(0, 0, 0.2, 1);     /* @kind other */
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);     /* @kind other */

  /* Named motion recipes (semantic) */
  --motion-hover:    background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); /* @kind other */
  --motion-pressed:  transform var(--motion-instant) var(--ease-standard); /* @kind other */
  --motion-focus:    box-shadow var(--motion-fast) var(--ease-standard); /* @kind other */
  --motion-fade:     opacity var(--motion-normal) var(--ease-standard); /* @kind other */
  --motion-scale:    transform var(--motion-normal) var(--ease-emphasized); /* @kind other */
  --motion-slide:    transform var(--motion-slow) var(--ease-emphasized); /* @kind other */
  --motion-overlay:  opacity var(--motion-normal) var(--ease-entrance); /* @kind other */
  --motion-drawer:   transform var(--motion-slow) var(--ease-emphasized); /* @kind other */

  /* Signature transforms */
  --press-scale: 0.97;      /* @kind other */
  --lift-y: -2px;           /* @kind other */

  /* Keyframe names shipped in base.css: sx-spin, sx-shimmer, sx-fade-in, sx-scale-in, sx-slide-up */

  /* Legacy aliases (components authored before the motion layer) */
  --duration-fast:   var(--motion-fast);   /* @kind other */
  --duration-normal: var(--motion-normal); /* @kind other */
  --duration-slow:   var(--motion-slow);   /* @kind other */
  --transition-fast:    all var(--motion-fast) var(--ease-standard);   /* @kind other */
  --transition-normal:  all var(--motion-normal) var(--ease-standard); /* @kind other */
  --transition-slow:    all var(--motion-slow) var(--ease-emphasized); /* @kind other */
  --transition-hover:   var(--motion-hover);   /* @kind other */
  --transition-focus:   var(--motion-focus);   /* @kind other */
  --transition-pressed: var(--motion-pressed); /* @kind other */
}

/* ============================================================
   Salux Initia — State & Opacity Tokens
   State layers are tint overlays applied consistently across
   every interactive component so states feel identical
   system-wide (part of the Initia "recognisable without logo").
   ============================================================ */
:root {
  /* Opacity scale */
  --opacity-0:   0;    /* @kind other */
  --opacity-5:   0.05; /* @kind other */
  --opacity-10:  0.10; /* @kind other */
  --opacity-20:  0.20; /* @kind other */
  --opacity-40:  0.40; /* @kind other */
  --opacity-60:  0.60; /* @kind other */
  --opacity-80:  0.80; /* @kind other */
  --opacity-disabled: 0.45; /* @kind other */
  --opacity-100: 1;    /* @kind other */

  /* State layer overlays (on light surfaces) */
  --state-hover:    rgba(6, 135, 209, 0.06);   /* @kind color */
  --state-pressed:  rgba(6, 135, 209, 0.12);   /* @kind color */
  --state-selected: rgba(6, 135, 209, 0.10);   /* @kind color */
  --state-focus-ring: none; /* @kind shadow */
  --state-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.32); /* @kind shadow */

  /* State layers on dark (navy) surfaces */
  --state-hover-inverse:   rgba(255, 255, 255, 0.08); /* @kind color */
  --state-pressed-inverse: rgba(255, 255, 255, 0.14); /* @kind color */
  --state-selected-inverse: rgba(255, 255, 255, 0.16); /* @kind color */

  /* Disabled recipe */
  --state-disabled-bg: var(--surface-disabled); /* @kind color */
  --state-disabled-fg: var(--text-disabled);    /* @kind color */
  --state-disabled-border: var(--border-disabled); /* @kind color */
}

/* ============================================================
   Salux Initia — Elevation Tokens ("Navy Float")
   Signature: navy-tinted (#010d2c), low-spread + high-blur so
   surfaces appear to float, never harsh. 6 semantic levels
   mapped to UI roles. Use --elevation-* by ROLE, not raw shadow.
   ============================================================ */
:root {
  /* Raw elevation scale */
  --elevation-0: none; /* @kind shadow */
  --elevation-1: 0 1px 2px rgba(1, 13, 44, 0.06); /* @kind shadow */
  --elevation-2: 0 2px 6px rgba(1, 13, 44, 0.08), 0 1px 2px rgba(1, 13, 44, 0.05); /* @kind shadow */
  --elevation-3: 0 6px 16px rgba(1, 13, 44, 0.10), 0 2px 4px rgba(1, 13, 44, 0.06); /* @kind shadow */
  --elevation-4: 0 12px 28px rgba(1, 13, 44, 0.12), 0 4px 10px rgba(1, 13, 44, 0.07); /* @kind shadow */
  --elevation-5: 0 24px 56px rgba(1, 13, 44, 0.16), 0 8px 20px rgba(1, 13, 44, 0.08); /* @kind shadow */

  /* Signature primary glow — used on active/focused key surfaces */
  --elevation-primary: 0 8px 24px rgba(6, 135, 209, 0.24); /* @kind shadow */

  /* Semantic elevation roles */
  --elevation-flat:     var(--elevation-0); /* @kind shadow */
  --elevation-card:     var(--elevation-1); /* @kind shadow */
  --elevation-raised:   var(--elevation-2); /* @kind shadow */
  --elevation-dropdown: var(--elevation-3); /* @kind shadow */
  --elevation-popover:  var(--elevation-3); /* @kind shadow */
  --elevation-drawer:   var(--elevation-4); /* @kind shadow */
  --elevation-modal:    var(--elevation-5); /* @kind shadow */
  --elevation-toast:    var(--elevation-4); /* @kind shadow */

  /* Legacy aliases (components authored before the elevation layer) */
  --shadow-xs: var(--elevation-1); /* @kind shadow */
  --shadow-sm: var(--elevation-2); /* @kind shadow */
  --shadow-md: var(--elevation-3); /* @kind shadow */
  --shadow-lg: var(--elevation-4); /* @kind shadow */
  --shadow-xl: var(--elevation-5); /* @kind shadow */
  --shadow-inner: inset 0 2px 4px rgba(1, 13, 44, 0.08); /* @kind shadow */
  --shadow-focus: none; /* @kind shadow */
}

/* ============================================================
   Salux Initia — Component Tokens
   The bridge between semantic tokens and components. Every
   component reads ITS OWN tokens so the whole system can be
   re-themed from one place and stays visually coherent.
   ============================================================ */
:root {
  /* --- Density: control heights (Initia rhythm) --- */
  --control-height-sm: 32px;
  --control-height-md: 40px;   /* default */
  --control-height-lg: 48px;
  --control-pad-x-sm: 12px;
  --control-pad-x-md: 16px;
  --control-pad-x-lg: 24px;
  --control-gap: 8px;

  /* --- Button --- */
  --button-radius: var(--radius-control);
  --button-font-weight: var(--weight-semibold);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-fg: #ffffff;
  --button-secondary-bg: var(--color-secondary);
  --button-secondary-fg: var(--navy-800);
  --button-shadow: var(--elevation-1);

  /* --- Input / field --- */
  --input-height: var(--control-height-md);
  --input-radius: var(--radius-control);
  --input-bg: var(--surface-background);
  --input-border: var(--border-width-hair) solid var(--border-strong);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--color-primary);
  --input-focus-ring: var(--state-focus-ring);
  --input-pad-x: 12px;
  --input-fg: var(--text-foreground);
  --input-placeholder: var(--text-muted);

  /* --- Card / surface --- */
  --card-bg: var(--surface-card);
  --card-radius: var(--radius-container);
  --card-border: var(--border-width-hair) solid var(--border-default);
  --card-shadow: var(--elevation-card);
  --card-shadow-hover: var(--elevation-3);
  --card-pad: 20px;

  /* --- Overlay surfaces (modal/drawer/popover) --- */
  --overlay-radius: var(--radius-overlay);
  --overlay-bg: #ffffff;
  --overlay-scrim: rgba(1, 13, 44, 0.45);
  --overlay-blur: 2px;

  /* --- Badge / Tag / Chip --- */
  --badge-radius: var(--radius-pill);
  --tag-radius: var(--radius-field-inner);
  --chip-radius: var(--radius-pill);

  /* --- Menu / list item --- */
  --menu-item-radius: var(--radius-field-inner);
  --menu-item-hover-bg: var(--surface-muted);
  --menu-item-selected-bg: var(--state-selected);

  /* --- Tooltip --- */
  --tooltip-bg: var(--navy-600);
  --tooltip-fg: #ffffff;
  --tooltip-radius: var(--radius-field-inner);

  /* --- Sidebar (dark navy signature) --- */
  --sidebar-bg: var(--navy-600);
  --sidebar-fg: rgba(255, 255, 255, 0.72);
  --sidebar-fg-active: #ffffff;
  --sidebar-item-active-bg: var(--color-primary);
  --sidebar-item-hover-bg: var(--state-hover-inverse);
  --sidebar-width: 248px;
}

/* ============================================================
   Salux Initia — Spacing, Radius, Shadow, Opacity, Motion, Layout
   4px base scale. Reference as spacing.N via --space-N.
   ============================================================ */

:root {
  /* --- Spacing (4px base) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* --- Border radius --- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows → tokens/elevation.css · Opacity + state → tokens/state.css
     Motion/transitions → tokens/motion.css · Borders → tokens/borders.css */

  /* --- Layout / grid --- */
  --container-max: 1280px; /* @kind other */
  --grid-columns-desktop: 12; /* @kind other */
  --grid-columns-tablet: 8; /* @kind other */
  --grid-columns-mobile: 4; /* @kind other */
  --grid-gutter: 24px; /* @kind other */
  --grid-margin-desktop: 64px; /* @kind other */
  --grid-margin-tablet: 32px; /* @kind other */
  --grid-margin-mobile: 16px; /* @kind other */
  --breakpoint-sm: 640px; /* @kind other */
  --breakpoint-md: 768px; /* @kind other */
  --breakpoint-lg: 1024px; /* @kind other */
  --breakpoint-xl: 1280px; /* @kind other */

  /* --- Iconography --- */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;
  --icon-2xl: 48px;
  --icon-stroke: 1.75px;

  /* --- Z-index --- */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky: 1100; /* @kind other */
  --z-drawer: 1200; /* @kind other */
  --z-modal: 1300; /* @kind other */
  --z-toast: 1400; /* @kind other */
  --z-tooltip: 1500; /* @kind other */
}

/* ============================================================
   Salux Initia — Base resets & element defaults
   Reachable from styles.css; safe, minimal global rules.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-foreground);
  background: var(--surface-background);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-hover);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--blue-100); color: var(--navy-600); }

/* --- Keyboard focus ring for custom form controls (hidden native input + styled sibling) --- */
input[type="checkbox"]:focus-visible + span,
input[type="radio"]:focus-visible + span {
  box-shadow: var(--state-focus-ring);
}
/* Range slider keyboard focus */
input[type="range"]:focus-visible {
  box-shadow: var(--state-focus-ring);
  border-radius: var(--radius-pill);
}

/* --- Signature keyframes (referenced by components & motion tokens) --- */
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes sx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes sx-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sx-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sx-sheet-from-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}