/* ============================================================
   DESIGN TOKENS — NovaCentrax Design System
   Inspired by sortlist.com's visual language
   ============================================================ */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --color-primary:        #0F172A;   /* Dark navy — headings, dark sections */
  --color-primary-mid:    #1E293B;   /* Slightly lighter navy */
  --color-accent:         #14B8A6;   /* Teal — CTAs, highlights */
  --color-accent-hover:   #0D9488;   /* Darker teal for hover */
  --color-accent-light:   #F0FDFA;   /* Pale teal bg */
  --color-success:        #059669;   /* Green — verified/trust */
  --color-warning:        #F59E0B;   /* Gold — star ratings */

  /* ── Neutral Palette ─────────────────────────────────────── */
  --color-bg:             #FFFFFF;
  --color-bg-subtle:      #F8FAFC;
  --color-bg-muted:       #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    'Sora', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;
  --text-6xl:     3.75rem;
  --text-7xl:     4.5rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* ── Semantic Type Scale ─────────────────────────────────── */
  /* Display — hero title                                        */
  --type-display-size:     clamp(2.75rem, 6vw, 4.75rem);
  --type-display-weight:   800;
  --type-display-leading:  1.05;
  --type-display-tracking: -0.03em;

  /* H1 — page-level heading                                    */
  --type-h1-size:     clamp(2.25rem, 4vw, 3.5rem);
  --type-h1-weight:   700;
  --type-h1-leading:  1.1;
  --type-h1-tracking: -0.025em;

  /* H2 — section headings                                      */
  --type-h2-size:     clamp(1.625rem, 3vw, 2.25rem);
  --type-h2-weight:   700;
  --type-h2-leading:  1.2;
  --type-h2-tracking: -0.02em;

  /* H3 — card/subsection titles                                */
  --type-h3-size:     clamp(1.125rem, 2vw, 1.375rem);
  --type-h3-weight:   600;
  --type-h3-leading:  1.3;
  --type-h3-tracking: -0.01em;

  /* H4 — small labels with weight                              */
  --type-h4-size:     1rem;
  --type-h4-weight:   600;
  --type-h4-leading:  1.4;
  --type-h4-tracking: 0;

  /* Body large — intro / lead text                             */
  --type-body-lg-size:    clamp(1.0625rem, 1.5vw, 1.1875rem);
  --type-body-lg-weight:  400;
  --type-body-lg-leading: 1.75;

  /* Body — normal paragraph                                    */
  --type-body-size:    1rem;
  --type-body-weight:  400;
  --type-body-leading: 1.65;

  /* Small — secondary text                                     */
  --type-small-size:    0.875rem;
  --type-small-weight:  400;
  --type-small-leading: 1.55;

  /* Eyebrow — uppercase labels above headings                  */
  --type-eyebrow-size:     0.6875rem;
  --type-eyebrow-weight:   600;
  --type-eyebrow-tracking: 0.1em;

  /* UI — buttons, nav, form labels                             */
  --type-ui-size:    0.875rem;
  --type-ui-weight:  500;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-card: 0 2px 12px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.08);
  --shadow-card-hover: 0 8px 30px 0 rgb(0 0 0 / 0.12), 0 2px 8px 0 rgb(0 0 0 / 0.08);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:20;
  --z-sticky:  30;
  --z-overlay: 40;
  --z-modal:   50;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --nav-height:     70px;
  --section-py:     var(--space-20);
}

/* ── Global Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin: 0;
}
h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
}
h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}
h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}
h4 {
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-tracking);
}

p { line-height: var(--type-body-leading); }

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

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

/* ── Utility: Gradient Text ──────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #4F6EF7 0%, #8B5CF6 50%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-blue {
  background: linear-gradient(135deg, #1D4ED8 0%, #4F6EF7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Utility: Container ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
  .container { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ── Utility: Glass card ─────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
}
.glass-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}