/* ===== Ashal · Color tokens — OFFICIAL ashal.om identity =====
   Teal #10A0C4 + gold #FBB436 on white (assets/brand/design-tokens.md §2).
   Legacy token NAMES are kept (--ashal-blue/-orange/-pink…) because the design-system bundle
   references them in 233 places; only their VALUES point at the official palette now. */
:root {
  /* --- Brand core --- */
  --ashal-blue: #10A0C4;          /* primary — teal (name kept for the DS bundle) */
  --ashal-blue-deep: #0D7B97;     /* pressed / deep panels */
  --ashal-blue-bright: #3BB3D1;   /* hover / links */
  --ashal-orange: #FBB436;        /* accent — gold */
  --ashal-orange-deep: #E09A1F;   /* gold pressed */
  --ashal-lime: #FBB436;          /* highlight / accent → gold */
  --ashal-green: #10A0C4;         /* success/"live" carried by the brand teal */
  --ashal-green-deep: #0D7B97;
  --ashal-pink: #63C6DE;          /* soft surface → light teal */
  --ashal-pink-soft: #E3F5FB;
  --ashal-pink-bg: #F2FAFD;
  --ashal-magenta: #DC3545;       /* danger → official error red */
  --ashal-gold: #FBB436;          /* the logo mark */
  --ashal-violet: #10A0C4;

  /* --- Neutrals --- */
  --ink-900: #212529;             /* body text */
  --ink-700: #353535;             /* headings */
  --ink-500: #6C757D;             /* muted */
  --ink-300: #C2C8CE;             /* disabled / hairline */
  --sand-100: #F2FAFD;            /* page wash (light teal) */
  --sand-200: #E3F5FB;            /* 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);
  /* CTA stays TEAL, not gold: white-on-gold is ~1.9:1 and fails contrast, and the DS button
     paints its label with --text-on-color. Gold is used as an accent (badges, emphasis,
     highlights) where it sits under INK text. */
  --color-cta: var(--ashal-blue);
  --color-cta-press: var(--ashal-blue-deep);
  --color-accent: var(--ashal-orange);
  --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);
  --text-on-accent: var(--ink-900);   /* anything on gold */

  --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(33, 37, 41, 0.10);
  --border-strong: var(--ink-900);
  --focus-ring: var(--ashal-blue-bright);
}