/* ==========================================================================
   Talkpush Sign — Design System Variables
   ==========================================================================

   HOW TO USE:
   1. This is the SINGLE canonical source of design tokens (fonts, colors,
      spacing, radii, shadows). Load it BEFORE global.css on every page:
      <link rel="stylesheet" href="/css/design-system-variables.css" />
   2. Do not redefine :root tokens in other stylesheets or inline <style>
      blocks — all var() references pick their values up from here.

   NOTE: Polymath Text requires OTF font files in /fonts/ directory.
         If not available yet, the system falls back to Inter → sans-serif.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Face — Polymath Text (custom font)
   --------------------------------------------------------------------------
   You need to place the OTF files in /public/fonts/:
   - PolymathText-Medium.otf  (weight 500)
   - PolymathText-Bold.otf    (weight 700)

   If font files are not available, comment out this block.
   The system will gracefully fall back to Inter.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Polymath Text';
  src: url('/fonts/PolymathText-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Polymath Text';
  src: url('/fonts/PolymathText-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Root Variables — Light Theme (default)
   -------------------------------------------------------------------------- */

:root {
  /* ── Core Semantic Tokens ─────────────────────────────────────────────── */
  --background:          hsl(60, 100%, 98%);
  --foreground:          hsl(240, 10%, 8%);
  --card:                hsl(0, 0%, 100%);
  --card-foreground:     hsl(240, 10%, 8%);
  --primary:             hsl(240, 10%, 8%);
  --primary-foreground:  hsl(50, 30%, 92%);
  --secondary:           hsl(60, 30%, 95%);
  --secondary-foreground: hsl(240, 10%, 8%);
  --muted:               hsl(60, 20%, 93%);
  --muted-foreground:    hsl(240, 5%, 45%);
  --accent:              hsl(298, 72%, 85%);
  --accent-foreground:   hsl(240, 10%, 8%);
  --destructive:         hsl(0, 65%, 60%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border:              hsl(240, 5%, 85%);
  --input:               hsl(240, 5%, 75%);
  --ring:                hsl(240, 10%, 8%);

  /* ── Brand Accent Palette — Sage ──────────────────────────────────────── */
  --brand-sage:           hsl(139, 28%, 74%);
  --brand-sage-lightest:  hsl(139, 25%, 88%);
  --brand-sage-lighter:   hsl(139, 28%, 80%);
  --brand-sage-darker:    hsl(139, 30%, 58%);

  /* ── Brand Accent Palette — Lavender ──────────────────────────────────── */
  --brand-lavender:           hsl(223, 64%, 84%);
  --brand-lavender-lightest:  hsl(223, 55%, 92%);
  --brand-lavender-lighter:   hsl(223, 60%, 88%);
  --brand-lavender-darker:    hsl(223, 45%, 68%);

  /* ── Brand Accent Palette — Pink ──────────────────────────────────────── */
  --brand-pink:           hsl(298, 72%, 85%);
  --brand-pink-lightest:  hsl(298, 60%, 92%);
  --brand-pink-lighter:   hsl(298, 65%, 88%);
  --brand-pink-darker:    hsl(298, 50%, 70%);

  /* ── Brand Accent Palette — Amber ─────────────────────────────────────── */
  --brand-amber:           hsl(36, 86%, 64%);
  --brand-amber-lightest:  hsl(36, 75%, 82%);
  --brand-amber-lighter:   hsl(36, 80%, 74%);
  --brand-amber-darker:    hsl(36, 80%, 52%);

  /* ── Status Colors ────────────────────────────────────────────────────── */
  --status-completed:    var(--brand-sage);
  --status-approved:     var(--brand-sage);
  --status-in-progress:  var(--brand-lavender);
  --status-viewed:       var(--brand-lavender);
  --status-pending:      var(--brand-amber);
  --status-expired:      var(--brand-amber);
  --status-declined:     var(--destructive);
  --status-rejected:     var(--destructive);
  --status-voided:       var(--muted-foreground);

  /* ── Field Type Colors ────────────────────────────────────────────────── */
  --field-signature:  var(--brand-pink);
  --field-input:      var(--brand-sage);
  --field-autofill:   var(--brand-amber);
  --field-display:    var(--muted-foreground);

  /* ── Sidebar Tokens (light — derived from the Sage brand palette) ─────── */
  --sidebar-background:         hsl(139, 25%, 92%);
  --sidebar-foreground:         hsl(240, 10%, 14%);
  --sidebar-muted-foreground:   hsl(160, 8%, 36%);
  --sidebar-accent:             hsl(139, 28%, 84%);
  --sidebar-accent-foreground:  hsl(240, 10%, 8%);
  --sidebar-border:             hsl(139, 20%, 82%);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nav:  var(--font-sans);

  /* ── Compact Type Scale ───────────────────────────────────────────────── */
  --text-2xs:  11px;  /* meta / secondary */
  --text-xs:   12px;  /* body small / table dense */
  --text-sm:   13px;  /* body / table default */
  --text-md:   14px;  /* emphasized body */
  --text-lg:   16px;  /* section titles */
  --text-xl:   18px;  /* page titles */

  /* ── Compact Spacing Scale ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ── Border Radius Scale ──────────────────────────────────────────────── */
  --radius:    0.375rem;  /* 6px — base */
  --radius-sm: calc(var(--radius) - 4px);  /* 2px */
  --radius-md: calc(var(--radius) - 2px);  /* 4px */
  --radius-lg: var(--radius);              /* 6px */
  --radius-xl: calc(var(--radius) + 3px);  /* 9px */
  --radius-2xl: calc(var(--radius) + 6px); /* 12px */
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ── Backward-Compatible Overrides ──────────────────────────────────────
     These map the OLD variable names to NEW values so existing var()
     references in global.css continue to work without editing.            */

  /* Primary & accent */
  --color-primary:               var(--primary);
  --color-primary-dark:          var(--sidebar-background);
  --color-primary-accent:        var(--accent);
  --primary-color:               var(--primary);

  /* Text colors */
  --color-text-primary:          var(--foreground);
  --color-text-secondary:        var(--muted-foreground);
  --color-text-muted:            var(--muted-foreground);
  --color-text-on-primary:       var(--primary-foreground);
  --color-text-on-primary-muted: var(--primary-foreground);
  --color-text-dark:             var(--foreground);
  --color-text-dark-secondary:   var(--muted-foreground);
  --color-text-medium:           var(--muted-foreground);
  --color-text-light:            var(--primary-foreground);
  --color-text-light-secondary:  hsla(0, 0%, 100%, 0.7);
  --color-text-placeholder:      var(--muted-foreground);
  --color-text-link:             var(--brand-lavender-darker);

  /* Shorthand text tokens (used in requisitionindi.css, template.css) */
  --text-primary:                var(--foreground);
  --text-secondary:              var(--muted-foreground);
  --text-tertiary:               hsl(240, 5%, 55%);

  /* Background colors */
  --color-bg-light:              var(--background);
  --color-bg-white:              var(--card);
  --color-bg-base:               var(--background);
  --color-background-light:      var(--background);
  --color-background-medium:     var(--secondary);
  --color-background-dark:       var(--muted);

  /* Border colors */
  --color-border:                var(--border);
  --color-border-light:          var(--input);
  --border-color:                var(--border);

  /* Danger / destructive */
  --color-danger:                var(--destructive);
  --color-danger-bg:             hsl(0, 100%, 97%);

  /* Muted base fallback */
  --base-muted:                  var(--muted);

  /* Typography */
  --font-main:                   var(--font-sans);
}

/* --------------------------------------------------------------------------
   Dark Theme (optional — activate by adding class="dark" to <html>)
   -------------------------------------------------------------------------- */

html.dark {
  --background:          hsl(240, 8%, 9%);
  --foreground:          hsl(50, 30%, 92%);
  --card:                hsl(240, 6%, 13%);
  --card-foreground:     hsl(50, 30%, 92%);
  --primary:             hsl(50, 30%, 92%);
  --primary-foreground:  hsl(240, 10%, 8%);
  --secondary:           hsl(240, 5%, 18%);
  --secondary-foreground: hsl(50, 30%, 92%);
  --muted:               hsl(240, 5%, 18%);
  --muted-foreground:    hsl(240, 5%, 55%);
  --accent:              hsl(298, 50%, 65%);
  --accent-foreground:   hsl(50, 30%, 92%);
  --destructive:         hsl(0, 55%, 55%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border:              hsl(240, 3%, 35%);
  --input:               hsl(240, 3%, 35%);
  --ring:                hsl(50, 30%, 92%);

  --sidebar-background:         hsl(240, 8%, 7%);
  --sidebar-foreground:         hsl(0, 0%, 95%);
  --sidebar-accent:             hsl(240, 5%, 14%);
  --sidebar-accent-foreground:  hsl(0, 0%, 95%);
  --sidebar-border:             hsl(240, 5%, 14%);
}

/* --------------------------------------------------------------------------
   Base Typography Overrides
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  font-feature-settings: "rlig" 1, "calt" 1;
  background-color: var(--background);
  color: var(--foreground);
}

/* Heading hierarchy per design system */
h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Sidebar Brand Override
   -------------------------------------------------------------------------- */

.sidebar {
  background-color: var(--sidebar-background);
  font-family: var(--font-nav);
}

.nav-item {
  color: var(--sidebar-foreground);
  opacity: 0.7;
}

.nav-item:hover {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-foreground);
  opacity: 1;
}

.nav-item.active {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-foreground);
  opacity: 1;
}

