/* =================================================================
   UXOVIA · DESIGN TOKENS
   The single source of truth. Import this before any component css.
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..700;1,9..40,400&display=swap");

:root {
  /* ─────────────────── Brand colors ─────────────────── */
  --brand:           #0055FE;                /* electric cobalt — primary */
  --brand-hover:     #1F6BFF;
  --brand-press:     #0048D6;
  --brand-soft:      rgba(0, 85, 254, 0.18);
  --brand-faint:     rgba(0, 85, 254, 0.06);
  --brand-glow:      rgba(0, 85, 254, 0.40);

  --purple:          #7C5CBF;                /* uxovia logo purple */
  --cyan:            #00C8EE;                /* highlight cyan */

  --gradient-brand:  linear-gradient(135deg, #0055FE 0%, #7C5CBF 100%);
  --gradient-soft:   linear-gradient(135deg, rgba(0,85,254,.55) 0%, rgba(124,92,191,.55) 100%);
  --gradient-text:   linear-gradient(135deg, #ffffff 0%, #c4d0ff 60%, #7C5CBF 100%);
  --gradient-border: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 45%, rgba(0,85,254,.32) 100%);
  --gradient-mesh:
    radial-gradient(55% 40% at 82% -5%,  rgba(0,85,254,.14),  transparent 60%),
    radial-gradient(45% 35% at -5% 100%, rgba(124,92,191,.08), transparent 65%);

  /* ─────────────────── Surfaces ─────────────────── */
  --bg:              #000000;                /* pure black */
  --bg-alt:          #050507;
  --bg-elevated:     #0A0A0F;
  --bg-ink:          #050508;

  --surface:         rgba(255, 255, 255, 0.04);
  --surface-2:       rgba(255, 255, 255, 0.06);
  --surface-3:       rgba(255, 255, 255, 0.09);
  --surface-glass:   rgba(255, 255, 255, 0.05);

  /* ─────────────────── Borders ─────────────────── */
  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-faint:    rgba(255, 255, 255, 0.04);
  --border-brand:    rgba(0, 85, 254, 0.45);

  /* ─────────────────── Text ─────────────────── */
  --text:            #ffffff;
  --text-2:          rgba(255, 255, 255, 0.66);
  --text-3:          rgba(255, 255, 255, 0.42);
  --text-faint:      rgba(255, 255, 255, 0.22);
  --text-on-brand:   #ffffff;
  --offwhite:        #EFEEEC;

  /* status (used sparingly) */
  --success:         #1FCB7A;
  --warning:         #F5A623;
  --danger:          #FF4D6D;

  /* ─────────────────── Typography ─────────────────── */
  --font-display:    "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:       "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  /* "mono" namespace retained for semantic clarity, but renders DM Sans 400 — same family, distinguished by weight + tracking */
  --font-mono:       "DM Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* fluid type scale (clamps so it scales 320 → 1440) */
  --t-hero:          clamp(3.4rem,  8vw,   7.5rem);
  --t-display:       clamp(2.8rem,  5.8vw, 5rem);
  --t-h1:            clamp(2.2rem,  4.4vw, 3.5rem);
  --t-h2:            clamp(1.7rem,  3vw,   2.4rem);
  --t-h3:            clamp(1.25rem, 1.8vw, 1.5rem);
  --t-h4:            1.125rem;
  --t-body-lg:       1.125rem;
  --t-body:          1rem;
  --t-small:         0.875rem;
  --t-eyebrow:       0.78rem;
  --t-mono:          0.85rem;

  /* leading */
  --lh-hero:         0.92;
  --lh-display:      0.98;
  --lh-h:            1.12;
  --lh-body:         1.55;
  --lh-tight:        1.25;

  /* tracking */
  --tr-hero:         -0.045em;
  --tr-display:      -0.035em;
  --tr-h:            -0.022em;
  --tr-body:         -0.01em;
  --tr-eyebrow:      0.18em;
  --tr-mono:         0;

  /* weights */
  --w-thin:          100;          /* for mono labels (eyebrows, badges, code) */
  --w-regular:       400;
  --w-medium:        500;
  --w-semi:          600;
  --w-bold:          700;

  /* ─────────────────── Spacing (4px grid) ─────────────────── */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.5rem;    /* 24px */
  --s-6:  2rem;      /* 32px */
  --s-7:  3rem;      /* 48px */
  --s-8:  4rem;      /* 64px */
  --s-9:  6rem;      /* 96px */
  --s-10: 8rem;      /* 128px */
  --s-11: 10rem;     /* 160px */

  /* section rhythm */
  --section-y:       clamp(4rem, 10vw, 8rem);

  /* ─────────────────── Radii ─────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ─────────────────── Elevation ─────────────────── */
  --shadow-1:       0 1px 2px rgba(0,0,0,.4);
  --shadow-2:       0 8px 24px rgba(0,0,0,.35);
  --shadow-card:    0 30px 80px -20px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.25);
  --shadow-float:   0 50px 120px -30px rgba(0,0,0,.75);
  --glow-brand:     0 0 80px rgba(0, 85, 254, 0.35);
  --glow-brand-sm:  0 0 24px rgba(0, 85, 254, 0.35);
  --inset-glow:     inset 0 1px 0 rgba(255,255,255,.08);

  /* ─────────────────── Motion ─────────────────── */
  --ease-out:       cubic-bezier(0.20, 0.70, 0.30, 1);
  --ease-in-out:    cubic-bezier(0.65, 0.00, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant:    100ms;
  --dur-fast:       180ms;
  --dur:            320ms;
  --dur-slow:       600ms;
  --dur-xslow:      1200ms;

  /* ─────────────────── Layout ─────────────────── */
  --container:        1280px;
  --container-narrow: 1080px;
  --container-tight:  720px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     500;
  --z-overlay: 800;
  --z-modal:   1000;
  --z-toast:   1200;
}

/* =================================================================
   RESET & BASE
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;

  /* atmospheric mesh background, fixed to viewport */
  background-image: var(--gradient-mesh);
  background-attachment: fixed;
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-h);
  line-height: var(--lh-h);
  color: var(--text);
}

p { margin: 0; color: var(--text-2); }
a { color: inherit; text-decoration: none; }

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

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

::selection {
  background: var(--brand);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* utility container */
.container        { width: 100%; max-width: var(--container);        margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container-tight  { width: 100%; max-width: var(--container-tight);  margin-inline: auto; padding-inline: var(--gutter); }

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

/* small reusable visually-hidden helper */
.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;
}