/**
 * QuickStaff Design System Variables
 * Generated from Figma Design System & Architecture Specification
 *
 * Typography Requirements:
 * 1. Outfit (Display / Headings / Brand / Accents)
 * 2. Inter (Body / UI Controls / Buttons / Inputs / Metadata)
 */

/* ==========================================================================
   1. LOCAL FONTS IMPORT
   ========================================================================== */
@import url('../fonts/fonts.css');

/* ==========================================================================
   2. ROOT DESIGN TOKENS
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------
     A. FONT FAMILIES
     ------------------------------------------------------------------------ */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-display);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ------------------------------------------------------------------------
     B. FONT WEIGHTS
     ------------------------------------------------------------------------ */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ------------------------------------------------------------------------
     C. FONT SIZES & LINE HEIGHTS
     ------------------------------------------------------------------------ */
  --font-size-xs: 0.75rem;          /* 12px */
  --line-height-xs: 1rem;           /* 16px */

  --font-size-sm: 0.875rem;        /* 14px */
  --line-height-sm: 1.25rem;        /* 20px */

  --font-size-base: 1rem;           /* 16px */
  --line-height-base: 1.5rem;       /* 24px */

  --font-size-lg: 1.125rem;         /* 18px */
  --line-height-lg: 1.75rem;        /* 28px */

  --font-size-xl: 1.25rem;          /* 20px */
  --line-height-xl: 1.75rem;        /* 28px */

  --font-size-2xl: 1.5rem;          /* 24px */
  --line-height-2xl: 2rem;          /* 32px */

  --font-size-3xl: 1.875rem;        /* 30px */
  --line-height-3xl: 2.25rem;       /* 36px */

  --font-size-4xl: 2.25rem;         /* 36px */
  --line-height-4xl: 2.5rem;        /* 40px */

  --font-size-5xl: 3rem;            /* 48px */
  --line-height-5xl: 1.15;

  --font-size-6xl: 3.75rem;         /* 60px */
  --line-height-6xl: 1.1;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ------------------------------------------------------------------------
     D. COLOR PALETTE
     ------------------------------------------------------------------------ */
  /* Brand Primary (Royal Blue) */
  --color-brand: #0251BA;
  --color-brand-rgb: 2, 81, 186;
  --color-brand-hover: #01439D;
  --color-brand-dark: #013D8F;
  --color-brand-active: #012E6B;
  --color-brand-light: #E8F0FD;
  --color-brand-subtle: rgba(2, 81, 186, 0.08);

  /* Accent (Vibrant Tangerine Orange) */
  --color-accent: #FD5608;
  --color-accent-rgb: 253, 86, 8;
  --color-accent-hover: #E04800;
  --color-accent-dark: #C93F00;
  --color-accent-active: #A83400;
  --color-accent-light: #FFF3EE;
  --color-accent-subtle: rgba(253, 86, 8, 0.1);

  /* Background & Surfaces */
  --color-bg-base: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #F7F9FC;
  --color-surface-3: #EDF2F7;
  --color-surface-dark: #0F172A;
  --color-slate-900: #0F1729;
  --color-slate-950: #020617;

  /* Neutral Text Colors */
  --color-text-primary: #0F1729;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-subtle: #94A3B8;
  --color-text-disabled: #CBD5E1;
  --color-text-white: #FFFFFF;
  --color-text-brand: var(--color-brand);
  --color-text-accent: var(--color-accent);

  /* Borders */
  --color-border: #E2E8F0;
  --color-border-rgb: 226, 232, 240;
  --color-border-light: #F1F5F9;
  --color-border-strong: #CBD5E1;
  --color-border-brand: var(--color-brand);
  --color-border-accent: var(--color-accent);
  --color-border-dark: rgba(255, 255, 255, 0.08);

  /* Feedback / Semantic Status Colors */
  --color-success: #10B981;
  --color-success-light: #ECFDF5;
  --color-warning: #F59E0B;
  --color-warning-light: #FFFBEB;
  --color-error: #EF4444;
  --color-error-light: #FEF2F2;
  --color-info: #0251BA;
  --color-info-light: #EFF6FF;

  /* ------------------------------------------------------------------------
     E. BORDER RADIUS
     ------------------------------------------------------------------------ */
  --radius-none: 0px;
  --radius-xs: 0.125rem;            /* 2px */
  --radius-sm: 0.25rem;             /* 4px */
  --radius-md: 0.375rem;            /* 6px */
  --radius-lg: 0.5rem;              /* 8px  - Standard Button Radius */
  --radius-xl: 0.75rem;             /* 12px - Cards & Inputs */
  --radius-2xl: 1rem;               /* 16px - Large Card Container */
  --radius-3xl: 1.5rem;             /* 24px - Modal & Hero Sections */
  --radius-full: 9999px;            /* Badges & Rounded Buttons */

  /* ------------------------------------------------------------------------
     F. BORDERS & STROKES
     ------------------------------------------------------------------------ */
  --border-width-none: 0px;
  --border-width-thin: 1px;
  --border-width-medium: 1.5px;
  --border-width-thick: 2px;
  --border-width-heavy: 3px;

  --border-style-solid: solid;
  --border-style-dashed: dashed;

  /* Predefined Composite Borders */
  --border-default: 1px solid var(--color-border);
  --border-subtle: 1px solid rgba(226, 232, 240, 0.8);
  --border-brand: 1.5px solid var(--color-brand);
  --border-brand-thick: 2px solid var(--color-brand);
  --border-accent: 1.5px solid var(--color-accent);
  --border-accent-thick: 2px solid var(--color-accent);
  --border-dark-subtle: 1px solid rgba(255, 255, 255, 0.08);

  /* ------------------------------------------------------------------------
     G. BUTTON TOKENS (--btn-*)
     ------------------------------------------------------------------------ */
  /* General Button Defaults */
  --btn-font-family: var(--font-sans);
  --btn-border-radius: var(--radius-lg);
  --btn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-cursor: pointer;

  /* Button Sizes */
  --btn-padding-sm: 0.375rem 0.75rem;    /* py-1.5 px-3 */
  --btn-font-size-sm: var(--font-size-xs);
  --btn-height-sm: 32px;

  --btn-padding-md: 0.5rem 1rem;          /* py-2 px-4 */
  --btn-font-size-md: var(--font-size-sm);
  --btn-height-md: 40px;

  --btn-padding-lg: 0.75rem 1.5rem;       /* py-3 px-6 */
  --btn-font-size-lg: var(--font-size-base);
  --btn-height-lg: 48px;

  /* Button Variant: Accent (Primary Register / Main CTA) */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-color: #FFFFFF;
  --btn-primary-border: none;
  --btn-primary-hover-bg: var(--color-accent-hover);
  --btn-primary-hover-color: #FFFFFF;
  --btn-primary-active-bg: var(--color-accent-active);
  --btn-primary-shadow: 0 4px 14px rgba(253, 86, 8, 0.28);
  --btn-primary-hover-shadow: 0 6px 20px rgba(253, 86, 8, 0.36);

  /* Button Variant: Brand (Royal Blue Solid) */
  --btn-brand-bg: var(--color-brand);
  --btn-brand-color: #FFFFFF;
  --btn-brand-border: none;
  --btn-brand-hover-bg: var(--color-brand-hover);
  --btn-brand-hover-color: #FFFFFF;
  --btn-brand-active-bg: var(--color-brand-active);
  --btn-brand-shadow: 0 4px 14px rgba(2, 81, 186, 0.24);
  --btn-brand-hover-shadow: 0 6px 20px rgba(2, 81, 186, 0.32);

  /* Button Variant: Outline Brand (Login / Secondary Action) */
  --btn-outline-brand-bg: transparent;
  --btn-outline-brand-color: var(--color-brand);
  --btn-outline-brand-border: 1.5px solid var(--color-brand);
  --btn-outline-brand-hover-bg: var(--color-brand-light);
  --btn-outline-brand-hover-color: var(--color-brand-dark);
  --btn-outline-brand-hover-border: 1.5px solid var(--color-brand-dark);

  /* Button Variant: Outline Accent */
  --btn-outline-accent-bg: transparent;
  --btn-outline-accent-color: var(--color-accent);
  --btn-outline-accent-border: 1.5px solid var(--color-accent);
  --btn-outline-accent-hover-bg: var(--color-accent-light);
  --btn-outline-accent-hover-color: var(--color-accent-dark);

  /* Button Variant: Secondary / Neutral Surface */
  --btn-secondary-bg: var(--color-surface-2);
  --btn-secondary-color: var(--color-text-primary);
  --btn-secondary-border: 1px solid var(--color-border);
  --btn-secondary-hover-bg: #FFFFFF;
  --btn-secondary-hover-color: var(--color-brand);
  --btn-secondary-hover-border: 1px solid var(--color-brand);

  /* Button Variant: Ghost */
  --btn-ghost-bg: transparent;
  --btn-ghost-color: var(--color-text-secondary);
  --btn-ghost-border: none;
  --btn-ghost-hover-bg: var(--color-brand-light);
  --btn-ghost-hover-color: var(--color-brand);

  /* ------------------------------------------------------------------------
     H. SHADOWS & ELEVATION
     ------------------------------------------------------------------------ */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-brand-glow: 0 10px 25px -5px rgba(2, 81, 186, 0.25);
  --shadow-accent-glow: 0 10px 25px -5px rgba(253, 86, 8, 0.25);

  /* ------------------------------------------------------------------------
     I. SPACING SCALE
     ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;       /* 4px */
  --space-1-5: 0.375rem;    /* 6px */
  --space-2: 0.5rem;        /* 8px */
  --space-2-5: 0.625rem;    /* 10px */
  --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-14: 3.5rem;       /* 56px */
  --space-16: 4rem;         /* 64px */
  --space-20: 5rem;         /* 80px */
  --space-24: 6rem;         /* 96px */
  --space-28: 7rem;         /* 112px */

  /* ------------------------------------------------------------------------
     J. CONTAINER BREAKPOINTS
     ------------------------------------------------------------------------ */
  --container-xs: 20rem;    /* 320px */
  --container-sm: 24rem;    /* 384px */
  --container-md: 28rem;    /* 448px */
  --container-lg: 32rem;    /* 512px */
  --container-xl: 36rem;    /* 576px */
  --container-2xl: 42rem;   /* 672px */
  --container-4xl: 56rem;   /* 896px */
  --container-7xl: 80rem;   /* 1280px */

  /* ------------------------------------------------------------------------
     K. TRANSITIONS & TIMING
     ------------------------------------------------------------------------ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;

  --transition-fast: all var(--duration-150) var(--ease-default);
  --transition-base: all var(--duration-200) var(--ease-default);
  --transition-smooth: all var(--duration-300) var(--ease-out);

  /* ------------------------------------------------------------------------
     L. Z-INDEX SYSTEM
     ------------------------------------------------------------------------ */
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-sticky: 50;
  --z-dropdown: 60;
  --z-overlay: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-max: 100;
}

