/* =========================================================================
   PETICA DESIGN TOKENS
   Palette grounded in the produced photography (ID card / QR tag renders):
   a deep confident violet paired with a warm brilliant gold, set on warm
   neutral paper tones that match the studio backdrops used across the
   image library. Nothing here is a generic SaaS blue/indigo default.
   ========================================================================= */

:root {
  /* ---- Brand: Violet (identity, trust, primary actions) ---- */
  --violet-900: #1E1333;
  --violet-800: #2B1C4A;
  --violet-700: #3B2564;
  --violet-600: #4E2F82;
  --violet-500: #5F3AA0;   /* primary interactive violet */
  --violet-400: #7C57BC;
  --violet-300: #A585D6;
  --violet-200: #CBB6E8;
  --violet-100: #EEE7F8;
  --violet-050: #F7F3FC;

  /* ---- Brand: Gold (identity confirmed, premium, warmth) ---- */
  --gold-700: #8C5F1B;   /* darkened from #9C6A1E for AA contrast on gold-100 (badges, demo-banner) — was 4.15:1, now 4.95:1 */
  --gold-600: #AB7826;   /* darkened from #BE852A — .text-gold at large/bold sizes was 2.98:1, just under the 3:1 minimum; now 3.61:1 */
  --gold-500: #DDA13B;   /* primary gold */
  --gold-400: #EBB85D;
  --gold-300: #F3CD8A;
  --gold-200: #F8DFAF;
  --gold-100: #FCF0DC;
  --gold-050: #FDF8EF;

  /* ---- Signature gradient: violet -> gold, used sparingly ---- */
  --gradient-brand: linear-gradient(120deg, var(--violet-600) 0%, var(--violet-500) 38%, var(--gold-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--violet-050) 0%, var(--gold-050) 100%);
  --gradient-gold: linear-gradient(160deg, var(--gold-400) 0%, var(--gold-600) 100%);

  /* ---- Neutrals (warm paper, matched to studio backdrops) ---- */
  --paper: #FAF7F2;
  --paper-raised: #FFFFFF;
  --stone-900: #241B33;   /* near-black, violet-tinted ink */
  --stone-700: #453A57;
  --stone-500: #6E6479;
  --stone-300: #C9C1D2;
  --stone-200: #E2DCE8;
  --stone-100: #EFEAF3;
  --stone-050: #F6F3F8;
  --line: #E5DEEC;

  /* ---- Semantic ---- */
  --success: #28774E;  /* darkened from #2F8A5B for AA contrast on success-bg — was 3.80:1, now 4.86:1 */
  --success-bg: #E7F5EC;
  --warning: #8E5D18;  /* darkened from #B9791F for AA contrast on warning-bg — was 3.20:1, now 4.99:1 */
  --warning-bg: #FBF0DC;
  --danger: #AF3E34;   /* darkened from #C2453A for AA contrast on danger-bg — was 4.29:1, now 5.06:1 */
  --danger-bg: #FBEAE8;
  --info: #4E2F82;
  --info-bg: #EEE7F8;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Arabic-specific stack (used only under [lang="ar"] / .rtl) */
  --font-display-ar: "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Tajawal", sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  --step-5:  clamp(3rem, 2.2rem + 3.2vw, 4.6rem);
  --step-6:  clamp(3.6rem, 2.6rem + 4.4vw, 6rem);

  /* ---- 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;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radius: rounded like a card corner, never a bubble ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadow: soft, warm-tinted, never pure black ---- */
  --shadow-sm: 0 1px 2px rgba(36, 27, 51, 0.06), 0 1px 1px rgba(36, 27, 51, 0.04);
  --shadow-md: 0 6px 20px -4px rgba(36, 27, 51, 0.14), 0 2px 6px -2px rgba(36, 27, 51, 0.08);
  --shadow-lg: 0 20px 48px -12px rgba(30, 19, 51, 0.24), 0 6px 16px -6px rgba(30, 19, 51, 0.12);
  --shadow-gold: 0 10px 28px -8px rgba(221, 161, 59, 0.45);
  --shadow-violet: 0 10px 28px -8px rgba(95, 58, 160, 0.4);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 800px;
  --header-h: 76px;
}

@media (prefers-color-scheme: dark) {
  /* Reserved: the prototype is designed as a single premium light theme,
     matching the photography's warm studio backdrops. Dark mode is a
     deliberate phase-2 item, not an oversight. */
}