/* ==========================================================================
   RawmanPictures — Design Tokens
   Central source of truth for colors, type, spacing, radii, motion.
   Override here to re-theme the entire app.
   ========================================================================== */

:root {
  /* ---- Surfaces (deep carbon black) ---- */
  --color-bg:          #0A0A0A;
  --color-surface:     #131313;
  --color-surface-2:   #1B1B1B;
  --color-surface-3:   #232323;
  --color-border:      #2A2A2A;
  --color-border-soft: #1F1F1F;

  /* ---- Text ---- */
  --text-primary:   #FFFFFF;
  --text-secondary: #888888;
  --text-tertiary:  #5A5A5A;
  --text-on-accent: #0A0A0A;

  /* ---- Accent (warm gold) ---- */
  --accent:         #E0A923;
  --accent-press:   #C8941E;
  --accent-soft:    rgba(224, 169, 35, 0.12);
  --accent-ring:    rgba(224, 169, 35, 0.28);

  /* ---- Semantic ---- */
  --danger:       #E0563A;
  --danger-soft:  rgba(224, 86, 58, 0.12);
  --success:      #3FB477;

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.5rem;    /* 40 */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ---- Radii ---- */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 10px 40px rgba(224, 169, 35, 0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur:      220ms;

  /* ---- Layout ---- */
  --maxw: 520px;
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}