/* ===========================================
   CSS Custom Properties (Variables)
   ===========================================
   Design direction "The Report": paper white,
   ink navy, hairline rules. Colors are explicit
   hex values so every text and background pair
   can be checked for WCAG contrast.

   NOTE: Variables are NOT in @layer - they must
   be available globally to all layers.
   =========================================== */

:root {
  --color-white: #FFFFFF;

  /* Hue and saturation of the ink navy, kept for rules that build colors with hsl() */
  --color-primary-h: 219;
  --color-primary-s: 54%;

  /* ============================================
     PRIMARY (ink navy)
     ============================================ */
  --color-primary-50:  #F2F5FA;
  --color-primary-100: #E4EAF3;
  --color-primary-200: #C8D3E5;
  --color-primary-300: #9FB1CF;
  --color-primary-400: #6F87B2;
  --color-primary-500: #4B6596;
  --color-primary-600: #30497A;
  --color-primary-700: #213866;
  --color-primary-800: #192C50;
  --color-primary-900: #13233F;

  /* ============================================
     NEUTRALS (cool gray)
     ============================================ */
  --color-gray-50:  #F7F8FA;
  --color-gray-100: #EFF1F4;
  --color-gray-200: #E3E7EC;
  --color-gray-300: #D5DAE1;
  --color-gray-400: #A6AFBA;
  --color-gray-500: #6B7480;
  --color-gray-600: #5A6472;
  --color-gray-700: #414955;
  --color-gray-800: #2A313B;
  --color-gray-900: #161B23;

  /* ============================================
     SEMANTIC COLORS (all 4.5:1 or better on white)
     ============================================ */
  --color-error:        #B3261E;
  --color-error-dark:   #8C1D17;
  --color-success:      #1E7A4B;
  --color-success-dark: #155C38;
  --color-warning:      #8A5300;
  --color-info:         #1F5FAE;

  /* Semantic light variants (for backgrounds) */
  --color-error-light:   #FBEDEC;
  --color-success-light: #EAF4EE;
  --color-warning-light: #FBF3E4;
  --color-info-light:    #EAF1FA;

  /* ============================================
     ACCENT (marker yellow)
     One yellow element per screen, always as a fill: the block under the hero report and the
     button on navy bands. Never text or thin strokes on white (under 3:1), never a status,
     severity or score color, not in app screens or client reports.
     ============================================ */
  --color-accent:       #FFD23F;
  --color-accent-hover: #F5C518;

  /* ============================================
     FUNCTIONAL TOKENS
     ============================================ */
  --color-text:         var(--color-primary-900);
  --color-text-muted:   var(--color-gray-600);
  --color-text-light:   var(--color-gray-500);
  --color-background:   #FFFFFF;
  --color-surface:      var(--color-gray-50);

  --color-border:       var(--color-gray-300);
  --color-border-hover: var(--color-gray-400);

  --color-link:         var(--color-primary-700);
  --color-link-hover:   var(--color-primary-900);

  --color-focus:        var(--color-info);

  /* ============================================
     SHADOWS (used sparingly; hairlines do most of the work)
     ============================================ */
  --shadow-color:       219 54% 16%;
  --shadow-sm:          0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-md:          0 2px 6px hsl(var(--shadow-color) / 0.08);
  --shadow-lg:          0 8px 20px hsl(var(--shadow-color) / 0.1);
  --shadow-xl:          0 16px 32px hsl(var(--shadow-color) / 0.12);

  /* ============================================
     SPACING SCALE
     ============================================ */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-xs:   0.125rem;  /* 2px */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;    /* Pill shape */

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-popover:   400;
  --z-tooltip:   500;

  /* ============================================
     BREAKPOINTS (for reference in media queries)
     ============================================ */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* ============================================
     LAYOUT
     ============================================ */
  --sidebar-width: 15rem;
  --page-width: 77.5rem;   /* 1240px */

  /* ============================================
     MARKETING PAGE TOKENS
     Flat on purpose: no gradient washes, no card shadows.
     ============================================ */
  --gradient-text-blue: linear-gradient(var(--color-text), var(--color-text));
  --gradient-hero: linear-gradient(var(--color-background), var(--color-background));
  --gradient-section-alt: linear-gradient(var(--color-surface), var(--color-surface));
  --gradient-cta: linear-gradient(var(--color-surface), var(--color-surface));

  --shadow-card: none;
  --shadow-card-hover: 0 0 0 1px var(--color-gray-400);

  --icon-container-size: 3.25rem;
  --icon-container-bg: var(--color-gray-100);
  --icon-container-radius: var(--radius-md);

  --badge-pill-bg: var(--color-gray-100);
  --badge-pill-color: var(--color-gray-700);
}

/* ===========================================
   DARK MODE THEME (logged-in app only)
   ===========================================
   Applied via data-theme="dark" on <html>.
   =========================================== */

[data-theme="dark"] {
  /* ============================================
     BACKGROUND & SURFACE COLORS
     ============================================ */
  --color-background: #11161E;
  --color-background-dark: #000000;
  --color-surface: #18202B;
  --color-hover: #202A37;
  --color-surface-elevated: #263241;

  --color-primary-600: #9FB1CF;
  --color-primary-700: #C8D3E5;

  /* ============================================
     NEUTRAL GRAYS (inverted for dark mode)
     ============================================ */
  --color-gray-50:  #161B23;
  --color-gray-100: #1F2630;
  --color-gray-200: #2A313B;
  --color-gray-300: #3A424D;
  --color-gray-400: #545D69;
  --color-gray-500: #7F8894;
  --color-gray-600: #A6AFBA;
  --color-gray-700: #D5DAE1;
  --color-gray-800: #E3E7EC;
  --color-gray-900: #F7F8FA;

  /* ============================================
     FUNCTIONAL TOKENS (dark mode overrides)
     ============================================ */
  --color-text:         #F7F8FA;
  --color-text-muted:   #A6AFBA;
  --color-text-light:   #8B94A0;

  --color-border:       #333C48;
  --color-border-hover: #545D69;

  --color-link:         var(--color-primary-300);
  --color-link-hover:   var(--color-primary-200);

  --color-focus:        #7FB0EE;

  /* ============================================
     SEMANTIC COLORS (dark mode)
     ============================================ */
  --color-error:         #F2857D;
  --color-error-dark:    #F6A39D;
  --color-success:       #6CC896;
  --color-success-dark:  #8FD6AE;
  --color-warning:       #E4B062;
  --color-info:          #7FB0EE;

  --color-error-light:   #2D1A1A;
  --color-success-light: #16271D;
  --color-warning-light: #2B2415;
  --color-info-light:    #16202E;

  /* ============================================
     SHADOWS (darker for dark mode)
     ============================================ */
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.2);
  --shadow-md:  0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-lg:  0 8px 20px rgb(0 0 0 / 0.3);
  --shadow-xl:  0 16px 32px rgb(0 0 0 / 0.35);
}