/* ===== Ashal · Color tokens ===== */
:root {
  /* --- Brand core --- */
  --ashal-blue: #0E50A8;          /* primary — royal blue */
  --ashal-blue-deep: #073C82;     /* pressed / deep panels */
  --ashal-blue-bright: #1A63C9;   /* hover / links */
  --ashal-orange: #FF6A1A;        /* secondary — primary CTA */
  --ashal-orange-deep: #E0530B;   /* orange pressed */
  --ashal-lime: #E4E92E;          /* highlight / accent */
  --ashal-green: #2FB24D;         /* success / "live" */
  --ashal-green-deep: #1E8C3A;
  --ashal-pink: #F3A6D4;          /* playful surface */
  --ashal-pink-soft: #FBD9EC;     /* tints */
  --ashal-pink-bg: #FDECF4;       /* hero / section wash (soft) */
  --ashal-magenta: #E0529E;       /* accent surface */
  --ashal-gold: #F2B628;          /* the logo mark */
  --ashal-violet: #7C5CFC;        /* discount / promo badges (web) */

  /* --- Neutrals (warm) --- */
  --ink-900: #14110F;             /* near-black text */
  --ink-700: #3A3631;
  --ink-500: #6B655D;             /* muted text */
  --ink-300: #B6AFA6;             /* disabled / hairline */
  --sand-100: #F6F2EC;            /* page off-white */
  --sand-200: #ECE5DA;            /* subtle fill */
  --white: #FFFFFF;

  /* --- Semantic aliases --- */
  --color-primary: var(--ashal-blue);
  --color-primary-hover: var(--ashal-blue-bright);
  --color-primary-press: var(--ashal-blue-deep);
  --color-cta: var(--ashal-orange);
  --color-cta-press: var(--ashal-orange-deep);
  --color-accent: var(--ashal-lime);
  --color-success: var(--ashal-green);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-color: var(--white);

  --surface-page: var(--sand-100);
  --surface-card: var(--white);
  --surface-blue: var(--ashal-blue);
  --surface-pink: var(--ashal-pink);
  --surface-orange: var(--ashal-orange);

  --border-subtle: rgba(20, 17, 15, 0.10);
  --border-strong: var(--ink-900);
  --focus-ring: var(--ashal-blue-bright);
}