/*
  KEWI Student Portal - Brand Design Tokens
  The 3 major colors are given directly from the official KEWI / Ministry
  of Water Sanitation and Irrigation logo:
    #08176A - deep navy (the wordmark, and the darkest ring tone)
    #71C4E4 - sky blue (the seal's ring / fountain water)
    #F0E827 - bright gold (the seal's open book)
  Everything else below is a derived tint/shade scale built from those
  three anchors, plus a neutral gray scale and standard semantic colors.
*/

:root {
  /* Roles: PRIMARY = sky (header, sidebar, primary buttons, table headers - text on it is navy),
            SECONDARY = navy (links, focus rings, borders, selections, secondary buttons). */

  /* Brand - Navy (secondary) */
  --kewi-navy-900: #050C38;
  --kewi-navy-800: #08176A; /* exact brand value */
  --kewi-navy-700: #142B8C;
  --kewi-navy-600: #1F3FAE;
  --kewi-navy-500: #3355C7;
  --kewi-navy-100: #E6E9F7;

  /* Brand - Sky blue (primary) */
  --kewi-sky-700: #1C8FBF;
  --kewi-sky-600: #4DB4DC;
  --kewi-sky-500: #71C4E4; /* exact brand value */
  --kewi-sky-100: #E8F6FC;

  /* Brand - Gold (accent) */
  --kewi-gold-700: #B8A400;
  --kewi-gold-500: #F0E827; /* exact brand value */
  --kewi-gold-400: #F5EE66;
  --kewi-gold-100: #FCFBD9;

  /* Neutrals */
  --kewi-gray-900: #1A2330;
  --kewi-gray-800: #2B3648;
  --kewi-gray-700: #445168;
  --kewi-gray-600: #66748C;
  --kewi-gray-400: #A6B0C2;
  --kewi-gray-200: #DEE3EC;
  --kewi-gray-100: #EEF1F6;
  --kewi-gray-50: #F7F9FC;
  --kewi-white: #FFFFFF;

  /* Semantic (distinct from the 3 brand colors) */
  --kewi-success: #1C8A5B;
  --kewi-info: var(--kewi-navy-700);
  --kewi-warning: #C9820A;
  --kewi-danger: #C22B3A;

  /* Typography */
  --kewi-font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kewi-font-size-base: 0.9375rem;

  /* Layout */
  --kewi-sidebar-width: 264px;
  --kewi-sidebar-width-collapsed: 76px;
  --kewi-header-height: 64px;
  --kewi-header-border: 1px;
  --kewi-header-offset: calc(var(--kewi-header-height) + var(--kewi-header-border));
  --kewi-radius-sm: 6px;
  --kewi-radius-md: 10px;
  --kewi-radius-lg: 16px;
  --kewi-shadow-sm: 0 1px 2px rgba(5, 12, 56, 0.07), 0 1px 3px rgba(5, 12, 56, 0.09);
  --kewi-shadow-md: 0 4px 10px rgba(5, 12, 56, 0.10), 0 2px 4px rgba(5, 12, 56, 0.07);
  --kewi-shadow-lg: 0 12px 32px rgba(5, 12, 56, 0.16);

  /* ---- Bootstrap 5.3 CSS-variable theming bridge ---- */
  --bs-primary: var(--kewi-sky-500);
  --bs-primary-rgb: 113, 196, 228;
  --bs-secondary: var(--kewi-navy-800);
  --bs-secondary-rgb: 8, 23, 106;
  --bs-success: var(--kewi-success);
  --bs-success-rgb: 28, 138, 91;
  --bs-info: var(--kewi-info);
  --bs-info-rgb: 20, 43, 140;
  --bs-warning: var(--kewi-warning);
  --bs-warning-rgb: 201, 130, 10;
  --bs-danger: var(--kewi-danger);
  --bs-danger-rgb: 194, 43, 58;
  --bs-light: var(--kewi-gray-50);
  --bs-dark: var(--kewi-navy-900);
  --bs-body-font-family: var(--kewi-font-sans);
  --bs-body-font-size: var(--kewi-font-size-base);
  --bs-body-color: var(--kewi-gray-800);
  --bs-body-bg: var(--kewi-gray-50);
  --bs-link-color: var(--kewi-navy-700);
  --bs-link-hover-color: var(--kewi-navy-900);
  --bs-border-radius: var(--kewi-radius-sm);
  --bs-border-radius-lg: var(--kewi-radius-md);
  --bs-border-radius-sm: 4px;
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(51, 85, 199, 0.35);
}

.btn-accent {
  --bs-btn-color: var(--kewi-navy-900);
  --bs-btn-bg: var(--kewi-gold-500);
  --bs-btn-border-color: var(--kewi-gold-500);
  --bs-btn-hover-color: var(--kewi-navy-900);
  --bs-btn-hover-bg: var(--kewi-gold-400);
  --bs-btn-hover-border-color: var(--kewi-gold-400);
  --bs-btn-active-color: var(--kewi-navy-900);
  --bs-btn-active-bg: var(--kewi-gold-700);
  --bs-btn-active-border-color: var(--kewi-gold-700);
  --bs-btn-focus-shadow-rgb: 240, 232, 39;
}

.btn-secondary-sky {
  --bs-btn-color: var(--kewi-white);
  --bs-btn-bg: var(--kewi-sky-700);
  --bs-btn-border-color: var(--kewi-sky-700);
  --bs-btn-hover-color: var(--kewi-white);
  --bs-btn-hover-bg: #17789e;
  --bs-btn-hover-border-color: #17789e;
}