/* =============================================================================
   3SS Design System — ds.css  (adapted for the BONK product UI)
   Single token + base source of truth. Mirrors the canonical
   colors_and_type.css from the 3SS design system (v1.2.1), self-hosted fonts.
   ============================================================================= */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.ttf') format('truetype-variations');
}

:root {
  /* Brand */
  --red:          #F20D1E;   /* Passion Red — single accent */
  --black:        #000000;
  --surface:      #1A1A1A;   /* cards, surfaces */
  --white:        #FFFFFF;
  --body-text:    #EEEEEE;
  --gray:         #B3B3B3;   /* secondary text on dark */

  /* State (semantic) */
  --warning:      #FFBB00;
  --success:      #4EA72E;
  --info:         #0066FF;
  --error:        #FF3333;

  /* Text opacity tiers — dark route */
  --text-primary-on-dark:   rgba(255,255,255,0.96);
  --text-secondary-on-dark: rgba(255,255,255,0.72);
  --text-tertiary-on-dark:  rgba(255,255,255,0.48);
  --surface-overlay-dark:   rgba(255,255,255,0.08);

  /* Radii */
  --radius-card:  16px;
  --radius-sm:    6px;
  --radius-pill:  100px;
  --radius-icon:  32px;

  /* Spacing (8px grid) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px;
  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; --sp-4xl: 96px; --sp-5xl: 128px;

  --grid-gutter: 24px;
  --shadow-card: 0 4px 16px rgba(0,0,0,0.24);

  /* App background — "infinite depth" dot field (single source of truth).
     Layers (front→back): fine dot grid · faint red brand glow (top) · depth vignette. */
  --app-bg-color: #050506;
  --app-bg-image:
    radial-gradient(circle at center, rgba(255,255,255,0.06) 1px, transparent 1.6px),
    radial-gradient(ellipse 60% 45% at 50% -6%, rgba(242,13,30,0.10), transparent 62%),
    radial-gradient(ellipse 130% 95% at 50% 42%, transparent 32%, rgba(0,0,0,0.72) 100%);
  --app-bg-size: 24px 24px, 100% 100%, 100% 100%;
  --app-bg-repeat: repeat, no-repeat, no-repeat;
}

/* Apply the dot-field to the root so every page inherits it even when a page's
   own body rule doesn't set a background. Individual body rules also reference
   these vars (see common.css / home.html / login.html) for cascade safety. */
html {
  background-color: var(--app-bg-color);
  background-image: var(--app-bg-image);
  background-size: var(--app-bg-size);
  background-repeat: var(--app-bg-repeat);
  background-attachment: fixed;
}

/* ----- Typography ----- */
.ds .h1, .ds.h1 { font-size: clamp(36px, 23.3px + 3.39vw, 64px); font-weight: 700; line-height: 1.0; letter-spacing: -2px; }
.ds .h2, .ds.h2 { font-size: clamp(28px, 22.5px + 1.45vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; }
.ds .h3, .ds.h3 { font-size: clamp(20px, 18.2px + 0.48vw, 24px); font-weight: 700; line-height: 32px; letter-spacing: -1px; }
.ds .body { font-size: 16px; font-weight: 400; line-height: 24px; }
.ds .cap  { font-size: 14px; font-weight: 400; line-height: 24px; }
.ds .eyebrow { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--red); }

/* ----- Buttons (two variants) ----- */
.ds-btn-primary, .ds-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 24px;
  padding: 12px 26px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-appearance: none;
}
.ds-btn-primary { background: var(--red); color: var(--white); }
.ds-btn-primary:hover { background: linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.16)), var(--red); }
.ds-btn-secondary { background: transparent; color: var(--text-secondary-on-dark); border: 2px solid rgba(255,255,255,0.32); padding: 10px 24px; }
.ds-btn-secondary:hover { color: var(--white); border-color: rgba(255,255,255,0.64); }
.ds-btn-primary:active, .ds-btn-secondary:active { transform: scale(0.96); }

/* ----- Card (canonical primitive) ----- */
.ds-card { background: var(--surface); border-radius: var(--radius-card); padding: var(--sp-lg); color: var(--white); }

/* ----- Input (small control) ----- */
.ds-input {
  border-radius: 12px; background: rgba(255,255,255,0.05); color: #fff;
  padding: 13px 15px; font: inherit; font-size: 15px;
  border: 1px solid rgba(255,255,255,0.12); outline: none; width: 100%; box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.ds-input:focus { border-color: var(--red); background: rgba(255,255,255,0.08); }

/* ----- Tag / chip ----- */
.ds-tag {
  display: inline-flex; align-items: center; padding: 4px 10px; font-size: 14px; font-weight: 400;
  border-radius: var(--radius-sm); background: var(--surface-overlay-dark); color: var(--text-primary-on-dark);
}