/* Global design tokens */
:root {
  --site-font: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Surfaces */
  --site-surface: #ffffff;
  --site-surface-2: #f8fafc;
  --site-text: #0f172a;
  --site-text-secondary: #334155;
  --site-muted: #64748b;
  --site-border: #e2e8f0;
  --site-bg-page: #ffffff;

  /* Brand */
  --site-primary: #1e3c72;
  --site-primary-2: #2a5298;
  --site-accent: #dc2626;
  --site-link: #2563eb;
  --site-link-hover: #1d4ed8;
  --site-focus: rgba(37, 99, 235, 0.2);
  --site-text-inverse: #ffffff;

  /* Generic aliases for strict migration phases */
  --surface: var(--site-surface);
  --surface-dark: #0f172a;
  --surface-alt: var(--site-surface-2);
  --surface-muted: #f1f5f9;
  --text-primary: var(--site-text);
  --text-primary-dark: var(--site-text);
  --text-secondary: var(--site-muted);
  --text-on-dark: #e2e8f0;
  --text-muted: var(--site-muted);
  --text-inverse: var(--site-text-inverse);
  --border: var(--site-border);
  --border-strong: #cbd5e1;
  --border-muted: #e2e8f0;

  /* Semantic state colors */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* Semantic gradients */
  --gradient-primary: linear-gradient(135deg, var(--site-primary), var(--site-link));
  --gradient-accent: linear-gradient(135deg, var(--site-link), var(--site-primary-2));

  /* Unified UI palette — nav, tools, breaking, finder, categories */
  --brand-navy: #1e3c72;
  --brand-navy-dark: #1a3470;
  --brand-blue: #2563eb;
  --brand-blue-dark: #1d4ed8;

  /* Toolbar controls — search, tools, hamburger */
  --ui-control-bg: #ffffff;
  --ui-control-border: #cbd5e1;
  --ui-control-text: #1e3c72;
  --ui-control-icon: #2563eb;
  --ui-control-bg-hover: #f0f4fa;
  --ui-control-border-hover: #94a3b8;

  /* Soft highlight — view-all, finder icon, category hover */
  --ui-soft-bg: #f0f4fa;
  --ui-soft-bg-hover: #e4ebf5;
  --ui-soft-border: #c5d4eb;
  --ui-soft-text: #1e3c72;

  /* Solid accent — nav active, breaking label */
  --ui-accent-bg: #1e3c72;
  --ui-accent-bg-hover: #1a3470;
  --ui-accent-border: #1a3470;
  --ui-accent-text: #ffffff;

  /* Primary CTA — finder Find Jobs */
  --ui-cta-border: #1d4ed8;
  --ui-cta-bg: #2563eb;
  --ui-cta-bg-hover: #1d4ed8;
  --ui-cta-text: #ffffff;

  /* Legacy chip aliases */
  --ui-chip-border: var(--ui-soft-border);
  --ui-chip-bg: var(--ui-soft-bg);
  --ui-chip-bg-hover: var(--ui-soft-bg-hover);
  --ui-chip-text: var(--ui-soft-text);
  --ui-chip-border-hover: var(--ui-control-border-hover);

  /* Desktop nav */
  --nav-text: #475569;
  --nav-text-hover: #1e3c72;
  --nav-hover-bg: #f8fafc;
  --nav-active-bg: var(--ui-accent-bg);
  --nav-active-border: var(--ui-accent-border);
  --nav-active-text: var(--ui-accent-text);

  /* Mobile header controls */
  --mobile-tools-border: var(--ui-control-border);
  --mobile-tools-bg: var(--ui-control-bg);
  --mobile-tools-bg-hover: var(--ui-control-bg-hover);
  --mobile-tools-text: var(--ui-control-text);
  --mobile-tools-border-hover: var(--ui-control-border-hover);
  --mobile-tools-shadow: none;

  /* Homepage CTA */
  --home-cta-border: var(--ui-cta-border);
  --home-cta-bg: var(--ui-cta-bg);
  --home-cta-bg-hover: var(--ui-cta-bg-hover);
  --home-cta-text: var(--ui-cta-text);
  --home-cta-shadow: none;

  /* Brand social icon fills — solid */
  --social-icon-border: #4a7ab8;
  --social-telegram-bg: #2aabee;
  --social-whatsapp-bg: #25d366;
  --social-facebook-bg: #1877f2;

  /* Spacing scale (standardized) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  /* Layout column tiers (viewport-only; no device detection) */
  --layout-mobile-width: 100%;
  --layout-mobile-max: 100%;
  --layout-tablet-width: 96%;
  --layout-tablet-max: 100%;
  --layout-desktop-width: 80%;
  --layout-desktop-max: 1200px;

  /* Legacy aliases kept for compatibility */
  --space-10: var(--space-8);
  --space-14: var(--space-12);
  --space-20: var(--space-24);

  /* Radius */
  --site-radius-xs: 4px;
  --site-radius-sm: 8px;
  --site-radius: 12px;
  --site-radius-lg: 16px;
  --site-radius-pill: 999px;

  /* Shadows — flat surfaces (no glass depth) */
  --site-shadow-sm: none;
  --site-shadow: none;
  --site-shadow-md: none;
  --site-shadow-hover: none;

  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-h2: clamp(1.25rem, 2.5vw, 1.75rem);
  --font-size-card-title: clamp(1rem, 2vw, 1.125rem);
  --line-height-body: 1.55;
  --line-height-tight: 1.25;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.18s;
  --duration-base: 0.25s;

  /* Hover (public UI — header nav uses its own rules) */
  --hover-bg-subtle: #f0f4fa;
  --hover-bg-muted: #f8fafc;
  --hover-border: #c5d4eb;
  --hover-border-strong: #94a3b8;
  --hover-text: #2563eb;
  --hover-text-strong: #1e3c72;
  --hover-shadow: none;
  --hover-transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out);

  /* Layering */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-admin-overlay: 5000;

  --site-max: 1200px;
  --site-content-pad: var(--space-16);

  /*
   * Section header — surface / on-surface pairs (theme-aware).
   * Always change bg + text + border together per theme block.
   */
  --section-header-bg: var(--site-surface-2);
  --section-header-text: var(--site-text);
  --section-header-border: var(--site-border);

  /* Card body (optional pair for section content areas) */
  --section-body-bg: var(--site-surface);
  --section-body-text: var(--site-text-secondary);
}

