/* ===========================================================================
   Plutous Design Tokens
   Dark-first premium glassmorphism. Black & white brand palette.
   Theme is user-selected and persisted (no system-follow) — see store/settings.
   =========================================================================== */

:root {
  /* ---- Brand palette (fixed) ---- */
  --plt-black:        #000000;
  --plt-white:        #FFFFFF;
  --plt-near-black:   #0A0A0A;
  --plt-surface-2:    #111111;
  --plt-off-white:    #F5F5F5;

  /* ---- Semantic status ---- */
  --color-success:    #22C55E;
  --color-error:      #EF4444;
  --color-warning:    #F59E0B;
  --color-info:       #3B82F6;

  /* ---- PLT token accent (eccentric purple) ---- */
  --plt-gold:         #9D4EDD;
  --plt-gold-soft:    rgba(157, 78, 221, 0.14);
  --plt-gold-line:    rgba(157, 78, 221, 0.40);

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num:  'Inter', ui-monospace, 'SF Mono', monospace; /* tabular figures via font-feature */

  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-display: 44px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---- Layout ---- */
  --app-max-w: 480px;     /* phone-first canvas, centered on desktop */
  --nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===========================================================================
   DARK THEME (default)
   =========================================================================== */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg:            var(--plt-black);
  --bg-gradient:   radial-gradient(120% 80% at 50% -10%, #1a1a1a 0%, #0a0a0a 45%, #000000 100%);
  --surface:       var(--plt-near-black);
  --surface-2:     var(--plt-surface-2);
  --surface-3:     #181818;

  --text:          var(--plt-white);
  --text-muted:    rgba(255, 255, 255, 0.62);
  --text-faint:    rgba(255, 255, 255, 0.40);

  --border:        #2A2A2A;
  --border-soft:   rgba(255, 255, 255, 0.08);
  --divider:       rgba(255, 255, 255, 0.06);

  /* Glassmorphism */
  --glass-bg:      rgba(255, 255, 255, 0.05);
  --glass-bg-2:    rgba(255, 255, 255, 0.08);
  --glass-border:  rgba(255, 255, 255, 0.12);
  --glass-blur:    18px;
  --glass-shadow:  0 12px 40px rgba(0, 0, 0, 0.55);

  --on-accent:     var(--plt-black);    /* text on white buttons */
  --accent:        var(--plt-white);    /* primary action surface in dark = white */
  --accent-text:   var(--plt-black);

  --scrim:         rgba(0, 0, 0, 0.66);

  --card-face:     #000000;             /* virtual card body */
  --card-mesh:     rgba(255, 255, 255, 0.10);
}

/* ===========================================================================
   LIGHT THEME (user toggle in Settings)
   =========================================================================== */
[data-theme='light'] {
  color-scheme: light;

  --bg:            var(--plt-off-white);
  --bg-gradient:   radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #f5f5f5 60%, #ececec 100%);
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFA;
  --surface-3:     #F0F0F0;

  --text:          #0A0A0A;
  --text-muted:    rgba(10, 10, 10, 0.60);
  --text-faint:    rgba(10, 10, 10, 0.40);

  --border:        #DDDDDD;
  --border-soft:   rgba(0, 0, 0, 0.08);
  --divider:       rgba(0, 0, 0, 0.06);

  --glass-bg:      rgba(255, 255, 255, 0.66);
  --glass-bg-2:    rgba(255, 255, 255, 0.82);
  --glass-border:  rgba(0, 0, 0, 0.08);
  --glass-blur:    18px;
  --glass-shadow:  0 12px 40px rgba(0, 0, 0, 0.12);

  --on-accent:     var(--plt-white);
  --accent:        var(--plt-black);    /* primary action in light = black */
  --accent-text:   var(--plt-white);

  --scrim:         rgba(0, 0, 0, 0.40);

  --card-face:     #000000;             /* card stays black in both themes per spec */
  --card-mesh:     rgba(255, 255, 255, 0.10);
}