/* ==========================================================================
   GiantPanel V2 — Design Tokens & Core Design System
   Architecture: Technical Precision SMM & Lumina SaaS Hybrid (Light Theme)
   Bolder Typography Enabled (Requirement A Global Tokens)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  /* --------------------------------------------------------------------------
     1. Color System (Light Theme - Option 1)
     -------------------------------------------------------------------------- */
  
  /* Brand Primary (Teal) */
  --gp-color-primary: #1AA6A6;          /* Teal Accent / Container */
  --gp-color-primary-dark: #006A6A;     /* Dark Teal for accessible text & high-contrast buttons (6.4:1 contrast) */
  --gp-color-primary-hover: #158888;
  --gp-color-primary-active: #004F50;
  --gp-color-primary-subtle: #EFF4FF;
  --gp-color-primary-container: #E5EEFF;
  --gp-color-on-primary: #FFFFFF;

  /* Brand Secondary / Accent CTA (Vibrant Amber / Orange) */
  --gp-color-secondary: #F15A24;        /* Vibrant Orange for Buttons / CTAs */
  --gp-color-secondary-dark: #AD3300;   /* Dark Amber/Orange for accessible text on white (4.65:1 contrast) */
  --gp-color-secondary-hover: #D84816;
  --gp-color-secondary-subtle: #FFF0EB;
  --gp-color-on-secondary: #FFFFFF;

  /* Light Theme Surfaces & Backgrounds */
  --gp-color-bg: #F8FAFC;               /* Main app background */
  --gp-color-bg-alt: #F1F5F9;           /* Secondary background / Table headers */
  --gp-color-surface-lowest: #FFFFFF;
  --gp-color-surface-low: #F8FAFC;
  --gp-color-surface: #FFFFFF;           /* Cards & Container surface */
  --gp-color-surface-high: #EFF4FF;
  --gp-color-surface-highest: #E2E8F0;

  /* Text & Content Colors */
  --gp-color-text-main: #1E293B;        /* Primary body copy (14.2:1 contrast) */
  --gp-color-text-heading: #0F172A;     /* Deep slate headings (18.3:1 contrast) */
  --gp-color-text-muted: #64748B;      /* Secondary copy & labels (4.6:1 contrast - WCAG AA pass) */
  --gp-color-text-subtle: #94A3B8;     /* Metadata / Icons */
  --gp-color-text-disabled: #CBD5E1;

  /* Borders & Dividers */
  --gp-color-border-subtle: #F1F5F9;
  --gp-color-border-default: #E2E8F0;
  --gp-color-border-strong: #CBD5E1;
  --gp-color-border-primary: rgba(26, 166, 166, 0.40);

  /* Status Colors */
  --gp-color-success: #059669;
  --gp-color-success-bg: #ECFDF5;
  --gp-color-warning: #D97706;
  --gp-color-warning-bg: #FFFBEB;
  --gp-color-error: #DC2626;
  --gp-color-error-bg: #FEF2F2;
  --gp-color-info: #2563EB;
  --gp-color-info-bg: #EFF6FF;

  /* --------------------------------------------------------------------------
     2. Typography Tokens (Requirement A: Bolder Typography Sitewide)
     -------------------------------------------------------------------------- */
  
  /* Font Families */
  --gp-font-headline: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --gp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --gp-font-mono: 'JetBrains Mono', monospace;

  /* Bolder Font Weights (Global Tokens) */
  --gp-weight-headline-xl: 800;  /* ExtraBold */
  --gp-weight-headline-lg: 700;  /* Bold */
  --gp-weight-headline-md: 700;  /* Bold */
  --gp-weight-headline-sm: 700;  /* Bold */
  --gp-weight-body-lg: 500;      /* Medium */
  --gp-weight-body-md: 500;      /* Medium */
  --gp-weight-body-sm: 500;      /* Medium */
  --gp-weight-label-md: 600;     /* SemiBold */
  --gp-weight-label-sm: 700;     /* Bold */
  --gp-weight-button: 700;       /* Bold */
  --gp-weight-nav: 600;          /* SemiBold */
  --gp-weight-data-mono: 600;    /* SemiBold */

  /* Font Sizes & Line Heights */
  --gp-size-headline-xl: 2.5rem;    /* 40px */
  --gp-lh-headline-xl: 1.2;
  --gp-size-headline-lg: 2rem;      /* 32px */
  --gp-lh-headline-lg: 1.25;
  --gp-size-headline-md: 1.5rem;    /* 24px */
  --gp-lh-headline-md: 1.33;
  --gp-size-headline-sm: 1.25rem;   /* 20px */
  --gp-lh-headline-sm: 1.4;

  --gp-size-body-lg: 1.125rem;      /* 18px */
  --gp-lh-body-lg: 1.55;
  --gp-size-body-md: 1rem;          /* 16px */
  --gp-lh-body-md: 1.5;
  --gp-size-body-sm: 0.875rem;      /* 14px */
  --gp-lh-body-sm: 1.43;

  --gp-size-label-md: 0.875rem;     /* 14px */
  --gp-size-label-sm: 0.75rem;      /* 12px */
  --gp-size-label-xs: 0.6875rem;    /* 11px */

  /* --------------------------------------------------------------------------
     3. Layout & Spacing Tokens
     -------------------------------------------------------------------------- */
  --gp-space-4xs: 2px;
  --gp-space-3xs: 4px;
  --gp-space-2xs: 8px;
  --gp-space-xs: 12px;
  --gp-space-sm: 16px;
  --gp-space-md: 24px;
  --gp-space-lg: 32px;
  --gp-space-xl: 48px;
  --gp-space-2xl: 64px;

  --gp-sidebar-width: 260px;
  --gp-header-height: 72px;
  --gp-container-max: 1320px;

  /* --------------------------------------------------------------------------
     4. Shape & Border Radius Tokens
     -------------------------------------------------------------------------- */
  --gp-radius-sm: 6px;
  --gp-radius-md: 10px;
  --gp-radius-lg: 14px;
  --gp-radius-xl: 20px;
  --gp-radius-full: 9999px;

  /* --------------------------------------------------------------------------
     5. Elevation, Depth & Shadows (Light Theme Ambient Depth)
     -------------------------------------------------------------------------- */
  --gp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --gp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --gp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --gp-shadow-glow-primary: 0 4px 20px rgba(26, 166, 166, 0.25);
  --gp-shadow-glow-secondary: 0 4px 20px rgba(241, 90, 36, 0.25);

  /* --------------------------------------------------------------------------
     6. Motion & Micro-animations
     -------------------------------------------------------------------------- */
  --gp-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --gp-transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --gp-transition-bounce: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Global Utility Classes
   ========================================================================== */

