/* ==========================================================================
   AD'S DIGITAL BUSINESS SOLUTIONS : CANONICAL DESIGN TOKENS (V5 ENTERPRISE)
   Canonical Domain: https://www.adsdigitech.com
   Version 5.0: Brand Kit V5 (Cabinet Grotesk + Instrument Sans + Obsidian Slate)
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@700;800&family=Geist+Mono:wght@500;600&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. MASTER BRAND PALETTE (Brand Kit V5 Canonical Specifications)
     ------------------------------------------------------------------------ */
  --color-obsidian: #0B121A;        /* Grounded dark canvas (rgb(11, 18, 26)) */
  --color-deepest: #033151;         /* Typographic contrast & H1/H2 (rgb(3, 49, 81)) */
  --color-navy: #04496E;            /* Dark section surface (rgb(4, 73, 110)) */
  --color-deep: #036590;            /* Structural borders (rgb(3, 101, 144)) */
  --color-primary: #0881AA;         /* PRIMARY CTA ACTION (10%) (rgb(8, 129, 170)) */
  --color-mid: #2D8CB4;             /* Hover states, badges (rgb(45, 140, 180)) */
  --color-light: #70B2CE;           /* Card hover borders (rgb(112, 178, 206)) */
  --color-ice: #D4EAF4;             /* Soft surface fills (rgb(212, 234, 244)) */
  --color-canvas: #F4F8FB;          /* Primary light canvas (rgb(244, 248, 251)) */
  --color-slate: #64748B;           /* Body text & meta (rgb(100, 116, 139)) */
  --color-white: #FFFFFF;           /* Crisp elevated card surface */
  --color-surface: #FFFFFF;
  --color-surface-sub: #D4EAF4;

  /* Legacy alias tokens for seamless backward compatibility */
  --color-deepest-blue: #033151;
  --color-dark-navy: #04496E;
  --color-deep-blue: #036590;
  --color-primary-blue: #0881AA;
  --color-mid-blue: #2D8CB4;
  --color-light-blue: #70B2CE;
  --color-ice-blue: #D4EAF4;
  --color-canvas-bg: #F4F8FB;
  --color-secondary-txt: #475569;

  /* ------------------------------------------------------------------------
     2. LIGHT MODE SEMANTIC TOKENS (DEFAULT EXPERIENCE - 60-30-10 RULE)
     ------------------------------------------------------------------------ */
  --bg-canvas: #F4F8FB;
  --bg-canvas-alt: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #EBF5FA;
  --bg-dark-primary: #033151;
  --bg-dark-secondary: #04496E;
  --bg-obsidian: #0B121A;
  --bg-header: rgba(255, 255, 255, 0.94);
  --bg-header-scrolled: rgba(255, 255, 255, 0.98);

  --text-primary: #033151;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;
  --text-accent: #0881AA;

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

  --border-subtle: #D4EAF4;
  --border-card: rgba(8, 129, 170, 0.16);
  --border-card-hover: #70B2CE;
  --border-focus: #0881AA;
  --border-hover: #2D8CB4;

  /* Interactive Spotlight & Glow Tokens */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(8, 129, 170, 0.12);
  --glow-accent: rgba(8, 129, 170, 0.28);

  /* Elevation & Box Shadows (Brand Kit V5 Spec) */
  --shadow-xs: 0 1px 3px rgba(3, 49, 81, 0.04);
  --shadow-sm: 0 2px 8px rgba(3, 49, 81, 0.04);
  --shadow-md: 0 8px 24px rgba(3, 49, 81, 0.07);
  --shadow-lg: 0 16px 40px rgba(3, 49, 81, 0.10);
  --shadow-xl: 0 24px 56px -12px rgba(3, 49, 81, 0.14);
  --shadow-dark: 0 24px 56px -12px rgba(3, 49, 81, 0.25);
  --shadow-cta: 0 8px 20px rgba(8, 129, 170, 0.28);
  --shadow-cta-hover: 0 10px 24px rgba(8, 129, 170, 0.35);
  --shadow-card: 0 2px 8px rgba(3, 49, 81, 0.04);
  --shadow-card-hover: 0 12px 28px rgba(3, 49, 81, 0.09);

  /* Radii (Brand Kit V5 Tokens) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-button: 8px;  /* Buttons and form inputs */
  --radius-lg: 12px;
  --radius-card: 12px;   /* Content cards */
  --radius-modal: 16px;  /* Modals */
  --radius-xl: 16px;     /* Large containers */
  --radius-pill: 9999px; /* Badges and pills */

  /* Typography System: Cabinet Grotesk / Geist Display + Instrument Sans (Brand Kit V5) */
  --font-display: 'Cabinet Grotesk', 'Geist', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: var(--font-display);
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0881AA 0%, #036590 100%);
  --gradient-hero-light: radial-gradient(circle at 50% 20%, #D4EAF4 0%, #F4F8FB 65%);
  --gradient-subtle: linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 100%);
  --gradient-glow: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 70%);

  /* Motion & Spring Physics Curves (Brand Kit V5 Section 22) */
  --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.18s var(--ease-out-spring);
  --transition-base: 0.26s var(--ease-out-spring);
  --transition-slow: 0.40s var(--ease-out-spring);

  /* 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.92);
  --bg-header-scrolled: rgba(2, 31, 52, 0.96);

  --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.22);
  --border-card-hover: rgba(112, 178, 206, 0.45);
  --border-focus: #70B2CE;
  --border-hover: #0881AA;

  --spotlight-color: rgba(112, 178, 206, 0.16);
  --glow-accent: rgba(112, 178, 206, 0.32);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --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-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 18px 38px -8px rgba(0, 0, 0, 0.5), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}