/* ============================================================================
   True North — Redesign Design Tokens
   Loaded AFTER Metronic's style.bundle.css. Remaps Bootstrap/Metronic CSS
   variables to the new "True North" design system (mockup: Admin Portal
   Redesign). Frontend-only; overrides appearance, never markup/behavior.
   ========================================================================= */

/* ---- Geist (self-hosted variable font, weights 300–700) ---- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../media/fonts/geist/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../media/fonts/geist/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Raw palette (single source of truth) ---- */
:root {
  /* brand */
  --tn-primary:        #1D5BD8;
  --tn-primary-rgb:    29, 91, 216;
  --tn-primary-hover:  #1A4FBD;
  --tn-primary-active: #1746A8;
  --tn-primary-tint:   #E8F0FE;   /* light blue badge/hover bg */
  --tn-focus-ring:     rgba(29, 91, 216, .22);

  /* surfaces */
  --tn-app-bg:      #F4F5F7;   /* page background */
  --tn-surface:     #FFFFFF;   /* cards / header / sidebar */
  --tn-surface-2:   #F7F8FA;   /* subtle raised / zebra */
  --tn-surface-3:   #EEF1F5;   /* hover / muted fill */
  --tn-surface-4:   #EDEFF3;

  /* borders */
  --tn-border:      #E6E8EE;
  --tn-border-2:    #DCE0E8;
  --tn-input-border:#BEC5D1;   /* form-control border — clearly visible on the light fill */

  /* text */
  --tn-text:        #12151B;   /* strongest headings */
  --tn-text-2:      #1E242E;   /* body headings */
  --tn-text-3:      #57616E;   /* body */
  --tn-muted:       #5B6573;   /* secondary — WCAG AA (5.5:1 on white) */
  --tn-muted-2:     #6D7585;   /* tertiary / placeholder — readable */
  --tn-muted-3:     #8A94A2;   /* faint */

  /* status / semantic (fg + tint bg for pill badges) — fg meets AA on white AND on its tint */
  --tn-blue:        #1D5BD8;   --tn-blue-bg:    #E8F0FE;
  --tn-green:       #0A7358;   --tn-green-bg:   #DFF4EF;
  --tn-red:         #C42B1D;   --tn-red-bg:     #FCEBEA;
  --tn-amber:       #A54E03;   --tn-amber-bg:   #FCF1E4;
  --tn-purple:      #6941C6;   --tn-purple-bg:  #F1EAFE;
  --tn-indigo:      #4E5BA6;   --tn-indigo-bg:  #EEF0FA;

  /* radii */
  --tn-radius-sm:   6px;
  --tn-radius:      8px;
  --tn-radius-lg:   12px;
  --tn-radius-pill: 999px;

  /* elevation */
  --tn-shadow-xs:   0 1px 2px rgba(16, 24, 40, .05);
  --tn-shadow-sm:   0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --tn-shadow-md:   0 4px 12px rgba(16, 24, 40, .08);

  /* shell metrics */
  --tn-aside-width: 236px;
  --tn-header-h:    64px;
  --tn-rail-width:  72px;   /* tablet (768-991px) icon rail */
  --tn-bottomnav-h: 64px;   /* mobile (<768px) bottom nav */

  /* type */
  --tn-font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================================
   LIGHT MODE — remap Metronic / Bootstrap variables to the palette above
   ========================================================================= */
:root,
:root[data-theme="light"] {
  --bs-font-sans-serif: var(--tn-font);
  --bs-body-font-family: var(--tn-font);

  /* primary */
  --bs-primary:            var(--tn-primary);
  --bs-primary-rgb:        var(--tn-primary-rgb);
  --bs-primary-active:     var(--tn-primary-hover);
  --bs-primary-light:      var(--tn-primary-tint);
  --bs-primary-clarity:    var(--tn-focus-ring);
  --kt-primary:            var(--tn-primary);
  --kt-primary-active:     var(--tn-primary-hover);
  --kt-primary-light:      var(--tn-primary-tint);
  --kt-success:            var(--tn-green);
  --kt-warning:            var(--tn-amber);
  --kt-danger:             var(--tn-red);
  --kt-info:               var(--tn-purple);

  /* semantic */
  --bs-success: var(--tn-green);  --bs-success-rgb: 10, 115, 88;
  --bs-info:    var(--tn-purple); --bs-info-rgb:    105, 65, 198;
  --bs-warning: var(--tn-amber);  --bs-warning-rgb: 165, 78, 3;
  --bs-danger:  var(--tn-red);    --bs-danger-rgb:  196, 43, 29;

  /* body + surfaces */
  --bs-body-bg:            var(--tn-surface);
  --bs-body-bg-rgb:        255, 255, 255;
  --bs-body-color:         var(--tn-text-2);
  --bs-body-color-rgb:     30, 36, 46;
  --bs-text-muted:         var(--tn-muted);
  --bs-secondary-color:    var(--tn-muted);

  /* grays remapped to cool neutral ramp */
  --bs-gray-100: var(--tn-surface-2);
  --bs-gray-200: var(--tn-surface-3);
  --bs-gray-300: var(--tn-border);
  --bs-gray-400: var(--tn-muted-3);
  --bs-gray-500: var(--tn-muted-2);
  --bs-gray-600: var(--tn-muted);
  --bs-gray-700: var(--tn-text-3);
  --bs-gray-800: var(--tn-text-2);
  --bs-gray-900: var(--tn-text);
  --bs-gray-100-rgb: 247, 248, 250;
  --bs-gray-200-rgb: 238, 241, 245;
  --bs-gray-300-rgb: 230, 232, 238;

  --bs-light:      var(--tn-surface-2);
  --bs-light-rgb:  247, 248, 250;

  /* borders + radii */
  --bs-border-color:       var(--tn-border);
  --bs-border-radius:      var(--tn-radius);
  --bs-border-radius-sm:   var(--tn-radius-sm);
  --bs-border-radius-lg:   var(--tn-radius-lg);
  --bs-border-radius-xl:   var(--tn-radius-lg);
  --bs-border-radius-pill: var(--tn-radius-pill);

  /* links / focus */
  --bs-link-color:       var(--tn-primary);
  --bs-link-hover-color: var(--tn-primary-hover);
}

/* ============================================================================
   DARK MODE — remap under [data-theme="dark"] (Metronic dark scope)
   ========================================================================= */
:root[data-theme="dark"] {
  --tn-app-bg:    #0C0F14;
  --tn-surface:   #12151B;
  --tn-surface-2: #171C26;
  --tn-surface-3: #1E242E;
  --tn-surface-4: #232A35;
  --tn-border:    #262D38;
  --tn-border-2:  #2E3644;
  --tn-input-border: #3B4553;   /* form-control border — visible on the dark fill */
  --tn-text:      #F2F4F7;
  --tn-text-2:    #E6E9EF;
  --tn-text-3:    #C3C9D4;
  --tn-muted:     #8A94A2;
  --tn-muted-2:   #7A8494;
  --tn-muted-3:   #5B6573;
  --tn-primary:      #3B7BE8;
  --tn-primary-rgb:  59, 123, 232;
  --tn-primary-tint: #16233B;

  /* semantic fg tuned LIGHTER for dark surfaces (WCAG AA — bright-on-dark) */
  --tn-blue:      #6FA0F5;
  --tn-green:     #34C79B;
  --tn-red:       #FF6F63;
  --tn-amber:     #F0A73C;
  --tn-purple:    #A98BF0;

  /* keep the --bs-*-rgb (used by .bg-* dots/utilities) in sync with the lighter
     dark semantics, so a .bg-danger dot matches its .text-danger label, etc. */
  --bs-danger-rgb:  255, 111, 99;
  --bs-success-rgb: 52, 199, 155;
  --bs-warning-rgb: 240, 167, 60;
  --bs-info-rgb:    169, 139, 240;

  /* tinted badge backgrounds tuned for dark */
  --tn-blue-bg:   #16233B;
  --tn-green-bg:  #0E2A26;
  --tn-red-bg:    #33191A;
  --tn-amber-bg:  #33240F;
  --tn-purple-bg: #241a3d;
  --tn-indigo-bg: #1b2038;

  --bs-body-bg:        var(--tn-surface);
  --bs-body-bg-rgb:    18, 21, 27;
  --bs-body-color:     var(--tn-text-2);
  --bs-body-color-rgb: 230, 233, 239;
  --bs-text-muted:     var(--tn-muted);
  --bs-secondary-color:var(--tn-muted);

  --bs-primary:        var(--tn-primary);
  --bs-primary-rgb:    var(--tn-primary-rgb);
  --kt-primary:        var(--tn-primary);
  --kt-success:        var(--tn-green);
  --kt-warning:        var(--tn-amber);
  --kt-danger:         var(--tn-red);
  --kt-info:           var(--tn-purple);

  --bs-gray-100: var(--tn-surface-2);
  --bs-gray-200: var(--tn-surface-3);
  --bs-gray-300: var(--tn-border-2);
  --bs-gray-400: var(--tn-muted-3);
  --bs-gray-500: var(--tn-muted-2);
  --bs-gray-600: var(--tn-muted);
  --bs-gray-700: var(--tn-text-3);
  --bs-gray-800: var(--tn-text-2);
  --bs-gray-900: var(--tn-text);
  --bs-light:      var(--tn-surface-2);

  --bs-border-color: var(--tn-border);
}