/* Active nav item icon gets the accent color (pink) */
.nav-item.active .nav-icon {
  filter: brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(1200%) hue-rotate(260deg) brightness(100%) contrast(95%);
  /* This approximates a pink tint on SVG icons.
     For precise control, consider replacing SVG images with inline SVGs
     and using fill: var(--accent) */
}

.nav-text {
  color: var(--sidebar-foreground);
}

.notification-badge {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.user-name {
  color: var(--sidebar-foreground);
}

.user-email {
  color: var(--sidebar-foreground);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Body & Page Background Override
   -------------------------------------------------------------------------- */

html, body {
  background-color: var(--background) !important;
  color: var(--foreground);
}

.content, .main, .page, .page-container, .page-wrapper .main {
  background: var(--card);
}

.main-content {
  background: var(--card);
}

.content-card {
  background-color: var(--background);
}

/* --------------------------------------------------------------------------
   Form Input Overrides
   -------------------------------------------------------------------------- */

input, textarea, select {
  font-family: var(--font-sans);
  border-color: var(--input);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
  outline: none;
}

.input-error {
  border-color: var(--destructive) !important;
  background-color: hsl(0, 100%, 98%) !important;
}

.input-error:focus {
  box-shadow: 0 0 0 3px hsla(0, 65%, 60%, 0.2);
}