/* HAKAWIN store — design tokens (proposal, not approved). Fonts: SIL OFL 1.1, embedded locally. */
@font-face{font-family:"Tajawal";font-weight:500;font-display:swap;src:url("../fonts/Tajawal/Tajawal-Medium.ttf") format("truetype")}
@font-face{font-family:"Tajawal";font-weight:700;font-display:swap;src:url("../fonts/Tajawal/Tajawal-Bold.ttf") format("truetype")}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:600;font-display:swap;src:url("../fonts/BalooBhaijaan2/BalooBhaijaan2-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:700;font-display:swap;src:url("../fonts/BalooBhaijaan2/BalooBhaijaan2-Bold.ttf") format("truetype")}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:800;font-display:swap;src:url("../fonts/BalooBhaijaan2/BalooBhaijaan2-ExtraBold.ttf") format("truetype")}

/* Option A (default): cream · soft calm pink · mocha · muted gold */
:root, [data-theme="a"]{
  --bg:#FBF6EE; --bg-2:#F5ECDF; --surface:#FFFFFF;
  --ink:#4A3428;        /* body text            10.77:1 on --bg */
  --muted:#6E5446;      /* secondary text        6.46:1 on --bg */
  --primary:#6B4A3A;    /* mocha: buttons/links  7.32:1 with --on-primary */
  --primary-hover:#583C2F;
  --on-primary:#FBF6EE;
  --accent:#E8B9BB;     /* soft pink, decorative only */
  --accent-tint:#F4DCDC;/* pink surface (ink on it 8.89:1) */
  --accent-ink:#9C4A5A; /* rose text             5.51:1 on --bg */
  --gold:#C9A24A;       /* decorative only (2.23:1 — never for text) */
  --gold-tint:#F6E9D2;
  --gold-ink:#7A5C18;   /* small gold text       5.79:1 on --bg, 5.19:1 on --gold-tint */
  --line:#E7DACB; --line-strong:#9A8270; /* input borders 3.62:1 on white (WCAG 1.4.11) */
  --error:#B3261E;      /* 6.08:1 on --bg */
  --error-tint:#FBEAE8;
  --focus:#6B4A3A;
  --wm:url("../assets/watermark-overlay-a.svg");
  --wordmark:url("../assets/wordmark-a.svg");
}
/* Option B (alternative): cream · muted teal · warm coral · mustard (echoes approved T3 cover) */
[data-theme="b"]{
  --bg:#F8EFE3; --bg-2:#F1E4D2; --surface:#FFFFFF;
  --ink:#233B3A;        /* 10.49:1 */
  --muted:#5C6B6A;      /*  4.90:1 */
  --primary:#1F6E69;    /* white on it 6.01:1 */
  --primary-hover:#185A56;
  --on-primary:#FFFFFF;
  --accent:#E07A5F;     /* coral, decorative */
  --accent-tint:#FBE3DA;
  --accent-ink:#A9472F; /* 5.08:1 */
  --gold:#E3B04B;       /* mustard, decorative (ink on it 6.02:1) */
  --gold-tint:#F8EACB;
  --gold-ink:#7A5A1E;   /* 5.58:1 */
  --line:#E6D8C6; --line-strong:#7C8B86;
  --error:#B3261E; --error-tint:#FBEAE8; --focus:#1F6E69;
  --wm:url("../assets/watermark-overlay-b.svg");
  --wordmark:url("../assets/wordmark-b.svg");
}
:root{
  --f-display:"Baloo Bhaijaan 2", "Tajawal", sans-serif;
  --f-body:"Tajawal", sans-serif;
  /* type scale (mobile → desktop via clamp) */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem; --t-lg:1.25rem;
  --t-xl:clamp(1.375rem,1.1rem + 1vw,1.75rem);
  --t-2xl:clamp(1.75rem,1.3rem + 2vw,2.5rem);
  --t-3xl:clamp(2.125rem,1.4rem + 3.2vw,3.5rem);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  --shadow-1:0 1px 2px rgba(74,52,40,.06),0 4px 14px rgba(74,52,40,.06);
  --shadow-2:0 2px 4px rgba(74,52,40,.06),0 14px 34px rgba(74,52,40,.10);
  --tap:48px;
}