/* ==========================================================================
   SmartWebMakers - Shared Design Tokens
   The genuinely cross-cutting subset of style.css's original :root block -
   colors, typography, spacing, radius/shadow - extracted so admin.css and
   portal.css can depend on this directly instead of loading the entire
   marketing stylesheet just to get the tokens they actually use.

   Deliberately does NOT include --container-width or --header-height -
   confirmed neither admin.css nor portal.css reference either variable
   anywhere; those are marketing-specific layout values that stay in
   style.css's own (now smaller) :root block, not shared tokens.

   Values here are extracted verbatim from style.css, not retyped - see
   Sprint D1 in 14-ux-redesign-and-referral-roadmap.md for the exact
   verification this matches byte-for-byte.
   ========================================================================== */

:root {
  /* Color system - see 02-brand-guidelines.md for the rationale on each */
  --color-primary: #009cda;
  --color-primary-dark: #007aad;
  --color-navy: #0b2545;
  --color-ink: #4a5568;
  --color-sky-tint: #eaf6fc;
  --color-white: #ffffff;
  --color-cta: #f36136;
  --color-cta-dark: #ef5b28;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe5a;
  --color-gold: #ffb800;
  --color-border: #dce7ef;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Radius / shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.12);
  --shadow-lg: 0 12px 32px rgba(11, 37, 69, 0.18);

  /* ======================================================================
     Sprint EE1 - Design token foundation (ADDITIVE).
     Everything below is NEW. No token above was renamed, removed, or
     re-valued - existing pages are untouched. These add the vocabulary a
     real design system needs (semantic state colours, a neutral ramp, a
     typography scale, motion) so later sprints (EE2 components onward) can
     ADOPT them and retire the scattered hardcoded values documented in the
     EE1 sprint doc. New CSS should use these; existing values migrate over
     later sprints, not in a single risky rewrite.
     ====================================================================== */

  /* --- Semantic state colours ---
     Each state has a base (for text/borders/solid fills) and a light tint
     (for subtle backgrounds like alert panels and status badges). Values
     chosen as the dominant existing spelling of each colour already in the
     codebase, so adoption changes nothing visually - it only unifies the
     5-6 drifting spellings of the same colour into one source of truth.
     --color-danger and --color-surface are already referenced with these
     exact fallback values in the code today; this promotes them to real
     tokens. */
  --color-success: #1a7a42;
  --color-success-tint: #e6f9ee;
  --color-danger: #c0392b;
  --color-danger-tint: #fdebea;
  --color-warning: #8a6d00;
  --color-warning-tint: #fff7e0;
  --color-info: #1d5fa8;
  --color-info-tint: #e8f1fc;

  /* --- Surface & neutral ramp ---
     --color-surface is the app's standard light panel/hover background
     (already used with this fallback value today). The gray ramp gives one
     consistent set of neutrals for text, borders, and backgrounds instead
     of the ad-hoc greys scattered across the stylesheets. */
  --color-surface: #f4f8fb;
  /* Sprint PP3. These three were referenced across portal.css and admin.css as
     var(--token, #hex) but never actually defined, so every use fell back to
     the literal. Defining them here at their established values makes the
     references resolve to real tokens with no visual change, and gives one
     place to adjust them. --color-surface-alt is a second, slightly cooler
     panel background; --color-primary-subtle is a pale primary tint for
     highlighted rows; --color-text-meta is the muted colour for secondary/meta
     text in the portal. */
  --color-surface-alt: #f9fafb;
  --color-primary-subtle: #eff6ff;
  --color-text-meta: #6b7280;
  --color-gray-50: #f7fafc;
  --color-gray-100: #edf2f7;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e0;
  --color-gray-400: #a0aec0;
  --color-gray-500: #718096;
  --color-gray-600: #4a5568;
  --color-gray-700: #2d3748;
  --color-gray-800: #1a202c;
  --color-gray-900: #0f1620;

  /* --- Typography scale ---
     A single modular scale to replace the 21 distinct ad-hoc font-size
     values currently hardcoded across the stylesheets. Sizes in rem; the
     project's base is 16px. Weights match the two loaded font weights per
     family (Inter 400/500, Poppins 600/700) plus the semantic names UI
     work reaches for. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  /* --- Motion ---
     Consistent durations and easings so EE3's interactions (modals,
     toasts, drawers, transitions) share one motion language rather than
     each component inventing its own timing. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}