/* ==========================================================================
   FadPay Next — design tokens
   One source of truth for colour, type, space, radius, shadow & motion.
   Colours mirror the native FadPay app (azure brand, deep-navy chrome).
   Light is the default; dark is applied via [data-theme="dark"] and also
   honoured automatically from the OS when no explicit choice is stored.
   ========================================================================== */

:root {
  /* Brand — exact FadPay Next palette (from the app's Theme.swift / logo) --- */
  --brand:            #0171cb;   /* brand blue (primary) */
  --brand-strong:     #0171cb;   /* pressed / emphasis */
  --brand-2:          #12C4F5;   /* bright cyan (logo highlight) */
  --brand-3:          #35B15A;   /* qr / success green */
  --navy:             #0A1A3C;   /* deepest brand navy (logo tail) */
  --navy-2:           #123268;
  --gold:             #B8860B;
  --on-brand:         #FFFFFF;

  /* Surfaces (light) ----------------------------------------------------- */
  --bg:               #EEF3FA;
  --bg-2:             #F5F8FC;
  --surface:          #FFFFFF;
  --surface-2:        #F6F8FC;
  --surface-3:        #EEF2F8;
  --field:            #EEF2F8;
  --glass:            rgba(255,255,255,.72);
  --glass-border:     rgba(255,255,255,.6);

  /* Text ----------------------------------------------------------------- */
  --text:             #0B1B33;
  --text-2:           #52627C;
  --text-3:           #8494AC;
  --muted:            #93A1B8;

  /* Lines ---------------------------------------------------------------- */
  --border:           #E1E7F0;
  --hairline:         #EBEFF6;

  /* Status --------------------------------------------------------------- */
  --success:          #1FA855;
  --success-soft:     #E4F6EC;
  --warning:          #E08A00;
  --warning-soft:     #FDF1DC;
  --danger:           #D8342B;
  --danger-soft:      #FCE9E7;
  --info:             #1D6FE0;
  --info-soft:        #E6F0FD;

  /* Gradients ------------------------------------------------------------ */
  --grad-brand:  linear-gradient(135deg,#348DD5 0%,#0171cb 100%);
  --grad-navy:   linear-gradient(160deg,#123268 0%,#0A1A3C 100%);
  --grad-qr:     linear-gradient(135deg,#35B15A 0%,#27B0C9 100%);
  --grad-gold:   linear-gradient(135deg,#F6D36B 0%,#C79A2E 100%);
  --grad-cyan:   linear-gradient(135deg,#12C4F5 0%,#0171cb 100%);   /* echoes the logo gradient */
  --grad-hero:   radial-gradient(1200px 600px at 15% -10%, rgba(1,113,203,.20), transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, rgba(18,196,245,.16), transparent 55%);
  --sheen:       linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));

  /* Shadows (tuned for light) ------------------------------------------- */
  --shadow-color:     220 40% 24%;
  --shadow-sm:  0 1px 2px hsl(var(--shadow-color) / .08), 0 1px 1px hsl(var(--shadow-color) / .04);
  --shadow-md:  0 6px 18px -6px hsl(var(--shadow-color) / .18), 0 2px 6px -2px hsl(var(--shadow-color) / .10);
  --shadow-lg:  0 24px 50px -18px hsl(var(--shadow-color) / .28), 0 8px 20px -10px hsl(var(--shadow-color) / .16);
  --shadow-xl:  0 44px 90px -30px hsl(var(--shadow-color) / .40), 0 14px 40px -14px hsl(var(--shadow-color) / .22);
  --glow-brand: 0 20px 60px -18px rgba(1,113,203,.55);

  /* Typography ----------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --font-num:  "Plus Jakarta Sans", ui-rounded, system-ui, sans-serif;

  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1rem + .45vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      .9rem;
  --fs-xs:      .8rem;

  /* Spacing / radius / layout ------------------------------------------- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem;  --sp-7: 3rem;  --sp-8: 4rem;   --sp-9: 6rem;  --sp-10: 8rem;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px;

  --container: 1200px;
  --nav-h: 72px;

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .18s; --dur-2: .32s; --dur-3: .5s; --dur-4: .8s;

  color-scheme: light;
}

/* Dark tokens (shared by explicit toggle + OS preference) ---------------- */
:root[data-theme="dark"] {
  --brand:            #0171cb;
  --brand-strong:     #0171cb;
  --brand-2:          #3DD3FB;
  --brand-3:          #35C46A;
  --navy:             #0A1A3C;
  --navy-2:           #123268;

  --bg:               #06132C;
  --bg-2:             #0A1A3C;
  --surface:          #122448;
  --surface-2:        #163057;
  --surface-3:        #1B3660;
  --field:            #0C1E40;
  --glass:            rgba(18,41,76,.6);
  --glass-border:     rgba(88,130,190,.24);

  --text:             #F4F7FC;
  --text-2:           #A6B8D4;
  --text-3:           #7189AE;
  --muted:            #6E82A4;

  --border:           #1E3A61;
  --hairline:         #16304F;

  --success:          #2ED158;  --success-soft: #0F3222;
  --warning:          #FFC24B;  --warning-soft: #38290A;
  --danger:           #FF6257;  --danger-soft:  #3A1512;
  --info:             #4FA3FF;  --info-soft:    #0E2748;
  --gold:             #F4CE6A;

  --grad-hero:  radial-gradient(1200px 600px at 15% -10%, rgba(1,113,203,.30), transparent 60%),
                radial-gradient(900px 500px at 100% 0%, rgba(61,211,251,.20), transparent 55%);
  --sheen:      linear-gradient(180deg, rgba(120,170,240,.14), rgba(120,170,240,0));

  --shadow-color: 220 60% 3%;
  --shadow-sm:  0 1px 2px hsl(var(--shadow-color) / .5);
  --shadow-md:  0 8px 24px -8px hsl(var(--shadow-color) / .6), 0 2px 8px -2px hsl(var(--shadow-color) / .5);
  --shadow-lg:  0 28px 60px -18px hsl(var(--shadow-color) / .7), 0 10px 24px -12px hsl(var(--shadow-color) / .55);
  --shadow-xl:  0 50px 100px -30px hsl(var(--shadow-color) / .8);
  --glow-brand: 0 24px 70px -18px rgba(1,113,203,.6);

  color-scheme: dark;
}

/* Follow the OS when the user hasn't chosen a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand:#0171cb; --brand-strong:#0171cb; --brand-2:#3DD3FB; --brand-3:#35C46A;
    --bg:#06132C; --bg-2:#0A1A3C; --surface:#122448; --surface-2:#163057; --surface-3:#1B3660;
    --field:#0C2141; --glass:rgba(18,41,76,.6); --glass-border:rgba(88,130,190,.24);
    --text:#F4F7FC; --text-2:#A6B8D4; --text-3:#7189AE; --muted:#6E82A4;
    --border:#1E3A61; --hairline:#16304F;
    --success:#2ED158; --success-soft:#0F3222; --warning:#FFC24B; --warning-soft:#38290A;
    --danger:#FF6257; --danger-soft:#3A1512; --info:#4FA3FF; --info-soft:#0E2748; --gold:#F4CE6A;
    --grad-hero: radial-gradient(1200px 600px at 15% -10%, rgba(1,113,203,.30), transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, rgba(61,211,251,.20), transparent 55%);
    --sheen: linear-gradient(180deg, rgba(120,170,240,.14), rgba(120,170,240,0));
    --shadow-color: 220 60% 3%;
    --glow-brand: 0 24px 70px -18px rgba(1,113,203,.6);
    color-scheme: dark;
  }
}