@layer reset, tokens, base, components, pages, utilities;

/* ==========================================
   BENEFIQ 2.0 — PRODUCTION STYLES
   Mobile-first · Premium · Launch-ready
   ========================================== */

/* ==========================================
   RESET LAYER
   ========================================== */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }
}

/* ==========================================
   DESIGN TOKENS
   ========================================== */
@layer tokens {
  :root {
    /* Digital Blue Palette (raw palette — retained for reference) */
    --blue-50: #e5f0ff;
    --blue-100: #cce0ff;
    --blue-200: #99c2ff;
    --blue-300: #66a3ff;
    --blue-400: #3385ff;
    --blue-500: #0066ff;
    --blue-600: #0052cc;
    --blue-700: #003d99;
    --blue-800: #002966;
    --blue-900: #001433;
    --blue-950: #000e24;

    /* ==========================================
       BRAND ACCENT — Coral-Red (#FF4E33)
       ========================================== */
    --brand-50: #FFF1EE;
    --brand-100: #FFE0DA;
    --brand-200: #FFC2B5;
    --brand-300: #FF9C88;
    --brand-400: #FF7559;
    --brand-500: #FF4E33;
    --brand-600: #E5442D;
    --brand-700: #BF3825;
    --brand-800: #992D1E;
    --brand-900: #7A2418;

    /* ==========================================
       PURPLE/VIOLET ACCENT
       ========================================== */
    --purple-50: #FAF5FF;
    --purple-100: #F3E8FF;
    --purple-200: #E9D5FF;
    --purple-300: #D8B4FE;
    --purple-400: #C084FC;
    --purple-500: #A855F7;
    --purple-600: #9333EA;
    --purple-700: #7E22CE;

    /* ==========================================
       GREEN / EMERALD ACCENT
       ========================================== */
    --green-50: #ECFDF5;
    --green-100: #D1FAE5;
    --green-200: #A7F3D0;
    --green-500: #10B981;
    --green-600: #059669;
    --green-700: #047857;

    /* ==========================================
       BLUE ACCENT (distinct from surface blue-grays)
       ========================================== */
    --accent-blue-50: #EFF6FF;
    --accent-blue-100: #DBEAFE;
    --accent-blue-200: #BFDBFE;
    --accent-blue-400: #60A5FA;
    --accent-blue-500: #3B82F6;
    --accent-blue-600: #2563EB;

    /* ==========================================
       SIDEBAR — blends with warm bg
       ========================================== */
    --sidebar-bg: var(--surface-100);
    --sidebar-bg-hover: var(--surface-200);
    --sidebar-bg-active: rgba(235, 68, 37, 0.08);
    --sidebar-text: var(--surface-400);
    --sidebar-text-active: var(--surface-900);
    --sidebar-border: var(--surface-200);

    /* ==========================================
       AUTH DARK BACKGROUND
       ========================================== */
    --auth-bg: #0F1923;
    --auth-surface: #1A2636;
    --auth-text: #E2E8F0;
    --auth-text-muted: #64748B;

    /* ==========================================
       DASHBOARD BACKGROUND
       ========================================== */
    --dashboard-bg: #EDEBE8;

    /* ==========================================
       WARM STONE SURFACES
       Warm neutrals — editorial, magazine-like
       ========================================== */
    --surface-50: #FAF9F7;
    --surface-100: #F3F1EE;
    --surface-200: #E8E5E1;
    --surface-300: #D2D0CC;
    --surface-400: #A3A09B;
    --surface-500: #737069;
    --surface-600: #545249;
    --surface-700: #3D3B36;
    --surface-800: #262522;
    --surface-900: #171614;

    /* ==========================================
       SEMANTIC ALIASES — Components use these
       ========================================== */
    --color-accent: var(--brand-500);
    --color-accent-hover: var(--brand-600);
    --color-accent-light: var(--brand-100);
    --color-accent-subtle: var(--brand-50);
    --color-bg: var(--dashboard-bg);
    --color-bg-elevated: #FFFFFF;
    --color-bg-sunken: var(--surface-100);
    --color-text: var(--surface-900);
    --color-text-secondary: var(--surface-600);
    --color-text-muted: var(--surface-500);

    /* ==========================================
       STATUS COLORS — Complementing coral
       ========================================== */
    --color-success: #10B981;
    --color-success-light: rgba(16, 185, 129, 0.1);
    --color-warning: #F59E0B;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-danger: #EF4444;
    --color-danger-light: rgba(239, 68, 68, 0.1);

    /* ==========================================
       SHAPE TOKENS — Mixed tension
       Sharp containers + rounded interactives
       ========================================== */
    --radius-card: 20px;
    --radius-sm: 8px;
    --radius-input: 12px;
    --radius-md: 12px;
    --radius-widget: 20px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* ==========================================
       SHADOW TOKENS — Multi-layer warm shadows
       ========================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --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.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --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.10), 0 8px 10px rgba(0, 0, 0, 0.04);
    --shadow-card:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 16px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --shadow-card-hover:
      0 2px 4px rgba(0, 0, 0, 0.05),
      0 8px 24px rgba(0, 0, 0, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --shadow-float: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* ==========================================
       GRADIENT TOKENS — Coral-to-orange brand gradient
       ========================================== */
    --gradient-brand: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
    --gradient-brand-hover: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);

    /* ==========================================
       FONT TOKENS — Urbanist primary
       ========================================== */
    --font-display: 'Space Grotesk', 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Legacy aliases — redirect to new brand tokens */
    --font-sans: var(--font-body);
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* ==========================================
       OLD TOKEN REDIRECTS — Blue-to-coral migration
       Existing CSS using var(--primary) automatically
       gets coral. No need to edit every file.
       ========================================== */
    --primary: var(--color-accent);
    --primary-hover: var(--color-accent-hover);
    --primary-light: var(--color-accent-light);
    --primary-medium: var(--brand-200);

    /* Semantic Colors — redirect to new names */
    --success: var(--color-success);
    --success-light: var(--color-success-light);
    --warning: var(--color-warning);
    --warning-light: var(--color-warning-light);
    --danger: var(--color-danger);
    --danger-light: var(--color-danger-light);

    /* Neutrals — redirect to surface/brand system */
    --bg: var(--color-bg);
    --bg-elevated: var(--color-bg-elevated);
    --bg-sunken: var(--color-bg-sunken);
    --text: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-inverse: #ffffff;

    /* Borders */
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.15);
    --border-focus: var(--color-accent);

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Font Sizes */
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;

    /* Layout */
    --nav-height: 72px;
    --sidebar-width: 56px;
    --max-width: 1200px;
    --content-width: 640px;
  }
}

