/* ═══════════════════════════════════════════════════════════════════
   SHUCHI শুচি — "Shuchi Blue" Theme Override
   ───────────────────────────────────────────────────────────────────
   Navy blue + cream colourway inspired by the brand identity mark.
   Primary:   Deep navy  #1C2B5E / #0F1A3D
   Surface:   Warm cream #F2EDD8 / #E8E3CC
   Accent:    Steel blue #4A6FA5  (replaces sage for interactive UI)

   HOW TO USE:
     In each HTML file, replace:
       <link rel="stylesheet" href="theme.css">
     with:
       <link rel="stylesheet" href="theme-blue.css">

     OR rename this file to theme.css to deploy the blue variant.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND PALETTE — BLUE OVERRIDE ─────────────────────────────── */

  /* Primary accent (steel/indigo blue — replaces sage) */
  --sage:           #2D4E8F;   /* mid-range interactive blue */
  --sage-light:     #7B9EC9;   /* lighter blue for Bangla logo text */
  --sage-pale:      #D0DCF0;   /* tinted blue wash backgrounds */

  /* Backgrounds — warm cream (same feel, slightly cooler) */
  --cream:          #F2EDD8;
  --cream-deep:     #E6E0C8;
  --white:          #F8F5EC;

  /* Dark tones — deep navy (replaces forest green) */
  --dark:           #0F1A3D;   /* nav bar, headings — darkest navy */
  --dark-mid:       #1C2B5E;   /* secondary dark navy */

  /* Gold accent — unchanged (works with both themes) */
  --gold:           #B8975A;
  --gold-light:     #D4B47A;

  /* Text — navy tinted (replaces green-tinted dark text) */
  --text:           #1A253D;
  --text-soft:      #4A5A7A;

  /* ── SEMANTIC ALIASES ──────────────────────────────────────────── */
  --color-bg:           var(--cream);        /* page background */
  --color-bg-deep:      var(--cream-deep);   /* card / input backgrounds */
  --color-bg-surface:   var(--white);        /* elevated surfaces */
  --color-nav-bg:       var(--dark);         /* top navigation background */
  --color-primary:      var(--sage);         /* buttons, badges, accents */
  --color-primary-light:var(--sage-light);   /* hover states, Bangla logo */
  --color-primary-pale: var(--sage-pale);    /* subtle tinted areas */
  --color-heading:      var(--dark);         /* h1–h6 colour */
  --color-text:         var(--text);         /* body copy */
  --color-text-muted:   var(--text-soft);    /* secondary text */
  --color-accent:       var(--gold);         /* star ratings, highlights */
  --color-accent-light: var(--gold-light);   /* lighter accent */
  --color-border:       var(--sage-a12);     /* default border colour */

  /* ── ORDER STATUS — navy-palette versions ───────────────────────── */
  --status-processing: #B8975A;   /* gold — unchanged */
  --status-sent:       #2D4E8F;   /* blue instead of sage */
  --status-delivered:  #1C2B5E;   /* dark-mid navy */
  --status-cancelled:  #a33b3b;   /* red — unchanged */

  /* ── ALPHA TOKENS — SAGE → now blue (45, 78, 143) ───────────────── */
  --sage-a3:   rgba(45, 78, 143, 0.03);
  --sage-a4:   rgba(45, 78, 143, 0.04);
  --sage-a5:   rgba(45, 78, 143, 0.05);
  --sage-a6:   rgba(45, 78, 143, 0.06);
  --sage-a7:   rgba(45, 78, 143, 0.07);
  --sage-a8:   rgba(45, 78, 143, 0.08);
  --sage-a9:   rgba(45, 78, 143, 0.09);
  --sage-a10:  rgba(45, 78, 143, 0.10);
  --sage-a12:  rgba(45, 78, 143, 0.12);
  --sage-a13:  rgba(45, 78, 143, 0.13);
  --sage-a15:  rgba(45, 78, 143, 0.15);
  --sage-a20:  rgba(45, 78, 143, 0.20);
  --sage-a25:  rgba(45, 78, 143, 0.25);
  --sage-a30:  rgba(45, 78, 143, 0.30);
  --sage-a35:  rgba(45, 78, 143, 0.35);

  /* ── ALPHA TOKENS — SAGE-LIGHT → now steel blue (123, 158, 201) ─── */
  --sage-light-a15: rgba(123, 158, 201, 0.15);
  --sage-light-a25: rgba(123, 158, 201, 0.25);
  --sage-light-a60: rgba(123, 158, 201, 0.60);

  /* ── ALPHA TOKENS — DARK → now deep navy (15, 26, 61) ──────────── */
  --dark-a01:  rgba(15, 26, 61, 0.01);
  --dark-a015: rgba(15, 26, 61, 0.015);
  --dark-a02:  rgba(15, 26, 61, 0.02);
  --dark-a03:  rgba(15, 26, 61, 0.03);
  --dark-a05:  rgba(15, 26, 61, 0.05);
  --dark-a06:  rgba(15, 26, 61, 0.06);
  --dark-a08:  rgba(15, 26, 61, 0.08);
  --dark-a10:  rgba(15, 26, 61, 0.10);
  --dark-a12:  rgba(15, 26, 61, 0.12);
  --dark-a15:  rgba(15, 26, 61, 0.15);
  --dark-a18:  rgba(15, 26, 61, 0.18);
  --dark-a25:  rgba(15, 26, 61, 0.25);
  --dark-a45:  rgba(15, 26, 61, 0.45);
  --dark-a55:  rgba(15, 26, 61, 0.55);
  --dark-a60:  rgba(15, 26, 61, 0.60);
  --dark-a72:  rgba(15, 26, 61, 0.72);
  --dark-a80:  rgba(15, 26, 61, 0.80);
  --dark-a96:  rgba(15, 26, 61, 0.96);
  --dark-a98:  rgba(15, 26, 61, 0.98);

  /* ── ALPHA TOKENS — CREAM (242, 237, 216) — slightly adjusted ────── */
  --cream-a05:  rgba(242, 237, 216, 0.05);
  --cream-a06:  rgba(242, 237, 216, 0.06);
  --cream-a08:  rgba(242, 237, 216, 0.08);
  --cream-a10:  rgba(242, 237, 216, 0.10);
  --cream-a15:  rgba(242, 237, 216, 0.15);
  --cream-a20:  rgba(242, 237, 216, 0.20);
  --cream-a25:  rgba(242, 237, 216, 0.25);
  --cream-a28:  rgba(242, 237, 216, 0.28);
  --cream-a35:  rgba(242, 237, 216, 0.35);
  --cream-a40:  rgba(242, 237, 216, 0.40);
  --cream-a45:  rgba(242, 237, 216, 0.45);
  --cream-a50:  rgba(242, 237, 216, 0.50);
  --cream-a55:  rgba(242, 237, 216, 0.55);
  --cream-a60:  rgba(242, 237, 216, 0.60);
  --cream-a70:  rgba(242, 237, 216, 0.70);
  --cream-a75:  rgba(242, 237, 216, 0.75);
  --cream-a82:  rgba(242, 237, 216, 0.82);
  --cream-a85:  rgba(242, 237, 216, 0.85);

  /* ── ALPHA TOKENS — DARK-MID → navy-mid (28, 43, 94) ───────────── */
  --dark-mid-a10: rgba(28, 43, 94, 0.10);

  /* ── ALPHA TOKENS — TEXT-SOFT (74, 90, 122) ────────────────────── */
  --text-soft-a60: rgba(74, 90, 122, 0.60);

}