/* ==========================================================================
   3. READY-TO-USE COMPONENT UTILITY CLASSES
   ========================================================================== */

/* Typography Helpers */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  transition: var(--btn-transition);
  cursor: var(--btn-cursor);
  text-decoration: none;
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Button Sizes */
.btn-sm {
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-size-sm);
  height: var(--btn-height-sm);
}

.btn-md {
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-size-md);
  height: var(--btn-height-md);
}

.btn-lg {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-size-lg);
  height: var(--btn-height-lg);
}

/* Button Variants */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-color);
  box-shadow: var(--btn-primary-hover-shadow);
  transform: translateY(-1px);
}
.btn-primary:active {
  background-color: var(--btn-primary-active-bg);
  transform: translateY(0);
}

.btn-brand {
  background-color: var(--btn-brand-bg);
  color: var(--btn-brand-color);
  box-shadow: var(--btn-brand-shadow);
}
.btn-brand:hover {
  background-color: var(--btn-brand-hover-bg);
  color: var(--btn-brand-hover-color);
  box-shadow: var(--btn-brand-hover-shadow);
  transform: translateY(-1px);
}
.btn-brand:active {
  background-color: var(--btn-brand-active-bg);
  transform: translateY(0);
}

.btn-outline-brand {
  background-color: var(--btn-outline-brand-bg);
  color: var(--btn-outline-brand-color);
  border: var(--btn-outline-brand-border);
}
.btn-outline-brand:hover {
  background-color: var(--btn-outline-brand-hover-bg);
  color: var(--btn-outline-brand-hover-color);
  border: var(--btn-outline-brand-hover-border);
}

.btn-outline-accent {
  background-color: var(--btn-outline-accent-bg);
  color: var(--btn-outline-accent-color);
  border: var(--btn-outline-accent-border);
}
.btn-outline-accent:hover {
  background-color: var(--btn-outline-accent-hover-bg);
  color: var(--btn-outline-accent-hover-color);
}

.btn-ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
}
.btn-ghost:hover {
  background-color: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-color);
}

/* Badge Utilities */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.badge-brand {
  background-color: var(--color-brand-light);
  color: var(--color-brand);
}

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

/* Card Surface Utilities */
.card {
  background-color: var(--color-surface-1);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(2, 81, 186, 0.2);
}