/* ==========================================
   BASE STYLES
   ========================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--text);
    background:
      radial-gradient(ellipse at 15% 10%, rgba(235, 68, 37, 0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 85% 60%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 90%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
      var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Noise grain overlay — subtle paper texture */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-sticky);
    filter: url(#grain);
    opacity: 0.03;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
  }

  input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
  }

  img, svg {
    display: block;
    max-width: 100%;
  }

  ul, ol {
    list-style: none;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--surface-900);
    letter-spacing: -0.01em;
  }

  h1 { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: -0.02em; }
  h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
  }

  .label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  /* iOS auto-zoom prevention: inputs below 16px trigger zoom on focus */
  @media screen and (max-width: 1024px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
      font-size: max(16px, 1em);
    }
  }

  /* Prevent native pull-to-refresh on touch devices (custom pull-to-refresh in JS) */
  @media (pointer: coarse) {
    html, body {
      overscroll-behavior-y: contain;
    }
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }

  .text-primary { color: var(--primary); }
  .text-success { color: var(--success); }
  .text-warning { color: var(--warning); }
  .text-danger { color: var(--danger); }
  .text-muted { color: var(--text-muted); }
  .text-secondary { color: var(--text-secondary); }

  .font-medium { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold { font-weight: var(--weight-bold); }

  /* Responsive Helpers */
  @media (max-width: 640px) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 641px) {
    .hide-desktop { display: none !important; }
  }
}