/* ==========================================================================
   AD'S DIGITAL BUSINESS SOLUTIONS — CANONICAL DESIGN TOKENS (V3 LIGHT-FIRST)
   Canonical Domain: https://adsdigitech.com
   Version 3.0: Clean, Luminous Light Architecture & High Contrast
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. MASTER BRAND PALETTE (Brand Kit V4)
     ------------------------------------------------------------------------ */
  --color-deepest-blue: #033151;    /* Primary headings, brand typography (30%) */
  --color-dark-navy: #04496E;       /* Deep accents, dark cards */
  --color-deep-blue: #036590;       /* Section titles, strong dividers */
  --color-primary-blue: #0881AA;    /* PRIMARY CONVERSION & CTA BUTTONS (10%) */
  --color-mid-blue: #2D8CB4;        /* Secondary icons, badges, hover states */
  --color-light-blue: #70B2CE;      /* Card hover borders, subtle lines */
  --color-ice-blue: #EBF4F9;        /* Soft airy sky fill (60%) */
  --color-canvas-bg: #FFFFFF;       /* Pure white crisp main canvas */
  --color-secondary-txt: #486581;   /* Clear, high-contrast readable body text */
  --color-white: #FFFFFF;           /* Pure white */

  /* ------------------------------------------------------------------------
     2. LIGHT MODE SEMANTIC TOKENS (DEFAULT EXPERIENCE)
     ------------------------------------------------------------------------ */
  --bg-canvas: #FFFFFF;
  --bg-canvas-alt: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F0F7FB;
  --bg-dark-primary: #033151;
  --bg-dark-secondary: #04496E;
  --bg-header: rgba(255, 255, 255, 0.96);
  --bg-header-scrolled: rgba(255, 255, 255, 0.98);

  --text-primary: #033151;
  --text-secondary: #486581;
  --text-muted: #627D98;
  --text-inverse: #FFFFFF;
  --text-accent: #0881AA;

  --action-primary: #0881AA;
  --action-hover: #036590;
  --action-active: #04496E;

  --border-subtle: #E2E8F0;
  --border-card: rgba(8, 129, 170, 0.14);
  --border-focus: #0881AA;
  --border-hover: #2D8CB4;

  /* Elevation & Box Shadows */
  --shadow-sm: 0 2px 8px rgba(3, 49, 81, 0.04);
  --shadow-md: 0 8px 24px rgba(3, 49, 81, 0.06);
  --shadow-lg: 0 16px 40px rgba(3, 49, 81, 0.09);
  --shadow-cta: 0 8px 20px rgba(8, 129, 170, 0.25);
  --shadow-card: 0 4px 16px rgba(3, 49, 81, 0.05);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;      /* Buttons and form inputs */
  --radius-lg: 12px;     /* Content cards */
  --radius-xl: 16px;     /* Large containers and modals */
  --radius-pill: 9999px; /* Badges and pills */

  /* Typography System: Instrument Serif + Instrument Sans (STRICTLY NO POPPINS) */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0881AA 0%, #036590 100%);
  --gradient-hero-light: radial-gradient(circle at 50% 0%, #EBF5FA 0%, #FFFFFF 72%);
  --gradient-subtle: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

  /* Motion & Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.50s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Container */
  --container-max-w: 1240px;
  --container-gutter: 24px;
}

/* --------------------------------------------------------------------------
   3. DARK MODE SEMANTIC TOKEN OVERRIDES ([data-theme="dark"])
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-canvas: #021F34;
  --bg-canvas-alt: #01182A;
  --bg-surface: #042E4B;
  --bg-surface-subtle: #03395C;
  --bg-dark-primary: #011524;
  --bg-dark-secondary: #032842;
  --bg-header: rgba(2, 31, 52, 0.94);
  --bg-header-scrolled: rgba(2, 31, 52, 0.98);

  --text-primary: #F4F8FB;
  --text-secondary: #A6C8DE;
  --text-muted: #7A9FB8;
  --text-inverse: #021F34;
  --text-accent: #70B2CE;

  /* Palette fallback mappings for dark mode to ensure high contrast */
  --color-deepest-blue: #F4F8FB;
  --color-dark-navy: #E0EEF7;
  --color-deep-blue: #70B2CE;
  --color-secondary-txt: #A6C8DE;
  --color-canvas-bg: #021F34;
  --color-ice-blue: #03395C;

  --action-primary: #0881AA;
  --action-hover: #2D8CB4;
  --action-active: #70B2CE;

  --border-subtle: rgba(112, 178, 206, 0.2);
  --border-card: rgba(112, 178, 206, 0.25);
  --border-focus: #70B2CE;
  --border-hover: #0881AA;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
}