/**
 * ═════════════════════════════════════════════════════════════════════════════════
 * body.css — Design Tokens & Base Styles
 * ═════════════════════════════════════════════════════════════════════════════════
 *
 * PURPOSE:
 * This file contains ALL CSS custom properties (design tokens) for the GSS application.
 * It is the single source of truth for colors, spacing, typography, shadows, and layout.
 *
 * AI GUIDELINES:
 * - NEVER hardcode color values (e.g., #F3A12B) - ALWAYS use var(--color-brand-orange)
 * - NEVER hardcode spacing values (e.g., 12px) - ALWAYS use var(--space-md)
 * - NEVER hardcode font sizes - ALWAYS use var(--font-size-*)
 * - All new styles MUST reference these tokens
 * - Do NOT create new tokens without explicit requirement
 *
 * FILE LOCATION:
 * assets/css/body.css - Must be imported FIRST in all HTML files
 *
 * THEMES:
 * - Light theme: Default (:root)
 * - Dark theme: Applied via [data-theme="dark"] on <html> or <body>
 *
 * @see README_AI_RULES.md Section 20 - Mandatory Design Tokens Usage
 */

/* ═════════════════════════════════════════════════════════════════════════════════
   ROOT VARIABLES (Light Theme - Default)
   ═════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
     BRAND COLORS
     ─────────────────────────────────────────────────────────────────────────────
     Primary brand colors for GSS application identity.
     Usage: Primary buttons, highlights, selected states, accents.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-brand-navy: #282F41;           /* Primary dark color - sidebar, headers */
  --color-brand-orange: #F3A12B;         /* Primary accent - CTAs, highlights, selection */
  --color-brand-orange-hover: #E5931E;   /* Orange hover state */
  --color-support-gray: #AEB2BA;         /* Secondary neutral - icons, disabled */

  /* ─────────────────────────────────────────────────────────────────────────────
     SURFACE COLORS
     ─────────────────────────────────────────────────────────────────────────────
     Background colors for different surface levels in the UI hierarchy.
     Use: body → card → elevated for visual layering.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-surface-body: #FCFCFB;         /* Page background - lightest level */
  --color-surface-card: #FFFFFF;         /* Card background - second level */
  --color-surface-elevated: #FFFFFF;     /* Elevated surfaces - modals, dropdowns */
  --color-surface-muted: #F4F5F7;        /* Subtle backgrounds - hover, disabled */
  --color-surface-sidebar: #282F41;      /* Sidebar background */
  --color-surface-sidebar-hover: #323B52; /* Sidebar item hover */

  /* ─────────────────────────────────────────────────────────────────────────────
     TEXT COLORS
     ─────────────────────────────────────────────────────────────────────────────
     Typography colors with semantic naming for hierarchy.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-text-primary: #2E343D;         /* Main text - headings, body content */
  --color-text-secondary: #5F6674;       /* Secondary text - descriptions, labels */
  --color-text-tertiary: #8B919C;        /* Tertiary text - placeholders, hints */
  --color-text-inverse: #F5F7FA;         /* Inverse text - on dark backgrounds */
  --color-text-sidebar: #C5C9D2;         /* Sidebar text */
  --color-text-sidebar-active: #FFFFFF;  /* Active sidebar item text */

  /* ─────────────────────────────────────────────────────────────────────────────
     BORDER COLORS
     ─────────────────────────────────────────────────────────────────────────────
     Border colors for different emphasis levels.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-border-light: #DCE0E7;         /* Light borders - subtle separators */
  --color-border-medium: #C4C9D4;        /* Medium borders - input borders */
  --color-border-focus: #3B82F6;         /* Focus ring color */

  /* ─────────────────────────────────────────────────────────────────────────────
     SELECTED / ACTIVE STATES
     ─────────────────────────────────────────────────────────────────────────────
     Colors for selected items, active navigation, and focus indicators.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-selected-bg: #FFF3E3;          /* Selected item background */
  --color-selected-border: #F3A12B;      /* Selected item border */
  --color-selected-text: #2E343D;        /* Selected item text */

  /* ─────────────────────────────────────────────────────────────────────────────
     STATUS COLORS
     ─────────────────────────────────────────────────────────────────────────────
     Semantic colors for status indicators, alerts, and feedback.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-info-blue: #3B82F6;            /* Info alerts, links */
  --color-success-green: #10B981;        /* Success states, confirmations */
  --color-warning-yellow: #F59E0B;       /* Warning alerts */
  --color-danger-red: #EF4444;           /* Error states, destructive actions */

  /* ─────────────────────────────────────────────────────────────────────────────
     LABEL COLORS (Tags, Badges, Pills)
     ─────────────────────────────────────────────────────────────────────────────
     Pre-defined color pairs for labels with background and text.
     ───────────────────────────────────────────────────────────────────────────── */
  --color-label-blue-bg: #EFF6FF;
  --color-label-blue-text: #1D4ED8;
  --color-label-green-bg: #ECFDF5;
  --color-label-green-text: #059669;
  --color-label-yellow-bg: #FFFBEB;
  --color-label-yellow-text: #B45309;
  --color-label-orange-bg: #FFF7ED;
  --color-label-orange-text: #C2410C;
  --color-label-purple-bg: #F5F3FF;
  --color-label-purple-text: #6D28D9;
  --color-label-teal-bg: #F0FDFA;
  --color-label-teal-text: #0D9488;
  --color-label-red-bg: #FEF2F2;
  --color-label-red-text: #DC2626;

  /* ─────────────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     ─────────────────────────────────────────────────────────────────────────────
     Consistent border radius values for all components.
     ───────────────────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;                      /* Minimal radius - chips, tags */
  --radius-sm: 8px;                      /* Small radius - buttons, inputs */
  --radius-md: 12px;                     /* Medium radius - cards, dropdowns */
  --radius-lg: 16px;                     /* Large radius - modals */
  --radius-xl: 20px;                     /* Extra large radius - feature cards */
  --radius-full: 9999px;                 /* Fully rounded - avatars, pills */

  /* ─────────────────────────────────────────────────────────────────────────────
     SHADOWS
     ─────────────────────────────────────────────────────────────────────────────
     Box shadow tokens for elevation and depth.
     ───────────────────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);      /* Subtle lift */
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.06);      /* Small components */
  --shadow-soft: 0 6px 18px rgba(16, 24, 40, 0.08);   /* Soft elevation */
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);     /* Cards, dropdowns */
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12);    /* Modals, overlays */
  --shadow-float: 0 20px 60px rgba(16, 24, 40, 0.16); /* Maximum elevation */

  /* ─────────────────────────────────────────────────────────────────────────────
     LAYOUT DIMENSIONS
     ─────────────────────────────────────────────────────────────────────────────
     Fixed layout dimensions for the app shell.
     ───────────────────────────────────────────────────────────────────────────── */
  --shell-left-width: 252px;             /* Expanded sidebar width */
  --shell-left-width-collapsed: 72px;    /* Collapsed sidebar width */
  --shell-right-width: 380px;            /* AI panel width */
  --top-bar-height: 64px;                /* Top bar fixed height */

  /* ─────────────────────────────────────────────────────────────────────────────
     SPACING SCALE
     ─────────────────────────────────────────────────────────────────────────────
     Consistent spacing values for margins, padding, and gaps.
     Use these for ALL spacing - NEVER hardcode pixel values.
     ───────────────────────────────────────────────────────────────────────────── */
  --space-xs: 4px;                       /* Tight spacing - icon gaps */
  --space-sm: 8px;                       /* Small spacing - inline gaps */
  --space-md: 12px;                      /* Medium spacing - default gap */
  --space-lg: 16px;                      /* Large spacing - section gaps */
  --space-xl: 20px;                      /* Extra large - card padding */
  --space-2xl: 24px;                     /* 2XL spacing - page margins */
  --space-3xl: 32px;                     /* 3XL spacing - large sections */
  --space-4xl: 40px;                     /* 4XL spacing - page headers */

  /* ─────────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ─────────────────────────────────────────────────────────────────────────────
     Font family, sizes, weights, and line heights.
     ───────────────────────────────────────────────────────────────────────────── */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 11px;                  /* Tiny text - badges, labels */
  --font-size-sm: 12px;                  /* Small text - captions, buttons */
  --font-size-base: 14px;                /* Base text - body content */
  --font-size-md: 15px;                  /* Medium text - emphasis */
  --font-size-lg: 18px;                  /* Large text - headings */
  --font-size-xl: 22px;                  /* XL text - page titles */
  --font-size-2xl: 28px;                 /* 2XL text - hero headings */
  --font-weight-normal: 400;             /* Regular weight */
  --font-weight-medium: 500;             /* Medium weight - labels, buttons */
  --font-weight-semibold: 600;           /* Semibold - subheadings */
  --font-weight-bold: 700;               /* Bold - headings */
  --line-height-tight: 1.25;             /* Tight line height - headings */
  --line-height-normal: 1.5;             /* Normal line height - body */
  --line-height-relaxed: 1.65;           /* Relaxed - long form text */

  /* ─────────────────────────────────────────────────────────────────────────────
     TRANSITIONS
     ─────────────────────────────────────────────────────────────────────────────
     Animation timing for smooth interactions.
     ───────────────────────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;         /* Quick interactions - hover */
  --transition-base: 200ms ease;         /* Standard transitions */
  --transition-slow: 300ms ease;         /* Slow transitions - modals */
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}

