/* ============================================
   NOVA SPOT — Design System
   Complete token system for premium UI
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* --- Brand Colors --- */
  --color-navy-deep:    #0A1628;
  --color-navy:         #1B2D4F;
  --color-navy-light:   #243B6A;
  --color-navy-muted:   #2E4A7A;

  --color-orange:       #F26522;
  --color-orange-hover: #E05A1A;
  --color-orange-light: #FF8A50;
  --color-orange-soft:  #FFF3EC;

  /* --- Neutrals --- */
  --color-white:        #FFFFFF;
  --color-gray-50:      #F8FAFC;
  --color-gray-100:     #F1F5F9;
  --color-gray-200:     #E2E8F0;
  --color-gray-300:     #CBD5E1;
  --color-gray-400:     #94A3B8;
  --color-gray-500:     #64748B;
  --color-gray-600:     #475569;
  --color-gray-700:     #334155;
  --color-gray-800:     #1E293B;
  --color-gray-900:     #0F172A;

  /* --- Semantic Colors --- */
  --color-success:      #10B981;
  --color-success-soft: #ECFDF5;
  --color-warning:      #F59E0B;
  --color-warning-soft: #FFFBEB;
  --color-error:        #EF4444;
  --color-error-soft:   #FEF2F2;
  --color-info:         #3B82F6;
  --color-info-soft:    #EFF6FF;

  /* --- Typography --- */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Space Grotesk', 'Inter', sans-serif;

  /* Font Sizes — 5-level hierarchy */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* Line Heights */
  --leading-none:   1;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  2;

  /* Font Weights */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

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

  /* --- Spacing (8px system) --- */
  --space-0:   0;
  --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 */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Border Radius --- */
  --radius-sm:    0.5rem;   /* 8px */
  --radius-md:    0.75rem;  /* 12px */
  --radius-lg:    1rem;     /* 16px */
  --radius-xl:    1.25rem;  /* 20px */
  --radius-2xl:   1.5rem;   /* 24px */
  --radius-full:  9999px;

  /* --- Shadows (5-level elevation) --- */
  --shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --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);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-orange: 0 4px 14px 0 rgba(242, 101, 34, 0.3);
  --shadow-navy:  0 4px 14px 0 rgba(27, 45, 79, 0.3);

  /* --- Transitions --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 800ms;

  --transition-fast:    all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base:    all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:    all 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --container-max:  1280px;
  --canvas-width:   1440px;
  --container-padding: var(--space-6);

  /* --- Z-Index Scale --- */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-fixed:    30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-toast:    60;
  --z-tooltip:  70;
}

/* ============================================
   Modern CSS Reset
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

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

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-navy-deep);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Focus visible styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection color */
::selection {
  background-color: var(--color-orange);
  color: var(--color-white);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* ============================================
   Typography Utilities
   ============================================ */
.text-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--text-7xl));
  font-weight: var(--font-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
}

.text-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--text-6xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, var(--text-4xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.text-h4 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, var(--text-2xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.text-body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.text-body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

.text-overline {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-orange);
}

/* ============================================
   Color Utilities
   ============================================ */
.text-navy     { color: var(--color-navy-deep); }
.text-orange   { color: var(--color-orange); }
.text-white    { color: var(--color-white); }
.text-gray     { color: var(--color-gray-500); }
.text-dark     { color: var(--color-gray-800); }

.bg-navy       { background-color: var(--color-navy-deep); }
.bg-orange     { background-color: var(--color-orange); }
.bg-white      { background-color: var(--color-white); }
.bg-gray       { background-color: var(--color-gray-50); }
.bg-gray-100   { background-color: var(--color-gray-100); }