/* ==========================================================================
   Shishir (শিশির, "dew") — genuine skincare, cash on delivery.
   Palette: dawn over wet paddy. Cool mist ground, rice-green, green-black ink,
   one shapla (water-lily) pink for price cuts, turmeric for warnings.
   Components take colour only from these tokens so both themes hold.
   ========================================================================== */

:root{
  /* ground + surfaces — paddy mist, not cream */
  --mist:#E8ECE3;
  --pearl:#F8F9F4;
  --pearl-2:#F1F3EC;
  --sunk:#DEE3D6;
  --line:#D3D9CB;
  --line-2:#BCC4B1;

  /* ink — paddy at night */
  --ink:#141A13;
  --ink-2:#424C3F;
  --ink-3:#586254;   /* 5.3:1 on --mist; #6E786A was 3.9:1 and failed AA */

  /* primary — rice green after rain */
  --paddy:#4A6A2C;   /* 5.6:1 on --pearl as link text; #6C8F45 was 3.4:1 */
  --paddy-press:#3A5621;
  --paddy-wash:#DCE5CB;
  --on-ink:#F3F6EC;

  /* accent — shapla. Price cuts and the one thing on screen that must be seen. */
  --shapla:#B2385F;  /* 5.4:1 on --pearl; #D35C82 was 3.5:1 */
  --shapla-wash:#F4DDE4;

  /* warnings — turmeric. Low stock, near expiry. */
  --turmeric:#8C5A0B;
  --turmeric-wash:#F5E6C6;

  --bad:#A02B2B;
  --bad-wash:#F6DEDB;
  --good:#2F6B3A;

  /* wallet brand chips — the colours shoppers look for, used only on the chip */
  --bkash:#D1266B;
  --nagad:#E4552C;
  --rocket:#8C3494;

  /* kantha: the running stitch, used only as the one decorative motif */
  --stitch:color-mix(in oklab,var(--paddy) 55%,transparent);

  /* radius — five steps, never one radius for everything */
  --r-1:6px; --r-2:10px; --r-3:16px; --r-4:24px; --r-5:999px;

  /* shadows — tight contact + wide negative-spread ambient */
  --sh-1:0 1px 1px rgba(20,26,19,.05), 0 2px 6px -3px rgba(20,26,19,.12);
  --sh-2:0 1px 2px rgba(20,26,19,.06), 0 14px 30px -18px rgba(20,26,19,.42);
  --sh-3:0 2px 4px rgba(20,26,19,.06), 0 30px 60px -28px rgba(20,26,19,.55);

  /* Latin glyphs come from Syne / Figtree, Bangla glyphs fall through to Anek Bangla,
     so a mixed line ("COSRX-এর সিরাম") sets each script in its own face. */
  --display:'Syne','Anek Bangla','Trebuchet MS',system-ui,sans-serif;
  --body:'Figtree','Anek Bangla','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono','Anek Bangla',ui-monospace,Menlo,monospace;
  --bangla:'Anek Bangla','Noto Sans Bengali',sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(16px,4vw,48px);
  --maxw:1240px;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mist:#0F130E; --pearl:#171C15; --pearl-2:#1C2219; --sunk:#232A20;
    --line:#2A3226; --line-2:#3A4435;
    --ink:#E8EDE0; --ink-2:#AEB8A6; --ink-3:#8E9986;
    --paddy:#9DC06E; --paddy-press:#B3D287; --paddy-wash:#243020; --on-ink:#10150E;
    --shapla:#EE88A8; --shapla-wash:#35202A;
    --turmeric:#E3B25C; --turmeric-wash:#302617;
    --bad:#E88A80; --bad-wash:#351E1C; --good:#8CCB95;
    --sh-1:0 1px 1px rgba(0,0,0,.3), 0 2px 6px -3px rgba(0,0,0,.6);
    --sh-2:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.9);
    --sh-3:0 2px 4px rgba(0,0,0,.4), 0 30px 60px -28px rgba(0,0,0,1);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --mist:#0F130E; --pearl:#171C15; --pearl-2:#1C2219; --sunk:#232A20;
  --line:#2A3226; --line-2:#3A4435;
  --ink:#E8EDE0; --ink-2:#AEB8A6; --ink-3:#8E9986;
  --paddy:#9DC06E; --paddy-press:#B3D287; --paddy-wash:#243020; --on-ink:#10150E;
  --shapla:#EE88A8; --shapla-wash:#35202A;
  --turmeric:#E3B25C; --turmeric-wash:#302617;
  --bad:#E88A80; --bad-wash:#351E1C; --good:#8CCB95;
  --sh-1:0 1px 1px rgba(0,0,0,.3), 0 2px 6px -3px rgba(0,0,0,.6);
  --sh-2:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.9);
  --sh-3:0 2px 4px rgba(0,0,0,.4), 0 30px 60px -28px rgba(0,0,0,1);
  color-scheme:dark;
}