/* ============================================================
   UltraTool360 — Design System
   Core CSS Custom Properties & Design Tokens
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: color 0.3s ease, background-color 0.3s ease;
  overflow-x: hidden;
}

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

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

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

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

ul,
ol {
  list-style: none;
}

/* ============================================================
   COLOR SYSTEM
   Brand Palette:
     Primary:    #09637E  (Deep Teal)
     Accent:     #F54927  (Vibrant Orange-Red)
     Secondary:  #7AB2B2  (Soft Teal)
     Surface:    #EBF4F6  (Ice Blue)
   ============================================================ */

:root {
  /* ---- Brand Colors (HSL for flexibility) ---- */
  --brand-primary-h: 194;
  --brand-primary-s: 89%;
  --brand-primary-l: 27%;

  --brand-accent-h: 9;
  --brand-accent-s: 91%;
  --brand-accent-l: 56%;

  --brand-secondary-h: 180;
  --brand-secondary-s: 31%;
  --brand-secondary-l: 59%;

  --brand-surface-h: 195;
  --brand-surface-s: 43%;
  --brand-surface-l: 95%;

  /* ---- Primary Shades ---- */
  --primary-50:  hsl(194, 89%, 95%);
  --primary-100: hsl(194, 85%, 88%);
  --primary-200: hsl(194, 80%, 75%);
  --primary-300: hsl(194, 75%, 60%);
  --primary-400: hsl(194, 85%, 40%);
  --primary-500: hsl(194, 89%, 27%);  /* #09637E */
  --primary-600: hsl(194, 90%, 22%);
  --primary-700: hsl(194, 92%, 18%);
  --primary-800: hsl(194, 94%, 14%);
  --primary-900: hsl(194, 96%, 10%);

  /* ---- Accent Shades ---- */
  --accent-50:  hsl(9, 91%, 96%);
  --accent-100: hsl(9, 91%, 88%);
  --accent-200: hsl(9, 91%, 78%);
  --accent-300: hsl(9, 91%, 68%);
  --accent-400: hsl(9, 91%, 60%);
  --accent-500: hsl(9, 91%, 56%);    /* #F54927 */
  --accent-600: hsl(9, 85%, 48%);
  --accent-700: hsl(9, 80%, 40%);
  --accent-800: hsl(9, 75%, 32%);
  --accent-900: hsl(9, 70%, 24%);

  /* ---- Secondary Shades ---- */
  --secondary-50:  hsl(180, 31%, 95%);
  --secondary-100: hsl(180, 31%, 88%);
  --secondary-200: hsl(180, 31%, 78%);
  --secondary-300: hsl(180, 31%, 68%);
  --secondary-400: hsl(180, 31%, 63%);
  --secondary-500: hsl(180, 31%, 59%);  /* #7AB2B2 */
  --secondary-600: hsl(180, 28%, 50%);
  --secondary-700: hsl(180, 30%, 40%);
  --secondary-800: hsl(180, 32%, 30%);
  --secondary-900: hsl(180, 34%, 20%);

  /* ---- Neutral Shades ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafb;
  --neutral-100: #f1f5f7;
  --neutral-200: #e2e8ec;
  --neutral-300: #c9d3da;
  --neutral-400: #9ba8b3;
  --neutral-500: #6b7a86;
  --neutral-600: #4a5866;
  --neutral-700: #354250;
  --neutral-800: #1e2a36;
  --neutral-900: #0f1923;
  --neutral-950: #080e14;

  /* ---- Typography ---- */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (clamp for fluid typography) */
  --text-xs:   clamp(0.694rem, 0.66rem + 0.17vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --text-lg:   clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-xl:   clamp(1.125rem, 1.04rem + 0.42vw, 1.25rem);
  --text-2xl:  clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-3xl:  clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
  --text-4xl:  clamp(1.875rem, 1.5rem + 1.88vw, 2.25rem);
  --text-5xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --text-6xl:  clamp(2.75rem, 2rem + 3.75vw, 3.75rem);
  --text-7xl:  clamp(3.25rem, 2.25rem + 5vw, 4.5rem);

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

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

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

  /* ---- Spacing Scale (4px base) ---- */
  --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-xs:   0.25rem;   /* 4px */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.25rem;   /* 20px */
  --radius-3xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-Index Scale ---- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-popover:   600;
  --z-toast:     700;
  --z-tooltip:   800;

  /* ---- Container ---- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;
  --container-padding: var(--space-5);

  /* ---- Glassmorphism ---- */
  --glass-blur:       20px;
  --glass-blur-heavy: 40px;

  /* ---- Gradient Definitions ---- */
  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 50%, var(--secondary-500) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--accent-500) 0%, var(--accent-400) 100%);
  --gradient-aurora:  linear-gradient(135deg, 
    hsl(194, 89%, 27%) 0%, 
    hsl(180, 40%, 45%) 25%, 
    hsl(195, 60%, 50%) 50%, 
    hsl(180, 31%, 59%) 75%, 
    hsl(194, 89%, 27%) 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, var(--primary-300) 0px, transparent 50%),
    radial-gradient(at 80% 0%, var(--secondary-300) 0px, transparent 50%),
    radial-gradient(at 0% 50%, var(--primary-200) 0px, transparent 50%),
    radial-gradient(at 80% 50%, var(--accent-200) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--secondary-200) 0px, transparent 50%);
}


