/* ============================================================================
   yapp — brand design tokens (web landing)
   Mirrors src/theme/palette.ts (darkPalette) + the UI/UX guide.
   Dark-only. ONE pink accent (#FF006E). 7-color spectrum = brand art only.
   ========================================================================== */

:root {
  /* --- Core surface palette (from palette.ts darkPalette) --- */
  --bg:            #0a0a0f; /* app background, brand near-black */
  --bg-soft:       #1c1c1e; /* lifted surfaces: cards, inputs, pills, tiles */
  --bg-soft-2:     #252527; /* card gradient stop */
  --ink:           #f5f5f5; /* primary text */
  --ink-soft:      #a8a8a8; /* secondary text: handles, meta, timestamps */
  --ink-softer:    #8e8e93; /* tertiary / disabled / inactive */
  --hairline:      rgba(122, 122, 128, 0.30); /* borders/dividers */
  --hairline-faint:rgba(72, 72, 74, 0.55);    /* subtle dividers */

  /* --- THE accent. One pink. Literal. --- */
  --pink:          #FF006E;
  --pink-bright:   #FF3D8B; /* themed pink (palette `field`) — use sparingly */
  --pink-deep:     #c70057;
  --pink-glow:     rgba(255, 0, 110, 0.45);
  --pink-wash:     rgba(255, 0, 110, 0.08);

  /* --- Repost green: reposts only (kept for completeness) --- */
  --repost-green:  #00ba7c;

  /* --- 7-color hard-stripe spectrum (BRAND ART ONLY, left -> right) --- */
  --spec-amber:    #FFBE0B;
  --spec-orange:   #FF7F2C;
  --spec-coral:    #FF3F4D;
  --spec-pink:     #FF006E;
  --spec-magenta:  #BD2D9E;
  --spec-purple:   #7C59CF;
  --spec-blue:     #3A86FF;
  --spectrum: var(--spec-amber), var(--spec-orange), var(--spec-coral),
              var(--spec-pink), var(--spec-magenta), var(--spec-purple), var(--spec-blue);

  /* --- Typography (Fraunces wordmark only · Outfit labels · Inter body) --- */
  --font-wordmark: "Fraunces", Georgia, "Times New Roman", serif;
  --font-label:    "Outfit", system-ui, -apple-system, sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;

  /* --- Spacing scale (src/theme/spacing.ts) --- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-3xl: 80px;
  --sp-4xl: 128px;

  /* --- Radius scale (src/theme/spacing.ts) --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;
  --r-tile: 16px; /* canon card idiom: 12-18 */

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  /* --- Motion --- */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}