body.gp-light-theme {
  background-color: var(--gp-color-bg);
  color: var(--gp-color-text-main);
  font-family: var(--gp-font-body);
}

.gp-font-headline { font-family: var(--gp-font-headline); }
.gp-font-body     { font-family: var(--gp-font-body); }
.gp-font-mono     { font-family: var(--gp-font-mono); font-variant-numeric: tabular-nums; }

.gp-weight-headline-xl { font-weight: var(--gp-weight-headline-xl); }
.gp-weight-headline-lg { font-weight: var(--gp-weight-headline-lg); }
.gp-weight-headline-md { font-weight: var(--gp-weight-headline-md); }
.gp-weight-headline-sm { font-weight: var(--gp-weight-headline-sm); }
.gp-weight-body-lg     { font-weight: var(--gp-weight-body-lg); }
.gp-weight-body-md     { font-weight: var(--gp-weight-body-md); }
.gp-weight-body-sm     { font-weight: var(--gp-weight-body-sm); }
.gp-weight-label-md    { font-weight: var(--gp-weight-label-md); }
.gp-weight-label-sm    { font-weight: var(--gp-weight-label-sm); }
.gp-weight-button      { font-weight: var(--gp-weight-button); }
.gp-weight-nav         { font-weight: var(--gp-weight-nav); }

.gp-card {
  background: var(--gp-color-surface);
  border: 1px solid var(--gp-color-border-default);
  border-radius: var(--gp-radius-lg);
  box-shadow: var(--gp-shadow-sm);
  transition: var(--gp-transition-normal);
}

.gp-card:hover {
  border-color: var(--gp-color-border-strong);
  box-shadow: var(--gp-shadow-md);
}

.gp-btn-primary {
  background: var(--gp-color-primary-dark);
  color: var(--gp-color-on-primary);
  font-family: var(--gp-font-body);
  font-weight: var(--gp-weight-button);
  border-radius: var(--gp-radius-md);
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: var(--gp-transition-fast);
}

.gp-btn-primary:hover {
  background: var(--gp-color-primary-hover);
  box-shadow: var(--gp-shadow-glow-primary);
}

.gp-btn-secondary {
  background: var(--gp-color-secondary);
  color: var(--gp-color-on-secondary);
  font-family: var(--gp-font-body);
  font-weight: var(--gp-weight-button);
  border-radius: var(--gp-radius-md);
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: var(--gp-transition-fast);
}

.gp-btn-secondary:hover {
  background: var(--gp-color-secondary-hover);
  box-shadow: var(--gp-shadow-glow-secondary);
}

/* ==========================================================================
   Announcements Panel (desktop default)
   ========================================================================== */
.gp-announcements-panel {
  max-height: 800px;
  overflow-y: auto;
}

/* ==========================================================================
   Global: Dropdown Text Overflow Protection (Fix 3)
   ========================================================================== */
.dropdown-menu .dropdown-item {
  white-space: normal;
  word-break: break-word;
}

/* ==========================================================================
   Responsive Breakpoints (Fix 1 — Mobile Token Overrides)
   ========================================================================== */

/* Tablet & below: ≤767.98px */
@media (max-width: 767.98px) {
  :root {
    --gp-space-xl: 24px;
    --gp-space-lg: 20px;
    --gp-space-md: 16px;
    --gp-sidebar-width: 0px;
    --gp-header-height: 56px;
    --gp-container-max: 100%;
    --gp-size-headline-xl: 1.75rem;
    --gp-size-headline-lg: 1.5rem;
    --gp-size-headline-md: 1.25rem;
  }

  .gp-announcements-panel {
    max-height: 400px;
  }
}

/* Small phone: ≤413px */
@media (max-width: 413px) {
  :root {
    --gp-space-xl: 16px;
    --gp-radius-xl: 12px;
  }
}