/* ============================================================
   Cube Group Design System — Foundations
   Colors, Typography, Spacing, Radii, Z-index
   Source: reference/DESIGN-cubegroup-pl.md
   ============================================================ */

@font-face {
  font-family: 'Lexend';
  src:
    url('../fonts/Lexend-VariableFont_wght.woff2') format('woff2-variations'),
    url('./fonts/Lexend-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     COLOR — Base Palette
     ----------------------------------------------------------- */
  --color-navy: #03050a; /* primary background */
  --color-white: #ffffff; /* primary text on dark */
  --color-black: #000000; /* text on light, modal overlay */
  --color-blue: #5172ff; /* brand blue / primary CTA */
  --color-blue-hover: #6a85ff; /* derived hover state */
  --color-blue-light: #b9c7ff; /* low-contrast accent / muted text */
  --color-blue-pale: #c2cdff; /* gradient stop */
  --color-gray-100: #f7f8ff; /* off-white surface */
  --color-gray-200: #eaebf2; /* light gray surface / borders */
  --color-gray-500: #65666c; /* placeholder text */
  --color-error: #ff3333; /* validation, critical alerts */

  /* Translucent overlays (always paired with dark base) */
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-border-mid: rgba(255, 255, 255, 0.2);
  --color-focus-ring: rgba(81, 114, 255, 0.2);

  /* Signature radial gradient */
  --gradient-primary: radial-gradient(circle at 30% 30%, #5172ff 0%, #c2cdff 100%);

  /* -----------------------------------------------------------
     COLOR — Semantic Tokens
     ----------------------------------------------------------- */
  --bg: var(--color-navy);
  --bg-elevated: var(--color-black);
  --bg-light: var(--color-white);
  --bg-light-alt: var(--color-gray-100);
  --bg-light-mute: var(--color-gray-200);

  --fg: var(--color-white);
  --fg-muted: var(--color-blue-light);
  --fg-placeholder: var(--color-gray-500);
  --fg-on-light: var(--color-black);

  --accent: var(--color-blue);
  --accent-hover: var(--color-blue-hover);
  --link: var(--color-white);
  --link-hover: var(--color-blue);

  --border: var(--color-border-soft);
  --border-strong: var(--color-border-mid);
  --border-light: var(--color-gray-200);

  --danger: var(--color-error);

  /* -----------------------------------------------------------
     TYPOGRAPHY — Family
     ----------------------------------------------------------- */
  --font-sans: 'Lexend', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights — used sparingly */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* -----------------------------------------------------------
     TYPOGRAPHY — Scale (px, exact from source)
     ----------------------------------------------------------- */
  --fs-display: 95px;
  --fs-h1: 61px;
  --fs-h2: 45px;
  --fs-h3: 29px;
  --fs-h4: 25px;
  --fs-body: 18px;
  --fs-caption: 14px;

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-h3: 1.3;
  --lh-h4: 1.4;
  --lh-body: 1.6;
  --lh-caption: 1.5;

  --ls-display: -1.5px;
  --ls-h1: -1px;
  --ls-h2: -0.5px;
  --ls-normal: normal;

  /* -----------------------------------------------------------
     SPACING — 4px base scale
     ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* -----------------------------------------------------------
     RADII — distinct scale defines component identity
     ----------------------------------------------------------- */
  --radius-sm: 12px; /* inputs, tags */
  --radius-md: 16px; /* cards, content containers */
  --radius-lg: 24px; /* modals, large surfaces */
  --radius-stadium: 40px; /* stadium-shape button variant */
  --radius-pill: 100px; /* pill buttons, tags */

  /* -----------------------------------------------------------
     ELEVATION — no shadows, z-index only
     ----------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-float: 10;
  --z-overlay: 1000;
  --z-header: 999999;

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 300ms;

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-wide: 1440px;
  --container-text: 1200px;
  --gutter: 24px;
}

/* ============================================================
   Element defaults — apply on body to use the system globally
   ============================================================ */
html {
  font-family: var(--font-sans);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display,
h1.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}

h1,
.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  margin: 0;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  margin: 0;
}

h3,
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  margin: 0;
}

h4,
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h4);
  margin: 0;
}

p,
.body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  margin: 0;
}

.caption,
small {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-caption);
}

code,
pre,
.mono {
  font-family: var(--font-mono);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

::selection {
  background: var(--color-blue);
  color: var(--color-white);
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px);
  background: var(--bg);
}

/* Decorative radial halo — signature gradient, off-canvas, blurred.
     Pointer-events disabled so it never interferes with interaction. */
body::before {
  content: '';
  position: fixed;
  top: -25vmin;
  right: -20vmin;
  width: 80vmin;
  height: 80vmin;
  background: radial-gradient(circle at 30% 30%, #5172ff 0%, transparent 60%);
  opacity: 0.35;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------
     Stack — vertical rhythm using design-system spacing tokens
     ---------------------------------------------------------- */
.stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(40px, 8vh, 80px);
}

/* Logo block */
.logo {
  display: block;
  height: clamp(36px, 5vw, 48px);
  width: auto;
}

/* Copy block */
.copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* 16px between H1 and supporting text */
}

.copy h1 {
  /* Fluid display scaling — never wraps awkwardly on small screens */
  font-size: clamp(32px, 5.5vw, 45px);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

.copy p {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.65);
  max-width: 38ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.copy h1 .accent {
  color: #ff8080;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid rgba(255, 51, 51, 0.35);
  color: #ff8080;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 51, 51, 0.15);
}

.ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--color-border-soft);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  user-select: all;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
  text-decoration: none;
}
.btn .arr {
  font-size: 0.85em;
  transform: translateY(-1px);
}
.btn:active {
  transform: scale(0.98);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn.primary {
  background: var(--accent);
  color: var(--color-white);
  border-color: var(--accent);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--color-border-mid);
}
.btn.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Tiny "need help?" line — quietly available, never the focal point */
.help {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.help a {
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid transparent;
  transition:
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.help a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 32px;
  background: var(--accent);
  color: var(--color-white);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
  text-decoration: none;
}

.btn-google:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-google:active {
  transform: scale(0.98);
}

.btn-google:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-google .g-icon {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 999px;
  padding: 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

.btn-google .g-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tighten padding/icon at very small widths so the label stays on one line */
@media (max-width: 360px) {
  .btn {
    padding: 12px 22px;
  }

  .actions {
    gap: var(--space-2);
  }

  .btn-google {
    padding: 12px 22px;
    gap: 10px;
  }

  .btn-google .g-icon {
    width: 18px;
    height: 18px;
  }
}