/* SecurePass design tokens — Cybex Innovation corporate brand.
   OFFICIAL PALETTE (use these only). Retune the whole product HERE. */
:root {
  /* ---- Official Cybex brand colors ---- */
  --brand-green: #08C15A;   /* buttons, highlights, icons, success */
  --brand-navy:  #0B1F5E;   /* logo, headings, navigation */
  --charcoal:    #1A1A1A;   /* main text */
  --white:       #FFFFFF;   /* background */
  --light-gray:  #F5F7FA;   /* section backgrounds */
  --border-gray: #DCE3EA;   /* cards, borders */

  /* Derived shades (kept within the brand hues) */
  --green-600: #06A64C;
  --green-700: #058F41;
  --green-bg:  #E7FAEF;
  --navy-600:  #0A1B50;
  --navy-700:  #081444;
  --navy-bg:   #EDF0F7;

  /* Semantic aliases used across components */
  --bg:        var(--light-gray);
  --surface:   var(--white);
  --surface-2: #FBFCFD;
  --border:    var(--border-gray);
  --border-strong: #C3CDD8;
  --text:      var(--charcoal);
  --text-muted:#5B6472;
  --text-faint:#8A94A3;

  /* State — success/info map to brand; a single functional red for danger
     (success-green cannot double as an error signal). See NOTES.md. */
  --success: var(--brand-green);
  --info:    var(--brand-navy);
  --warning: #B7791F;
  --danger:  #C0392B;
  --success-bg: var(--green-bg);
  --info-bg:    var(--navy-bg);
  --warning-bg: #FBF3E4;
  --danger-bg:  #FBEAE8;

  /* Sidebar (navy corporate) */
  --sidebar-bg:  #0B1F5E;
  --sidebar-fg:  #C4CCE0;
  --sidebar-fg-muted: #7C87A8;
  --sidebar-active-bg: rgba(8,193,90,0.16);
  --sidebar-active-fg: #FFFFFF;
  --sidebar-accent: var(--brand-green);

  /* Typography — small + dense */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --fs-base: 13px; --fs-sm: 12px; --fs-xs: 11px; --fs-lg: 15px; --fs-xl: 18px;
  --lh: 1.45;

  /* Spacing scale (tight) */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 28px;

  /* Shape */
  --radius: 5px; --radius-sm: 4px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow:    0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.06);
  --shadow-lg: 0 8px 24px rgba(11,31,94,0.14);

  /* Layout metrics */
  --sidebar-w: 208px;
  --topbar-h: 48px;
}