/* ==========================================================================
   DREMORA IT — DESIGN SYSTEM
   Premium Technology Studio · Pune, India
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --bg-primary:    #090909;
  --bg-secondary:  #111111;
  --bg-card:       #171717;
  --bg-card-hover: #1e1e1e;

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-muted:     #6B6B6B;
  --text-disabled:  #404040;

  /* Accent — Dremora Blue */
  --accent:         #3059EA;
  --accent-dim:     #2245C4;
  --accent-bright:  #5B82F5;
  --accent-subtle:  rgba(48, 89, 234, 0.12);
  --accent-glow:    rgba(48, 89, 234, 0.28);

  /* Status */
  --success:        #16A34A;
  --success-subtle: rgba(22, 163, 74, 0.12);
  --warning:        #D97706;
  --warning-subtle: rgba(217, 119, 6, 0.12);
  --danger:         #DC2626;

  /* Borders */
  --border:         rgba(255, 255, 255, 0.07);
  --border-hover:   rgba(255, 255, 255, 0.14);
  --border-accent:  rgba(48, 89, 234, 0.35);

  /* Liquid Glass — used sparingly: nav-on-scroll, drawer, hero showcase card, CTA panel, showcase mockup */
  --glass-bg:            rgba(15, 18, 26, 0.66);
  --glass-bg-elevated:   rgba(18, 22, 32, 0.76);
  --glass-border:        rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.16);
  --glass-blur:          blur(20px) saturate(1.4);
  --glass-blur-sm:       blur(12px) saturate(1.2);
  --shadow-glass: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 80px var(--accent-subtle), 0 0 0 1px var(--glass-border);

  /* Typography */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes — fluid (refined for 320px to 4K) */
  --text-xs:   clamp(0.7rem, 0.8vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 1vw, 0.875rem);
  --text-base: clamp(0.9rem, 1.2vw, 1rem);
  --text-lg:   clamp(1.05rem, 1.5vw, 1.125rem);
  --text-xl:   clamp(1.15rem, 2vw, 1.25rem);
  --text-2xl:  clamp(1.35rem, 2.5vw, 1.5rem);
  --text-3xl:  clamp(1.7rem, 3.2vw, 1.875rem);
  --text-4xl:  clamp(2rem, 4vw, 2.25rem);
  --text-5xl:  clamp(2.5rem, 5vw, 3rem);
  --text-6xl:  clamp(3rem, 6vw, 3.75rem);
  --text-7xl:  clamp(3.5rem, 7vw, 4.5rem);

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

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;
  --leading-loose:  1.9;

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

  /* Spacing (fluid responsive variables) */
  --space-1:  clamp(0.2rem, 0.3vw, 0.25rem);   /* 4px  */
  --space-2:  clamp(0.4rem, 0.6vw, 0.5rem);    /* 8px  */
  --space-3:  clamp(0.6rem, 0.9vw, 0.75rem);   /* 12px */
  --space-4:  clamp(0.8rem, 1.2vw, 1rem);      /* 16px */
  --space-5:  clamp(1rem, 1.5vw, 1.25rem);     /* 20px */
  --space-6:  clamp(1.2rem, 1.8vw, 1.5rem);    /* 24px */
  --space-8:  clamp(1.6rem, 2.4vw, 2rem);      /* 32px */
  --space-10: clamp(2rem, 3vw, 2.5rem);        /* 40px */
  --space-12: clamp(2.4rem, 3.6vw, 3rem);      /* 48px */
  --space-16: clamp(3rem, 4.8vw, 4rem);        /* 64px */
  --space-20: clamp(4rem, 6vw, 5rem);          /* 80px */
  --space-24: clamp(5rem, 7.5vw, 6rem);        /* 96px */
  --space-32: clamp(6.5rem, 9.6vw, 8rem);      /* 128px */

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 0 1px var(--border-accent), 0 8px 32px var(--accent-glow);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-slower: 600ms;
  --duration-reveal: 700ms;

  /* Layout */
  --container-sm:  100%;
  --container-md:  100%;
  --container-lg:  100%;
  --container-xl:  1280px;
  --container-2xl: 1400px;
  --container-max: 1800px;

  /* Nav */
  --nav-height: 72px;
  --nav-height-scrolled: 64px;

  /* Z-Index Scale */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-nav:     100;
  --z-drawer:  110;
  --z-overlay: 200;
  --z-modal:   300;
  --z-widget:  500;
  --z-toast:   600;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── Inline SVG Icons ── */
svg.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
  transition: inherit;
}

img, video, svg {
  height: auto;
}

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

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

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1 { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: var(--weight-extrabold); }
h2 { font-size: clamp(1.875rem, 4vw, 3rem);  font-weight: var(--weight-bold); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-lg);  font-weight: var(--weight-medium); }
h6 { font-size: var(--text-base); font-weight: var(--weight-medium); }

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

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-bright); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

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

.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-wider  { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }
.uppercase       { text-transform: uppercase; }

.leading-tight    { line-height: var(--leading-tight); }
.leading-snug     { line-height: var(--leading-snug); }
.leading-relaxed  { line-height: var(--leading-relaxed); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-max {
  max-width: var(--container-max);
}

.container-sm  { max-width: min(100%, 640px); }
.container-md  { max-width: min(100%, 768px); }
.container-lg  { max-width: min(100%, 1024px); }
.container-2xl { max-width: min(100%, var(--container-2xl)); }

.section {
  padding-block: var(--space-24);
}

.section-sm {
  padding-block: var(--space-16);
}

.section-lg {
  padding-block: clamp(4rem, 10vw, 10rem);
}

/* --------------------------------------------------------------------------
   5. FLEX & GRID UTILITIES
   -------------------------------------------------------------------------- */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }
.gap-12         { gap: var(--space-12); }
.gap-16         { gap: var(--space-16); }

.grid       { display: grid; }
.grid-2     { grid-template-columns: repeat(2, 1fr); }
.grid-3     { grid-template-columns: repeat(3, 1fr); }
.grid-4     { grid-template-columns: repeat(4, 1fr); }
.auto-grid-3{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.auto-grid-4{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --------------------------------------------------------------------------
   6. TEXT ALIGNMENT
   -------------------------------------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   7. SPACING UTILITIES
   -------------------------------------------------------------------------- */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   8. DISPLAY & OVERFLOW
   -------------------------------------------------------------------------- */
.block  { display: block; }
.hidden { display: none; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.z-10 { z-index: 10; }
.z-nav { z-index: var(--z-nav); }
.z-drawer { z-index: var(--z-drawer); }
.z-widget { z-index: var(--z-widget); }

/* --------------------------------------------------------------------------
   9. BORDERS & DIVIDERS
   -------------------------------------------------------------------------- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* --------------------------------------------------------------------------
   10. GLASS SURFACES
   Used sparingly and deliberately — not a default card treatment.
   -------------------------------------------------------------------------- */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-glass);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: var(--glass-bg-elevated);
  }
}

/* --------------------------------------------------------------------------
   11. SECTION LABEL
   -------------------------------------------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--accent-bright);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.section-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   12. MAX WIDTH WRAPPERS
   -------------------------------------------------------------------------- */
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }