/*
  theme.css — CityTask color scheme & visual identity
  ------------------------------------------------------------
  This is the ONE file to touch when re-skinning the site.
  Every color, gradient and shadow used anywhere in core.css /
  pages.css is a var(--token) pointing back to this file — change
  a value here and it updates everywhere it's used, site-wide.

  Structure:
    1. Raw palette  — the actual hex swatches (rarely edited directly)
    2. Semantic tokens — what components actually consume (edit these
       to reassign which swatch plays which role, e.g. swap the brand
       color without renaming anything downstream)
*/

:root {

  /* ---- 1. Raw palette ---------------------------------------- */

  /* Brand / primary (green) scale */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-900: #064e3b;

  /* Accent teal — used in a couple of brand gradients */
  --color-accent-400: #2dd4bf;
  --color-accent-500: #14b8a6;

  /* Neutral / slate scale */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  /* Warning / "pain point" amber (used once, on the tourism cards) */
  --color-warn-50: #fffbeb;
  --color-warn-200: #fde68a;

  /* Highlight amber — solid, not the pale tint above. Used only by the
     announcement/offer topbar, deliberately warm against the site's
     cool green + slate palette so a promo reads as "look here" instead
     of blending into the same dark tone as the scrolled nav/footer. */
  --color-highlight-400: #fbbf24;

  --color-white: #fff;

  /* WhatsApp green — fixed on purpose. Every CTA button (.primary, the nav's
     WhatsApp pill, the floating WhatsApp button) reads from this, NOT from
     the brand scale above, so the "click here" color stays constant and
     recognizable even when the site's brand palette changes. Keep these two
     values identical across every theme*.css file. */
  --color-whatsapp-500: #10b981;
  --color-whatsapp-600: #059669;

  /* ---- 2. Semantic tokens (what components use) --------------- */

  /* Base surfaces & text */
  --color-bg: var(--color-slate-50);
  --color-bg-alt: var(--color-slate-100);
  --color-surface: var(--color-white);
  --color-border: var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);
  --color-text: var(--color-slate-900);
  --color-text-soft: var(--color-slate-600);
  --color-text-muted: var(--color-slate-500);

  /* Dark surfaces (header-on-scroll is separate; this is banners/footer) */
  --color-dark-bg: var(--color-slate-900);
  --color-dark-bg-2: var(--color-slate-800);
  --color-darkest: var(--color-slate-950);

  /* Brand green — used for CTAs, links, icons, highlighted text */
  --color-brand: var(--color-primary-600);
  --color-brand-strong: var(--color-primary-700);
  --color-brand-light: var(--color-primary-500);
  --color-brand-lighter: var(--color-primary-400);
  --color-brand-soft: var(--color-primary-100);
  --color-brand-softer: var(--color-primary-50);
  --color-brand-border: var(--color-primary-200);

  /* Action / CTA — always WhatsApp green, deliberately independent of the
     brand scale above (see the raw primitives near the top of this file) */
  --color-action: var(--color-whatsapp-600);
  --color-action-light: var(--color-whatsapp-500);

  /* Announcement/offer topbar — bright + dark text, not another dark bar */
  --color-highlight-bg: var(--color-highlight-400);
  --color-highlight-text: var(--color-slate-900);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-primary-600), var(--color-accent-400));
  --gradient-hero-em: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-500), var(--color-primary-500));
  --gradient-dark: linear-gradient(110deg, var(--color-slate-900), var(--color-slate-800));
  --gradient-footer-cta: linear-gradient(100deg, var(--color-primary-900), var(--color-slate-900));

  /* Shadows & tints (rgba values kept as tokens so they track the palette) */
  --tint-primary-glow: rgba(16, 185, 129, .12);
  --tint-action-shadow: rgba(5, 150, 105, .22);
  --tint-primary-ring: rgba(16, 185, 129, .1);
  --tint-card-shadow: rgba(15, 23, 42, .08);
  --tint-sticky-shadow: rgba(0, 0, 0, .25);
  /* Translucent nav background once scrolled — kept in sync with --color-surface
     (white in every current scheme); update this if a theme ever gives the
     site a non-white surface color. */
  --tint-nav-scroll-bg: rgba(255, 255, 255, .92);
}

/* Typography lives in font.css, not here — color and type are independent
   axes you may want to swap separately (see font.css / font2.css / etc.) */