/* ============================================================
   COLORS — Quraishi Law & Wealth
   Brand palette (from Color Palette.png):
     #0a548b ocean   #59b2e7 sky   #ef8903 amber
     #be7434 copper  #e3e9eb mist
   ============================================================ */
:root {
  /* --- Ocean blue (primary) --- */
  --c-ocean-900: #04263f;  /* deepest — dark sections, footers */
  --c-ocean-800: #073e68;  /* hover / pressed on primary */
  --c-ocean-700: #0a548b;  /* PRIMARY brand blue */
  --c-ocean-600: #1a6aa6;
  --c-ocean-500: #2f80bf;

  /* --- Sky blue (secondary) --- */
  --c-sky-600:  #3a97d6;
  --c-sky-500:  #59b2e7;   /* SECONDARY brand blue (tagline, accents) */
  --c-sky-300:  #9ed1f0;
  --c-sky-200:  #c4e3f7;
  --c-sky-100:  #e2f1fc;

  /* --- Amber (accent / CTA) --- */
  --c-amber-600: #cf7402;
  --c-amber-500: #ef8903;  /* ACCENT — calls to action, highlights */
  --c-amber-300: #f7b65e;
  --c-amber-100: #fdedd6;

  /* --- Copper (warm secondary accent) --- */
  --c-copper-600: #a3622b;
  --c-copper-500: #be7434;  /* warm bronze — editorial accents */
  --c-copper-300: #d7a474;
  --c-copper-100: #f2e3d4;

  /* --- Neutrals (cool, navy-tinted greys) --- */
  --c-white:    #ffffff;
  --c-mist-50:  #f7f9fa;
  --c-mist-100: #f1f5f7;
  --c-mist-200: #e3e9eb;   /* brand light grey — section fills, dividers */
  --c-mist-300: #cdd6db;
  --c-mist-400: #aab8c0;
  --c-ink-500:  #5e6f7c;   /* muted text */
  --c-ink-700:  #3a4a57;   /* secondary text */
  --c-ink-900:  #14202b;   /* primary text — warm near-black */

  /* --- Status --- */
  --c-success: #2e7d52;
  --c-warning: #ef8903;    /* reuse amber */
  --c-error:   #c0392b;
  --c-info:    #1a6aa6;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-bg:            var(--c-white);
  --color-surface:       var(--c-white);
  --color-surface-muted: var(--c-mist-100);
  --color-surface-sunken: var(--c-mist-200);
  --color-surface-dark:  var(--c-ocean-900);

  --color-text:          var(--c-ink-900);
  --color-text-secondary:var(--c-ink-700);
  --color-text-muted:    var(--c-ink-500);
  --color-text-inverse:  var(--c-white);
  --color-text-on-dark-muted: var(--c-sky-300);

  --color-primary:       var(--c-ocean-700);
  --color-primary-hover: var(--c-ocean-800);
  --color-primary-soft:  var(--c-sky-100);
  --color-secondary:     var(--c-sky-500);
  --color-accent:        var(--c-amber-500);
  --color-accent-hover:  var(--c-amber-600);
  --color-accent-warm:   var(--c-copper-500);

  --color-border:        var(--c-mist-300);
  --color-border-strong: var(--c-mist-400);
  --color-divider:       var(--c-mist-200);

  --color-link:          var(--c-ocean-700);
  --color-link-hover:    var(--c-ocean-800);
  --color-focus-ring:    var(--c-sky-500);
}