/* ═════════════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ═════════════════════════════════════════════════════════════════════════════════
   Applied when <html data-theme="dark"> or <body data-theme="dark">
   Only override tokens that need different values for dark mode.
   ═════════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surface overrides */
  --color-surface-body: #151A24;
  --color-surface-card: #1F2635;
  --color-surface-elevated: #263045;
  --color-surface-muted: #1A2030;
  --color-surface-sidebar: #1A1F2C;
  --color-surface-sidebar-hover: #242B3D;

  /* Text overrides - brightened for dark mode contrast */
  --color-text-primary: #E8ECF2;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary: #9CA3AF;
  --color-text-sidebar: #D1D5DB;
  --color-text-sidebar-active: #FFFFFF;

  /* Border overrides */
  --color-border-light: #2D3548;
  --color-border-medium: #3B4560;

  /* Selected state overrides */
  --color-selected-bg: #38425A;
  --color-selected-text: #F5F7FA;

  /* Label overrides - adjusted for dark backgrounds */
  --color-label-blue-bg: #1E293B;
  --color-label-blue-text: #60A5FA;
  --color-label-green-bg: #132A20;
  --color-label-green-text: #34D399;
  --color-label-yellow-bg: #2A2210;
  --color-label-yellow-text: #FBBF24;
  --color-label-orange-bg: #2A1F10;
  --color-label-orange-text: #FB923C;
  --color-label-purple-bg: #1E1B2E;
  --color-label-purple-text: #A78BFA;
  --color-label-teal-bg: #0F2927;
  --color-label-teal-text: #2DD4BF;
  --color-label-red-bg: #2A1515;
  --color-label-red-text: #F87171;

  /* Shadow overrides - more intense for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   FONT FACE DEFINITIONS
   ═════════════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   BASE RESET
   ═════════════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-body);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   ELEMENT RESETS
   ═════════════════════════════════════════════════════════════════════════════════ */
a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  outline: none;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE RING
   ─────────────────────────────────────────────────────────────────────────────────
   Accessible focus indicator for keyboard navigation.
   ═════════════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ─────────────────────────────────────────────────────────────────────────────────
   Custom scrollbar appearance for webkit browsers.
   ═════════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-support-gray);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ─────────────────────────────────────────────────────────────────────────────────
   Helper classes for common typography adjustments.
   ═════════════════════════════════════════════════════════════════════════════════ */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}