/**
 * BHSST E-OFFICE — DESIGN TOKENS (tokens.css) [S2 — Enterprise Edition]
 * High-End Enterprise Office Management System Design System.
 * S1 variable names preserved for full backward compatibility.
 */

:root {
  /* ── S2 Enterprise Core Palette ──────────────────────────────────────── */
  /* Primary: Deep graphite-navy — authority without institutional heaviness */
  --color-primary: #1e293b;           /* Graphite Navy */
  --color-primary-light: #334155;     /* Elevated Graphite */
  --color-primary-dark: #0f172a;      /* Deep Ink */
  --color-primary-surface: #f1f5f9;   /* Cool Steel Surface */

  /* Secondary: Electric Indigo — enterprise accent, precise & modern */
  --color-secondary: #4f46e5;         /* Enterprise Indigo */
  --color-secondary-light: #6366f1;   /* Elevated Indigo */
  --color-secondary-dark: #3730a3;    /* Deep Indigo */
  --color-secondary-surface: #eef2ff; /* Indigo Tint */

  /* Accent: Sapphire Blue — interactive states, focus rings */
  --color-accent: #2563eb;            /* Sapphire Blue */
  --color-accent-hover: #1d4ed8;      /* Deep Sapphire */

  /* ── Surfaces & Neutrals ─────────────────────────────────────────────── */
  --color-bg: #f8fafc;                /* Enterprise Off-White */
  --color-surface: #ffffff;
  --color-surface-hover: #f8fafc;
  --color-surface-alt: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-border-focus: #2563eb;

  /* ── Enterprise Header / Sidebar System ─────────────────────────────── */
  --color-header-bg: #0f172a;         /* Dark ink header */
  --color-header-border: #1e293b;
  --color-header-text: #e2e8f0;
  --color-header-text-muted: #94a3b8;
  --color-header-accent: #4f46e5;     /* Indigo glow */
  --color-header-accent-glow: rgba(79, 70, 229, 0.35);

  /* ── Typography Colors ───────────────────────────────────────────────── */
  --color-text-main: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-text-inverse: #ffffff;

  /* ── Semantic Status (accessible, high-contrast) ─────────────────────── */
  --status-pending-bg: #fffbeb;
  --status-pending-text: #92400e;
  --status-pending-border: #fde68a;
  --status-pending-dot: #f59e0b;

  --status-verification-bg: #eff6ff;
  --status-verification-text: #1e40af;
  --status-verification-border: #bfdbfe;
  --status-verification-dot: #3b82f6;

  --status-verified-bg: #f0fdf4;
  --status-verified-text: #166534;
  --status-verified-border: #bbf7d0;
  --status-verified-dot: #22c55e;

  --status-rejected-bg: #fff1f2;
  --status-rejected-text: #9f1239;
  --status-rejected-border: #fecdd3;
  --status-rejected-dot: #f43f5e;

  --status-blocked-bg: #f8fafc;
  --status-blocked-text: #334155;
  --status-blocked-border: #cbd5e1;
  --status-blocked-dot: #94a3b8;

  --status-active-bg: #f0fdf4;
  --status-active-text: #15803d;
  --status-active-border: #86efac;
  --status-active-dot: #16a34a;

  /* ── Typography System ───────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Inter', -apple-system, sans-serif;  /* S2 uses clean sans even for display */
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-display: 'IBM Plex Sans', 'Inter', sans-serif;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px — tighter enterprise density */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.1875rem;   /* 19px */
  --text-2xl: 1.375rem;   /* 22px */
  --text-3xl: 1.75rem;    /* 28px */
  --text-4xl: 2.125rem;   /* 34px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Spacing Scale (compact enterprise) ─────────────────────────────── */
  --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 */

  /* ── Elevation & Shadows (enterprise: precise, not dramatic) ─────────── */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --shadow-ring-indigo: 0 0 0 3px rgba(79, 70, 229, 0.2);

  /* ── Border Radii (S2: precise, restrained) ──────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --max-width-container: 1240px;
  --header-height: 44px;

  /* ── Enterprise Left-Accent Strip ────────────────────────────────────── */
  --accent-strip-width: 3px;
  --accent-strip-color: var(--color-secondary);

  /* ── S2 High-End Enterprise Card & Widget Tokens ───────────────────────── */
  --card-shadow-enterprise: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --card-shadow-hover: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(79, 70, 229, 0.2);
  --card-glow-indigo: 0 0 24px rgba(79, 70, 229, 0.18);
  --card-glow-sapphire: 0 0 24px rgba(2, 132, 199, 0.18);
  --card-glow-violet: 0 0 24px rgba(124, 58, 237, 0.18);
  --card-glow-emerald: 0 0 24px rgba(5, 150, 105, 0.18);
}

/* ============================================================
   4 CURATED ENTERPRISE THEMES (FULL-SPECTRUM PALETTES)
   ============================================================ */