/* ============================================================
   LIGHT THEME (Default)
   ============================================================ */

:root,
[data-theme="light"] {
  /* Semantic Colors */
  --color-bg:            var(--neutral-0);
  --color-bg-alt:        var(--neutral-50);
  --color-bg-elevated:   var(--neutral-0);
  --color-surface:       #EBF4F6;
  --color-surface-hover: hsl(195, 43%, 91%);

  --color-text:          var(--neutral-900);
  --color-text-secondary:var(--neutral-600);
  --color-text-tertiary: var(--neutral-400);
  --color-text-inverse:  var(--neutral-0);

  --color-primary:       var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-light: var(--primary-50);
  --color-primary-text:  var(--neutral-0);

  --color-accent:        var(--accent-500);
  --color-accent-hover:  var(--accent-600);
  --color-accent-light:  var(--accent-50);

  --color-secondary:     var(--secondary-500);
  --color-secondary-hover: var(--secondary-600);
  --color-secondary-light: var(--secondary-50);

  --color-border:        var(--neutral-200);
  --color-border-light:  var(--neutral-100);
  --color-border-focus:  var(--primary-400);

  --color-success:       hsl(152, 60%, 40%);
  --color-warning:       hsl(38, 95%, 50%);
  --color-error:         hsl(0, 72%, 51%);
  --color-info:          hsl(210, 80%, 52%);

  /* Shadows */
  --shadow-xs:    0 1px 2px hsla(194, 50%, 20%, 0.05);
  --shadow-sm:    0 1px 3px hsla(194, 50%, 20%, 0.08), 0 1px 2px hsla(194, 50%, 20%, 0.06);
  --shadow-md:    0 4px 6px hsla(194, 50%, 20%, 0.07), 0 2px 4px hsla(194, 50%, 20%, 0.05);
  --shadow-lg:    0 10px 15px hsla(194, 50%, 20%, 0.08), 0 4px 6px hsla(194, 50%, 20%, 0.04);
  --shadow-xl:    0 20px 25px hsla(194, 50%, 20%, 0.1), 0 8px 10px hsla(194, 50%, 20%, 0.04);
  --shadow-2xl:   0 25px 50px hsla(194, 50%, 20%, 0.15);
  --shadow-glow:  0 0 20px hsla(194, 89%, 27%, 0.15);
  --shadow-accent-glow: 0 0 20px hsla(9, 91%, 56%, 0.2);

  /* Glass */
  --glass-bg:          hsla(195, 43%, 95%, 0.7);
  --glass-bg-heavy:    hsla(195, 43%, 95%, 0.85);
  --glass-border:      hsla(195, 43%, 80%, 0.3);
  --glass-shadow:      0 8px 32px hsla(194, 50%, 20%, 0.08);

  /* Navbar */
  --navbar-bg:         hsla(0, 0%, 100%, 0.8);
  --navbar-border:     hsla(194, 40%, 80%, 0.3);
  --navbar-shadow:     0 1px 3px hsla(194, 50%, 20%, 0.06);

  /* Cards */
  --card-bg:           var(--neutral-0);
  --card-bg-hover:     var(--neutral-50);
  --card-border:       var(--neutral-200);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Upload Area */
  --upload-bg:         var(--color-surface);
  --upload-border:     var(--primary-300);
  --upload-border-active: var(--primary-500);

  /* Gradient overlays */
  --hero-gradient: linear-gradient(180deg, 
    hsla(195, 43%, 95%, 0) 0%, 
    hsla(195, 43%, 95%, 0.6) 40%, 
    var(--neutral-0) 100%);
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"] {
  --color-bg:            var(--neutral-950);
  --color-bg-alt:        var(--neutral-900);
  --color-bg-elevated:   var(--neutral-800);
  --color-surface:       var(--neutral-900);
  --color-surface-hover: var(--neutral-800);

  --color-text:          var(--neutral-100);
  --color-text-secondary:var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);
  --color-text-inverse:  var(--neutral-900);

  --color-primary:       var(--primary-300);
  --color-primary-hover: var(--primary-200);
  --color-primary-light: hsla(194, 89%, 27%, 0.15);
  --color-primary-text:  var(--neutral-900);

  --color-accent:        var(--accent-400);
  --color-accent-hover:  var(--accent-300);
  --color-accent-light:  hsla(9, 91%, 56%, 0.12);

  --color-secondary:     var(--secondary-400);
  --color-secondary-hover: var(--secondary-300);
  --color-secondary-light: hsla(180, 31%, 59%, 0.12);

  --color-border:        var(--neutral-700);
  --color-border-light:  var(--neutral-800);
  --color-border-focus:  var(--primary-300);

  --color-success:       hsl(152, 55%, 52%);
  --color-warning:       hsl(38, 92%, 55%);
  --color-error:         hsl(0, 72%, 62%);
  --color-info:          hsl(210, 80%, 62%);

  /* Shadows */
  --shadow-xs:    0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-sm:    0 1px 3px hsla(0, 0%, 0%, 0.3), 0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-md:    0 4px 6px hsla(0, 0%, 0%, 0.3), 0 2px 4px hsla(0, 0%, 0%, 0.2);
  --shadow-lg:    0 10px 15px hsla(0, 0%, 0%, 0.3), 0 4px 6px hsla(0, 0%, 0%, 0.15);
  --shadow-xl:    0 20px 25px hsla(0, 0%, 0%, 0.35), 0 8px 10px hsla(0, 0%, 0%, 0.15);
  --shadow-2xl:   0 25px 50px hsla(0, 0%, 0%, 0.45);
  --shadow-glow:  0 0 25px hsla(194, 89%, 50%, 0.2);
  --shadow-accent-glow: 0 0 25px hsla(9, 91%, 56%, 0.25);

  /* Glass */
  --glass-bg:          hsla(194, 30%, 10%, 0.6);
  --glass-bg-heavy:    hsla(194, 30%, 10%, 0.8);
  --glass-border:      hsla(194, 30%, 40%, 0.15);
  --glass-shadow:      0 8px 32px hsla(0, 0%, 0%, 0.3);

  /* Navbar */
  --navbar-bg:         hsla(194, 30%, 8%, 0.75);
  --navbar-border:     hsla(194, 30%, 30%, 0.15);
  --navbar-shadow:     0 1px 3px hsla(0, 0%, 0%, 0.3);

  /* Cards */
  --card-bg:           var(--neutral-900);
  --card-bg-hover:     var(--neutral-800);
  --card-border:       var(--neutral-700);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Upload Area */
  --upload-bg:         hsla(194, 30%, 10%, 0.4);
  --upload-border:     var(--primary-700);
  --upload-border-active: var(--primary-400);

  /* Gradient overlays */
  --hero-gradient: linear-gradient(180deg, 
    hsla(194, 30%, 5%, 0) 0%, 
    hsla(194, 30%, 5%, 0.6) 40%, 
    var(--neutral-950) 100%);

  /* Dark aurora gradient */
  --gradient-aurora: linear-gradient(135deg, 
    hsl(194, 80%, 15%) 0%, 
    hsl(180, 40%, 20%) 25%, 
    hsl(195, 60%, 25%) 50%, 
    hsl(180, 31%, 30%) 75%, 
    hsl(194, 80%, 15%) 100%);

  --gradient-mesh: radial-gradient(at 40% 20%, hsla(194, 89%, 27%, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(180, 31%, 40%, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(194, 80%, 20%, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(9, 91%, 40%, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(180, 31%, 30%, 0.15) 0px, transparent 50%);
}


/* ============================================================
   TYPOGRAPHY DEFAULTS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

small {
  font-size: var(--text-sm);
}

strong {
  font-weight: var(--weight-semibold);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}


/* ============================================================
   FOCUS & ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-tooltip) + 1);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
  background: hsla(194, 89%, 27%, 0.2);
  color: var(--color-text);
}

[data-theme="dark"] ::selection {
  background: hsla(194, 89%, 50%, 0.25);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--neutral-700);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-600);
}