/* ==========================================================================
   eSIM Platform — Design Tokens  ("Midnight & Signal")
   Dark is the identity. Light is fully supported.
   ========================================================================== */

:root {
  /* ---- Brand accent (identical in both themes) ---- */
  --accent:        #FFC72C;
  --accent-hover:  #FFD65C;
  --accent-press:  #E6B31F;
  --accent-ink:    #14110A;
  --accent-soft:   rgba(255, 199, 44, 0.12);
  --accent-softer: rgba(255, 199, 44, 0.06);
  --accent-line:   rgba(255, 199, 44, 0.32);
  --accent-glow:   rgba(255, 199, 44, 0.35);
  --accent-text:   #8A6100;           /* the only yellow-family text on light bg */
  --brand-go:      #E0A008;           /* wordmark yellow that survives white */

  /* ---- Light theme (default declarations) ---- */
  /* Light mode reads best when the page is a cool grey and the cards are pure
     white — that separation is what makes a dense app screen scannable. */
  --bg:            #F1F2F5;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F4F5F8;
  --surface-3:     #E7E9EE;
  --border:        #E3E5EA;
  --border-soft:   #EEF0F3;
  --text:          #16171B;
  --text-muted:    #4A4D58;
  --text-strong:   #000000;
  --text-dim:      #6E7280;
  --overlay:       rgba(20, 20, 22, 0.45);
  --shadow-sm:     0 1px 2px rgba(20,20,22,.06);
  --shadow-md:     0 1px 2px rgba(20,20,22,.06), 0 8px 24px rgba(20,20,22,.07);
  --shadow-lg:     0 24px 60px rgba(20,20,22,.14);
  --glass:         #FFFFFF;
  --hero-glow-1:   rgba(255,199,44,.28);
  --hero-glow-2:   rgba(120,160,255,.18);
  --ring-track:    #E7E9EE;
  --input-bg:      #FFFFFF;   /* inputs stay white on the grey page */
  /* Hero block = solid brand yellow in light mode, the way a carrier app opens */
  --block:         #FFC72C;
  --block-text:    #14110A;
  --block-dim:     rgba(20,17,10,.80);
  --block-hover:   rgba(20,17,10,.10);
  --block-cta:     #14110A;           /* a button on the yellow block: dark, never yellow on yellow */
  --block-cta-ink: #FFC72C;
  --hero-av-bg:    #14110A;   /* dark tile on the yellow block */
  --hero-av-ink:   #FFC72C;
  /* the deal banner flips dark so two yellow slabs never stack */
  --promo-bg:      #17181C;
  --promo-ink:     #FFFFFF;
  --promo-accent:  #FFC72C;
  --promo-btn-ink: #14110A;
  --scheme:        light;

  /* ---- Semantic ---- */
  --success: #16A34A;  --success-soft: rgba(22,163,74,.12);
  --warning: #EA7317;  --warning-soft: rgba(234,115,23,.12);
  --danger:  #DC2626;  --danger-soft:  rgba(220,38,38,.10);
  --info:    #2563EB;  --info-soft:    rgba(37,99,235,.10);

  /* ---- Type ---- */
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Kalpurush", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Bengali has its own face. Kalpurush is a real Bangladeshi typeface (Ekushey,
     SIL Open Font License), served from our own server like Font Awesome — no
     third-party request, and the CSP needs no new origin. The fallbacks after it
     are the Bengali fonts a Bangladeshi phone or desktop already has. */
  --font-bn: "Kalpurush", "Inter", "SolaimanLipi", "Nikosh", "Noto Sans Bengali", "Nirmala UI", sans-serif;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --e-out: cubic-bezier(.2,.8,.2,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 280ms;

  /* ---- Layout ---- */
  --header-h: 60px;
  --tabbar-h: 66px;
  --page-max: 1180px;
}

/* ---- Dark theme: system preference (unless user forced light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0A0A0B;
    --bg-elevated: #141416;
    --surface:     #141416;
    --surface-2:   #1C1C20;
    --surface-3:   #26262C;
    --border:      #2A2A31;
    --border-soft: #1F1F25;
    --text:        #F7F7F6;
    --text-muted:  #B0B2BB;
    --text-strong: #FFFFFF;
    --text-dim:    #8C8F99;
    --overlay:     rgba(0,0,0,.72);
    --shadow-sm:   0 1px 0 rgba(255,255,255,.03) inset;
    --shadow-md:   0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg:   0 1px 0 rgba(255,255,255,.05) inset, 0 32px 70px rgba(0,0,0,.6);
    --glass:       #0F0F11;
    --hero-glow-1: rgba(255,199,44,.20);
    --hero-glow-2: rgba(90,130,255,.16);
    --ring-track:  #26262C;
    --input-bg:    #1C1C20;
    --block:       #101014;
    --block-text:  #F6F6F5;
    --block-dim:   #A5A5AE;
    --block-hover: rgba(255,255,255,.08);
    --block-cta:     var(--accent);
    --block-cta-ink: var(--accent-ink);
    --hero-av-bg:  #FFC72C;
    --hero-av-ink: #14110A;
    --promo-bg:      #FFC72C;
    --promo-ink:     #14110A;
    --promo-accent:  #14110A;
    --promo-btn-ink: #FFC72C;
    --scheme:      dark;
    --success: #34D399;  --success-soft: rgba(52,211,153,.14);
    --warning: #FB923C;  --warning-soft: rgba(251,146,60,.14);
    --danger:  #F87171;  --danger-soft:  rgba(248,113,113,.14);
    --info:    #7CA9FF;  --info-soft:    rgba(124,169,255,.14);
    --accent-text: var(--accent);
    --brand-go:    var(--accent);
  }
}

/* ---- Dark theme: explicit user choice (wins in both directions) ---- */
:root[data-theme="dark"] {
  --bg:          #0A0A0B;
  --bg-elevated: #141416;
  --surface:     #141416;
  --surface-2:   #1C1C20;
  --surface-3:   #26262C;
  --border:      #2A2A31;
  --border-soft: #1F1F25;
  --text:        #F7F7F6;
  --text-muted:  #B0B2BB;
  --text-strong: #FFFFFF;
  --text-dim:    #8C8F99;
  --overlay:     rgba(0,0,0,.72);
  --shadow-sm:   0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-md:   0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:   0 1px 0 rgba(255,255,255,.05) inset, 0 32px 70px rgba(0,0,0,.6);
  --glass:       #0F0F11;
  --hero-glow-1: rgba(255,199,44,.20);
  --hero-glow-2: rgba(90,130,255,.16);
  --ring-track:  #26262C;
  --input-bg:    #1C1C20;
  --block:       #101014;
  --block-text:  #F6F6F5;
  --block-dim:   #A5A5AE;
  --block-hover: rgba(255,255,255,.08);
  --block-cta:     var(--accent);
  --block-cta-ink: var(--accent-ink);
  --hero-av-bg:  #FFC72C;
  --hero-av-ink: #14110A;
  --promo-bg:    #FFC72C;
  --promo-ink:   #14110A;
  --promo-accent:  #14110A;
  --promo-btn-ink: #FFC72C;
  --scheme:      dark;
  --success: #34D399;  --success-soft: rgba(52,211,153,.14);
  --warning: #FB923C;  --warning-soft: rgba(251,146,60,.14);
  --danger:  #F87171;  --danger-soft:  rgba(248,113,113,.14);
  --info:    #7CA9FF;  --info-soft:    rgba(124,169,255,.14);
  --accent-text: var(--accent);
  --brand-go:    var(--accent);
}

:root[data-theme="light"] { --scheme: light; }