/* Explicit light theme (default public site) */
[data-theme="light"] {
  --site-surface: #ffffff;
  --site-surface-2: #f8fafc;
  --site-text: #0f172a;
  --site-text-secondary: #334155;
  --site-muted: #64748b;
  --site-border: #e2e8f0;
  --site-bg-page: #ffffff;

  --section-header-bg: var(--site-surface-2);
  --section-header-text: var(--site-text);
  --section-header-border: var(--site-border);

  --section-body-bg: var(--site-surface);
  --section-body-text: var(--site-text-secondary);
}

/* Dark theme — public pages via html[data-theme="dark"] */
[data-theme="dark"] {
  --site-surface: #0f172a;
  --site-surface-2: #1e293b;
  --site-text: #f1f5f9;
  --site-text-secondary: #cbd5e1;
  --site-muted: #94a3b8;
  --site-border: rgba(148, 163, 184, 0.28);
  --site-bg-page: #020617;

  --section-header-bg: var(--site-surface-2);
  --section-header-text: var(--site-text);
  --section-header-border: var(--site-border);

  --section-body-bg: var(--site-surface);
  --section-body-text: var(--site-text-secondary);
}

body.dark {
  --surface: #111a2d;
  --surface-dark: #020617;
  --surface-alt: #0f172a;
  --surface-muted: #1e293b;
  --text-primary: #e2e8f0;
  --text-primary-dark: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-on-dark: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --border-strong: #475569;
  --border-muted: #334155;

  /* Admin dark — same semantic section pairs as [data-theme="dark"] */
  --section-header-bg: #1e293b;
  --section-header-text: #f1f5f9;
  --section-header-border: #334155;
  --section-body-bg: #0f172a;
  --section-body-text: #cbd5e1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

/* Global page shell — white background, no horizontal scroll */
body {
  margin: 0;
  background: var(--site-bg-page);
  overflow-x: hidden;
  font-family: var(--site-font);
}

/* Centered content column — 3 tiers: mobile / tablet-wide / desktop column */
.main-container,
.page-container {
  width: var(--layout-desktop-width);
  max-width: var(--layout-desktop-max);
  margin: 0 auto;
  padding: 0 var(--space-12);
  box-sizing: border-box;
}

/* Tier B: tablet / ~980px Desktop Site viewport */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-container,
  .page-container {
    width: var(--layout-tablet-width);
    max-width: var(--layout-tablet-max);
    padding: 0 var(--space-12);
  }
}

/* Tier A: mobile */
@media (max-width: 768px) {
  .main-container,
  .page-container {
    width: var(--layout-mobile-width);
    max-width: var(--layout-mobile-max);
    padding: 0;
  }
}