/* =====================================================================================
   GENERATED FILE — DO NOT EDIT.
   Source of truth: react_new/react-app/src/styles/tokens.css (design tokens of the ByDex React app).
   Regenerate:      cd react_new/react-app && npm run tokens:sync
   Used by:         the public Landing site (server/resources/views/site, pages, errors) via site.css.
   ===================================================================================== */

/* ================= ByDex DESIGN TOKENS (v4 redesign) =================
   Semantic system: background → surface → surface-elevated; text primary/secondary/muted;
   one brand accent (ByDex amber) used for primary actions and focus only; muted semantic colors.
   Legacy aliases (--bg, --surface-2, --text-2 …) are kept so every component keeps working. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  /* neutrals — cool graphite, never pure black */
  --bg: #0D0F13;
  --bg-elev: #12151A;          /* sidebar, sheets, modals */
  --surface: #161A20;          /* cards */
  --surface-2: #1D2129;        /* inputs, chips, hover */
  --surface-3: #272C35;        /* pressed, tracks */
  --border: #23272F;
  --border-strong: #323843;
  --text: #EDEFF3;
  --text-2: #A4AAB7;
  --text-3: #7D8494;           /* ≥4.5:1 on --surface */
  /* brand */
  --accent: #FF8A1F;
  --accent-hover: #FF9A3D;
  --accent-press: #F07A0E;
  --accent-ink: #1C0D00;
  --accent-text: #FFA559;
  --accent-soft: rgba(255,138,31,.12);
  --accent-ring: rgba(255,138,31,.32);
  --accent-glow: rgba(255,138,31,.28);
  /* semantic */
  --success: #3DCB86;  --success-soft: rgba(61,203,134,.12);
  --warning: #F0B44C;  --warning-soft: rgba(240,180,76,.12);
  --danger:  #F2616B;  --danger-soft: rgba(242,97,107,.12);
  --info:    #5AA6F8;  --info-soft: rgba(90,166,248,.12);
  --neutral-soft: rgba(164,170,183,.1);
  /* layers */
  --overlay: rgba(5,6,9,.66);
  --glass: rgba(13,15,19,.82);
  --canvas: #08090C;
  --canvas-glass: rgba(8,9,12,.8);
  --hairline: rgba(255,255,255,.06);     /* top highlight on elevated surfaces */
  /* elevation — restrained, mostly used by overlays */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.28);
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 28px -10px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 64px -16px rgba(0,0,0,.65);
  /* product visuals (logo, bank card) — not for UI chrome */
  --brand-grad: linear-gradient(135deg, #FEBD0D 0%, #FE9403 32%, #FD5830 68%, #FD045E 100%);
  --hero-grad: linear-gradient(180deg, #191D24 0%, #161A20 100%);
  --hero-glow: radial-gradient(90% 120% at 100% 0%, rgba(255,138,31,.10), transparent 60%);
  --aurora-1: transparent;
  --aurora-2: transparent;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F7;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F2F5;
  --surface-3: #E5E7EC;
  --border: #E3E5EA;
  --border-strong: #CFD3DB;
  --text: #0E1117;
  --text-2: #4B5263;
  --text-3: #6A7183;
  --accent: #FF8A1F;
  --accent-hover: #FF9A3D;
  --accent-press: #EC760C;
  --accent-ink: #1C0D00;
  --accent-text: #B4520A;
  --accent-soft: rgba(255,138,31,.11);
  --accent-ring: rgba(255,138,31,.30);
  --accent-glow: rgba(255,138,31,.24);
  --success: #12924F;  --success-soft: rgba(18,146,79,.09);
  --warning: #9A6A00;  --warning-soft: rgba(196,138,0,.11);
  --danger:  #D3303D;  --danger-soft: rgba(211,48,61,.08);
  --info:    #1E6FD1;  --info-soft: rgba(30,111,209,.09);
  --neutral-soft: rgba(75,82,99,.08);
  --overlay: rgba(14,17,24,.38);
  --glass: rgba(243,244,247,.84);
  --canvas: #E7E9EE;
  --canvas-glass: rgba(231,233,238,.85);
  --hairline: rgba(255,255,255,.7);
  --shadow-xs: 0 1px 2px rgba(16,20,32,.06);
  --shadow-sm: 0 1px 3px rgba(16,20,32,.06), 0 4px 12px -4px rgba(16,20,32,.08);
  --shadow-md: 0 12px 28px -12px rgba(16,20,32,.18);
  --shadow-lg: 0 28px 64px -20px rgba(16,20,32,.28);
  --hero-grad: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
  --hero-glow: radial-gradient(90% 120% at 100% 0%, rgba(255,138,31,.08), transparent 60%);
}

:root {
  /* semantic aliases (spec names) */
  --background: var(--bg);
  --surface-elevated: var(--bg-elev);
  --primary: var(--accent);
  --secondary: var(--surface-2);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --error: var(--danger);
  --error-soft: var(--danger-soft);

  /* radius — moderate, consistent */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 999px;

  /* spacing scale (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: 40px;  --lh-display: 1.05; --ls-display: -0.035em;
  --fs-h1: 28px;       --lh-h1: 1.15;      --ls-h1: -0.025em;
  --fs-h2: 22px;       --lh-h2: 1.2;       --ls-h2: -0.02em;
  --fs-h3: 17px;       --lh-h3: 1.3;       --ls-h3: -0.012em;
  --fs-body: 15px;     --lh-body: 1.5;
  --fs-body-sm: 13.5px;--lh-body-sm: 1.45;
  --fs-caption: 12px;  --lh-caption: 1.35;
  --fs-label: 11.5px;  --ls-label: 0.06em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --num-features: "tnum" 1, "cv11" 1, "ss01" 1;

  /* motion */
  --dur-micro: 120ms;
  --dur-fast: 180ms;
  --dur-normal: 240ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(.2, 0, 0, 1);          /* standard */
  --ease-out: cubic-bezier(.16, 1, .3, 1);    /* enter */
  --ease-in: cubic-bezier(.4, 0, 1, 1);       /* exit */
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1); /* small, controlled overshoot */

  /* focus */
  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* control sizes / touch targets */
  --h-control: 48px; --h-control-sm: 40px; --h-control-lg: 56px; --touch: 44px;

  /* safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ----- GENERATED from the light block above: system theme when the page sets no data-theme ----- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F3F4F7;
    --bg-elev: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F1F2F5;
    --surface-3: #E5E7EC;
    --border: #E3E5EA;
    --border-strong: #CFD3DB;
    --text: #0E1117;
    --text-2: #4B5263;
    --text-3: #6A7183;
    --accent: #FF8A1F;
    --accent-hover: #FF9A3D;
    --accent-press: #EC760C;
    --accent-ink: #1C0D00;
    --accent-text: #B4520A;
    --accent-soft: rgba(255,138,31,.11);
    --accent-ring: rgba(255,138,31,.30);
    --accent-glow: rgba(255,138,31,.24);
    --success: #12924F;  --success-soft: rgba(18,146,79,.09);
    --warning: #9A6A00;  --warning-soft: rgba(196,138,0,.11);
    --danger:  #D3303D;  --danger-soft: rgba(211,48,61,.08);
    --info:    #1E6FD1;  --info-soft: rgba(30,111,209,.09);
    --neutral-soft: rgba(75,82,99,.08);
    --overlay: rgba(14,17,24,.38);
    --glass: rgba(243,244,247,.84);
    --canvas: #E7E9EE;
    --canvas-glass: rgba(231,233,238,.85);
    --hairline: rgba(255,255,255,.7);
    --shadow-xs: 0 1px 2px rgba(16,20,32,.06);
    --shadow-sm: 0 1px 3px rgba(16,20,32,.06), 0 4px 12px -4px rgba(16,20,32,.08);
    --shadow-md: 0 12px 28px -12px rgba(16,20,32,.18);
    --shadow-lg: 0 28px 64px -20px rgba(16,20,32,.28);
    --hero-grad: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
    --hero-glow: radial-gradient(90% 120% at 100% 0%, rgba(255,138,31,.08), transparent 60%);
  }
}