/* ============================================================
   FlowPayX — design tokens only.

   The public site, hosted checkout and auth pages have their own
   layouts. They need the custom properties that the colour sweep
   put into their inline styles, but NOT the panel's element
   rules -- linking the full panel stylesheet there applied
   `body { display: flex }` over their own body rule and collapsed
   the page into a horizontal row.

   Generated from assets/css/flowpay.css. If tokens change there,
   regenerate this file.
   ============================================================ */

:root {
  /* Accent: violet leads, cyan supports. */
  --primary-50:  #191634;
  --primary-100: #221D48;
  --primary-200: #2E2668;
  --primary-400: #A99BFF;
  --primary:     #6D5BF6;
  --primary-600: #7E6EF8;
  --primary-700: #5A46E8;
  --primary-dark:#5A46E8;
  --on-primary:  #FFFFFF;
  --accent:      #22D3EE;
  --accent-dim:  #12B5D0;
  --glow:        rgba(109,91,246,.24);

  /* Surfaces */
  --paper:      #0A0B12;
  --surface:    #13151F;
  --surface-2:  #1B1E2B;
  --surface-3:  #242838;
  --overlay:    rgba(255,255,255,.04);
  --overlay-2:  rgba(255,255,255,.08);

  --ink:        #F2F3F8;
  --ink-2:      #A8AEC2;
  --muted:      #6E7690;
  --muted-2:    #545B72;

  --rule:       #232637;
  --rule-2:     #2E3245;
  --rule-3:     #3C4157;

  /* Status */
  --success: #34D399; --success-bg: rgba(52,211,153,.12);  --success-rule: rgba(52,211,153,.28);
  --danger:  #FB7185; --danger-bg:  rgba(251,113,133,.12); --danger-rule:  rgba(251,113,133,.28);
  --warning: #FBBF24; --warning-bg: rgba(251,191,36,.12);  --warning-rule: rgba(251,191,36,.28);
  --info:    #60A5FA; --info-bg:    rgba(96,165,250,.12);  --info-rule:    rgba(96,165,250,.28);
  --purple:  #A78BFA;

  /* Elevation — depth comes from glow and lift, not hard shadow. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.65);
  --shadow-xl: 0 32px 64px -16px rgba(0,0,0,.75);
  --shadow-primary: 0 10px 26px -10px rgba(109,91,246,.9);
  --ring: 0 0 0 4px rgba(109,91,246,.28);

  /* Geometry — generous. */
  --r-xs: 8px; --r-sm: 12px; --r: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;

  --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-w: 258px;
  --sidebar-collapsed-w: 78px;
  --topbar-h: 62px;
  --tr: .2s cubic-bezier(.4,0,.2,1);

  /* Legacy aliases used across existing templates. */
  --bg: var(--paper); --card: var(--surface); --card2: var(--surface-2);
  --bg2: var(--surface-2); --bg-secondary: var(--surface-2); --sidebar: var(--surface);
  --border: var(--rule); --border2: var(--rule-2); --border-strong: var(--rule-3);
  --text: var(--ink); --text2: var(--ink-2); --muted2: var(--muted-2);
  --input-bg: var(--surface-2);
  --pp-primary: var(--primary); --pp-accent: var(--accent); --pp-card: var(--surface);
  --pp-border: var(--rule); --pp-text: var(--ink); --pp-muted: var(--muted);
  --pp-success: var(--success); --pp-warning: var(--warning); --pp-danger: var(--danger);
}

[data-theme="light"] {
  --primary-50:  #F1EEFE;
  --primary-100: #E4DFFD;
  --primary-200: #C9C0FB;
  --primary-400: #8A79F8;
  --primary:     #5B48E0;
  --primary-600: #4B39C9;
  --primary-700: #3C2DA6;
  --on-primary:  #FFFFFF;
  --accent:      #0E9BB8;
  --accent-dim:  #0B7E96;
  --glow:        rgba(91,72,224,.12);

  --paper:      #F4F4F8;
  --surface:    #FFFFFF;
  --surface-2:  #F7F7FB;
  --surface-3:  #EEEFF5;
  --overlay:    rgba(12,14,26,.04);
  --overlay-2:  rgba(12,14,26,.08);

  --ink:        #14172A;
  --ink-2:      #454B66;
  --muted:      #6F7690;
  --muted-2:    #9AA0B5;

  --rule:       #E6E7EF;
  --rule-2:     #D6D8E4;
  --rule-3:     #BEC2D3;

  --success: #0F9D6E; --success-bg: rgba(15,157,110,.10);  --success-rule: rgba(15,157,110,.26);
  --danger:  #DC3F55; --danger-bg:  rgba(220,63,85,.10);   --danger-rule:  rgba(220,63,85,.26);
  --warning: #B7791F; --warning-bg: rgba(183,121,31,.10);  --warning-rule: rgba(183,121,31,.26);
  --info:    #2C6FD8; --info-bg:    rgba(44,111,216,.10);  --info-rule:    rgba(44,111,216,.26);
  --purple:  #7C5CE0;

  --shadow-xs: 0 1px 2px rgba(16,20,40,.05);
  --shadow-sm: 0 2px 8px rgba(16,20,40,.07);
  --shadow-md: 0 8px 24px -8px rgba(16,20,40,.12);
  --shadow-lg: 0 18px 40px -14px rgba(16,20,40,.16);
  --shadow-xl: 0 32px 64px -18px rgba(16,20,40,.22);
  --shadow-primary: 0 10px 24px -10px rgba(91,72,224,.55);
  --ring: 0 0 0 4px rgba(91,72,224,.18);
  --input-bg: var(--surface);
}