/* =============================================================
   ENVIROSPAN COMPLIANCE OS — variables.css
   ALL colours, fonts, spacing defined here.
   To rebrand: ONLY edit this file.
   ============================================================= */

:root {
  /* ── Brand Colours ─────────────────────────────────── */
  --color-primary:        #1b3a6b;   /* Deep navy — headers, buttons, sidebar */
  --color-primary-dark:   #142d54;   /* Hover state for primary */
  --color-primary-light:  #2a5298;   /* Active/focus states */
  --color-secondary:      #2ecc71;   /* Green — success, approved, MCS tick */
  --color-secondary-dark: #27ae60;   /* Hover state for secondary */
  --color-accent:         #3498db;   /* Blue — info, links */
  --color-warning:        #f39c12;   /* Amber — pending, warnings */
  --color-danger:         #e74c3c;   /* Red — errors, rejected */
  --color-purple:         #8e44ad;   /* Purple — submitted status */
  --color-teal:           #1abc9c;   /* Teal — trial status */

  /* ── Neutrals ──────────────────────────────────────── */
  --color-white:          #ffffff;
  --color-bg:             #f0f4f8;   /* Page background */
  --color-bg-card:        #ffffff;   /* Card / panel background */
  --color-bg-alt:         #f7f8fa;   /* Alternating table rows, subtle bg */
  --color-border:         #e2e8f0;   /* All borders */
  --color-border-dark:    #cbd5e0;   /* Stronger borders */

  /* ── Text ───────────────────────────────────────────── */
  --color-text:           #1a202c;   /* Body text */
  --color-text-secondary: #4a5568;   /* Labels, meta text */
  --color-text-muted:     #718096;   /* Placeholders, hints */
  --color-text-disabled:  #a0aec0;   /* Disabled state */
  --color-text-inverse:   #ffffff;   /* On dark backgrounds */
  --color-link:           #2a5298;
  --color-link-hover:     #1b3a6b;

  /* ── Sidebar ────────────────────────────────────────── */
  --sidebar-bg:           #1b3a6b;
  --sidebar-width:        240px;
  --sidebar-text:         rgba(255,255,255,0.85);
  --sidebar-text-active:  #ffffff;
  --sidebar-item-hover:   rgba(255,255,255,0.1);
  --sidebar-item-active:  rgba(255,255,255,0.15);
  --sidebar-border:       rgba(255,255,255,0.1);

  /* ── Header ─────────────────────────────────────────── */
  --header-height:        60px;
  --header-bg:            #ffffff;
  --header-border:        #e2e8f0;
  --header-shadow:        0 1px 4px rgba(0,0,0,0.08);

  /* ── Typography ─────────────────────────────────────── */
  --font-family:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono:     'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.875rem;  /* 14px */
  --font-size-base:       1rem;      /* 16px */
  --font-size-lg:         1.125rem;  /* 18px */
  --font-size-xl:         1.25rem;   /* 20px */
  --font-size-2xl:        1.5rem;    /* 24px */
  --font-size-3xl:        1.875rem;  /* 30px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.625;

  /* ── Spacing ─────────────────────────────────────────── */
  --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 */

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

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

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Form Inputs ─────────────────────────────────────── */
  --input-height:       40px;
  --input-height-sm:    32px;
  --input-height-lg:    48px;
  --input-border:       var(--color-border-dark);
  --input-border-focus: var(--color-primary);
  --input-bg:           var(--color-white);
  --input-radius:       var(--radius-md);
  --input-shadow-focus: 0 0 0 3px rgba(27,58,107,0.12);

  /* ── Wizard ──────────────────────────────────────────── */
  --wizard-step-size:   36px;
  --wizard-step-active: var(--color-primary);
  --wizard-step-done:   var(--color-secondary);
  --wizard-step-todo:   var(--color-border-dark);

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark mode stub (future) ──────────────────────────── */
/* @media (prefers-color-scheme: dark) { :root { --color-bg: #0f172a; } } */