/* Shabel Marketing — brand layer over the Organic design system.

   The system's structure is untouched: same roles, same 100–900 ramps, same
   perceptual lightness steps, same radii and elevation shapes. Only the hue
   moves — warm terracotta/sage becomes azure/sky — so every component keeps
   the visual weight it was designed with.

   Load order matters: this file must come AFTER the design system's
   styles.css in every page's <helmet>. */

:root {
  /* Ground + ink */
  --color-bg: #edf4fc;
  --color-surface: #dcebf9;
  --color-text: #0f2032;

  /* Roles */
  --color-accent: #3585d6;     /* azure — the primary voice */
  --color-accent-2: #43b6e8;   /* sky — the genuine second voice */

  --color-divider: color-mix(in srgb, #0f2032 15%, transparent);

  /* Neutrals — cooled, so greys sit inside the sky rather than on top of it */
  --color-neutral-100: #f7fafd;
  --color-neutral-200: #e9f1f9;
  --color-neutral-300: #d3e1ee;
  --color-neutral-400: #b1c4d8;
  --color-neutral-500: #92a6bb;
  --color-neutral-600: #74879d;
  --color-neutral-700: #57687e;
  --color-neutral-800: #3c4b5e;
  --color-neutral-900: #16283a;

  /* Azure ramp */
  --color-accent-100: #eef5ff;
  --color-accent-200: #d8e9ff;
  --color-accent-300: #b4d5fb;
  --color-accent-400: #81b6f2;
  --color-accent-500: #4f97e4;
  --color-accent-600: #2c79c8;
  --color-accent-700: #1b5c9e;
  --color-accent-800: #114274;
  --color-accent-900: #0a2a4e;

  /* Sky ramp */
  --color-accent-2-100: #e8f8ff;
  --color-accent-2-200: #ccefff;
  --color-accent-2-300: #a4e0fa;
  --color-accent-2-400: #72cdf2;
  --color-accent-2-500: #43b6e8;
  --color-accent-2-600: #2296cb;
  --color-accent-2-700: #0f77a5;
  --color-accent-2-800: #08567a;
  --color-accent-2-900: #053a54;

  /* Elevation — re-tinted to the cool ink so shadows read as depth, not dirt */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #16283a 14%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, #16283a 15%, transparent);
  --shadow-lg: 0 14px 36px color-mix(in srgb, #16283a 20%, transparent);

  /* ── Extended voices ──────────────────────────────────────────────────────
     Three further ramps on the same perceptual lightness steps as the azure
     and sky ones, so a 200 is a 200 whichever hue it comes from. They are
     supporting voices, never the primary: azure still carries every action.
       accent-3  violet — the depth note (video, motion, premium surfaces)
       accent-4  teal   — the performance note (search, ads, measurement)
       accent-5  gold   — the scarce one. Used sparingly: it marks what is
                          worth paying attention to, which is what makes a
                          page read as expensive rather than decorated. */

  --color-accent-3: #8a6ee6;   /* violet */
  --color-accent-3-100: #f3effe;
  --color-accent-3-200: #e5dcfd;
  --color-accent-3-300: #cbbcf9;
  --color-accent-3-400: #a894f2;
  --color-accent-3-500: #8a6ee6;
  --color-accent-3-600: #6d4fcb;
  --color-accent-3-700: #5439a2;
  --color-accent-3-800: #3d2878;
  --color-accent-3-900: #281851;

  --color-accent-4: #34b3a4;   /* teal */
  --color-accent-4-100: #e8faf7;
  --color-accent-4-200: #cbf2ec;
  --color-accent-4-300: #9ce3da;
  --color-accent-4-400: #66cdc1;
  --color-accent-4-500: #34b3a4;
  --color-accent-4-600: #1c9488;
  --color-accent-4-700: #0f7369;
  --color-accent-4-800: #0a544c;
  --color-accent-4-900: #063833;

  --color-accent-5: #d49c2c;   /* gold */
  --color-accent-5-100: #fdf5e6;
  --color-accent-5-200: #f9e8c6;
  --color-accent-5-300: #f2d495;
  --color-accent-5-400: #e6b95f;
  --color-accent-5-500: #d49c2c;
  --color-accent-5-600: #b57e17;
  --color-accent-5-700: #8e6110;
  --color-accent-5-800: #68460b;
  --color-accent-5-900: #452e06;

  /* Composites built from the ramps — one place to retune the premium layer */
  --sm-spectrum: linear-gradient(100deg, var(--color-accent-700), var(--color-accent-3-600) 34%, var(--color-accent-2-600) 62%, var(--color-accent-4-700) 82%, var(--color-accent-700));
  --sm-hairline: linear-gradient(90deg, var(--color-accent), var(--color-accent-3-400) 38%, var(--color-accent-2) 70%, var(--color-accent-4-400));
  --sm-glow-lg: 0 30px 70px -34px color-mix(in srgb, var(--color-accent-800) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-accent-3-400) 22%, transparent);
}