/* Theme 1: Enterprise Indigo (Modern Flagship) */
:root,
html[data-theme="theme-1"] {
  --color-primary: #1e293b;
  --color-primary-light: #334155;
  --color-primary-dark: #0f172a;
  --color-primary-surface: #eef2ff;

  --color-secondary: #4f46e5;
  --color-secondary-light: #6366f1;
  --color-secondary-dark: #3730a3;
  --color-secondary-surface: #eef2ff;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;

  --color-bg: #f4f6fb;
  --theme-grid-dot: rgba(79, 70, 229, 0.16);

  --color-header-bg: #0f172a;
  --color-header-border: #4f46e5;
  --color-header-accent: #818cf8;
  --color-header-accent-glow: rgba(79, 70, 229, 0.45);

  --accent-strip-color: #4f46e5;
  --hero-accent-gradient: linear-gradient(90deg, #4f46e5 0%, #6366f1 50%, #06b6d4 100%);
  --hero-card-bg: linear-gradient(135deg, #ffffff 0%, #f4f6fb 50%, #eef2ff 100%);
  --card-header-bg: #f8faff;
  --color-card-glow: rgba(79, 70, 229, 0.25);
  --card-shadow-hover: 0 16px 36px -6px rgba(15, 23, 42, 0.14), 0 0 0 1.5px rgba(79, 70, 229, 0.35);
}

/* Theme 2: Oceanic Sapphire (Vibrant Marine Tech & Azure) */
html[data-theme="theme-2"] {
  --color-primary: #072652;
  --color-primary-light: #0d3b7a;
  --color-primary-dark: #051a38;
  --color-primary-surface: #e0f2fe;

  --color-secondary: #0284c7;
  --color-secondary-light: #38bdf8;
  --color-secondary-dark: #0369a1;
  --color-secondary-surface: #e0f2fe;

  --color-accent: #0284c7;
  --color-accent-hover: #0369a1;

  --color-bg: #eaf3fa;
  --theme-grid-dot: rgba(2, 132, 199, 0.24);

  --color-header-bg: #0b2d59;
  --color-header-border: #38bdf8;
  --color-header-accent: #38bdf8;
  --color-header-accent-glow: rgba(56, 189, 248, 0.45);

  --accent-strip-color: #0284c7;
  --hero-accent-gradient: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #06b6d4 100%);
  --hero-card-bg: linear-gradient(135deg, #ffffff 0%, #eaf3fa 50%, #e0f2fe 100%);
  --card-header-bg: #f0f7ff;
  --color-card-glow: rgba(2, 132, 199, 0.28);
  --card-shadow-hover: 0 16px 36px -6px rgba(7, 38, 82, 0.16), 0 0 0 1.5px rgba(2, 132, 199, 0.4);
}

/* Theme 3: Royal Emerald (Institutional Forest & Jade Mint) */
html[data-theme="theme-3"] {
  --color-primary: #064032;
  --color-primary-light: #0c5946;
  --color-primary-dark: #032b21;
  --color-primary-surface: #dcfce7;

  --color-secondary: #059669;
  --color-secondary-light: #10b981;
  --color-secondary-dark: #047857;
  --color-secondary-surface: #ecfdf5;

  --color-accent: #059669;
  --color-accent-hover: #047857;

  --color-bg: #eaf5ef;
  --theme-grid-dot: rgba(5, 150, 105, 0.24);

  --color-header-bg: #063c2e;
  --color-header-border: #10b981;
  --color-header-accent: #34d399;
  --color-header-accent-glow: rgba(16, 185, 129, 0.45);

  --accent-strip-color: #059669;
  --hero-accent-gradient: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
  --hero-card-bg: linear-gradient(135deg, #ffffff 0%, #eaf5ef 50%, #dcfce7 100%);
  --card-header-bg: #f2fbf6;
  --color-card-glow: rgba(5, 150, 105, 0.28);
  --card-shadow-hover: 0 16px 36px -6px rgba(6, 64, 50, 0.16), 0 0 0 1.5px rgba(5, 150, 105, 0.4);
}

/* Theme 4: Imperial Amber & Gold (Sovereign Warm Slate & Molten Gold) */
html[data-theme="theme-4"] {
  --color-primary: #261e14;
  --color-primary-light: #3d3121;
  --color-primary-dark: #17120c;
  --color-primary-surface: #fef3c7;

  --color-secondary: #d97706;
  --color-secondary-light: #f59e0b;
  --color-secondary-dark: #b45309;
  --color-secondary-surface: #fffbeb;

  --color-accent: #d97706;
  --color-accent-hover: #b45309;

  --color-bg: #f8f4eb;
  --theme-grid-dot: rgba(217, 119, 6, 0.24);

  --color-header-bg: #241a12;
  --color-header-border: #f59e0b;
  --color-header-accent: #fbbf24;
  --color-header-accent-glow: rgba(245, 158, 11, 0.45);

  --accent-strip-color: #d97706;
  --hero-accent-gradient: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  --hero-card-bg: linear-gradient(135deg, #ffffff 0%, #f8f4eb 50%, #fef3c7 100%);
  --card-header-bg: #fdfbf5;
  --color-card-glow: rgba(217, 119, 6, 0.28);
  --card-shadow-hover: 0 16px 36px -6px rgba(38, 30, 20, 0.16), 0 0 0 1.5px rgba(217, 119, 6, 0.4);
}