/*

  Sanjal Enterprises — Design Tokens (site-wide)

  Full token set for hub pages (ai-suite/solutions/consulting/platform)

  plus aliases for style.css / nav-mega.css.

  Light palette aligned with homepage (home.css); dark mode stays homepage-only.

*/



/* Web fonts are loaded via <link> in includes/header.php (CSP style-src allowlist). */

:root {

  /* Brand — homepage light values */

  --color-ink-navy: #0A1428;

  --color-paper-white: #F8F9FB;

  --color-graphite: #2B3245;

  --color-signal-teal: #0B948C;

  --color-brass-gold: #8A6818;

  --color-coral: #E5484D;



  /* Tints / shades */

  --color-ink-navy-90: #0D1730;

  --color-ink-navy-70: #1B2740;

  --color-teal-10: rgba(11, 148, 140, 0.10);

  --color-teal-20: rgba(11, 148, 140, 0.20);

  --color-teal-dark: #087A74;

  --color-gold-10: rgba(150, 115, 30, 0.12);

  --color-gold-dark: #6F5414;

  --color-coral-10: rgba(229, 72, 77, 0.1);

  /* ~WCAG AA on paper for small muted copy (~4.7:1+) */

  --color-graphite-70: rgba(10, 20, 40, 0.72);

  --color-graphite-40: rgba(10, 20, 40, 0.45);

  --color-white: #FFFFFF;

  --color-border: #D4DAE4;

  --color-border-dark: rgba(247, 248, 250, 0.16);



  /* Semantic — stronger body/mute contrast than previous 0.84 / 0.62 */

  --color-bg: var(--color-paper-white);

  --color-bg-soft: #EEF1F6;

  --color-bg-inverse: var(--color-ink-navy);

  --color-surface: var(--color-white);

  --color-surface-inverse: var(--color-ink-navy-90);

  --color-text: rgba(10, 20, 40, 0.90);

  --color-text-inverse: #F7F8FA;

  --color-text-muted: rgba(10, 20, 40, 0.70);

  --color-text-on-dark: #F7F8FA;

  --color-text-on-dark-muted: rgba(247, 248, 250, 0.82);

  --color-heading: var(--color-ink-navy);

  --color-accent: var(--color-signal-teal);

  --color-accent-secondary: var(--color-brass-gold);

  --color-danger: var(--color-coral);

  --color-link: var(--color-signal-teal);

  --color-focus-ring: var(--color-signal-teal);



  /* Short aliases used by products.css / older catalog */

  --ink-navy: var(--color-ink-navy);

  --paper-white: var(--color-paper-white);

  --graphite: var(--color-graphite);

  --signal-teal: var(--color-signal-teal);

  --brass-gold: var(--color-brass-gold);

  --coral: var(--color-coral);

  --surface-0: var(--color-paper-white);

  --surface-1: var(--color-white);

  --surface-2: #EEF1F6;

  --surface-3: #E8ECF3;

  --border-subtle: rgba(10, 20, 40, 0.12);

  --border-strong: rgba(10, 20, 40, 0.18);

  --text-primary: var(--color-ink-navy);

  --text-secondary: var(--color-text);

  --text-muted: var(--color-text-muted);

  --text-inverse: var(--color-text-inverse);

  --accent-primary: var(--color-signal-teal);

  --accent-secondary: var(--color-brass-gold);

  --accent-soft: var(--color-teal-10);

  --accent-line: rgba(11, 148, 140, 0.28);

  --gold-soft: var(--color-gold-10);

  --hair: rgba(10, 20, 40, 0.12);

  --hair-2: rgba(10, 20, 40, 0.18);

  --glow-btn: 0 8px 24px rgba(11, 148, 140, 0.28);

  --card-shadow: 0 1px 2px rgba(10, 20, 40, 0.04), 0 12px 28px rgba(10, 20, 40, 0.055);

  --card-shadow-hover: 0 8px 18px rgba(10, 20, 40, 0.07), 0 22px 48px rgba(10, 20, 40, 0.1), 0 0 0 1px rgba(11, 148, 140, 0.14);

  --card-shadow-hover-gold: 0 8px 18px rgba(10, 20, 40, 0.07), 0 22px 48px rgba(138, 104, 24, 0.12), 0 0 0 1px rgba(138, 104, 24, 0.22);

  --glow-btn-gold: 0 8px 24px rgba(138, 104, 24, 0.28);

  --btn-primary-text: #FFFFFF;



  /* style.css / nav-mega.css aliases */

  --color-navy: var(--color-ink-navy);

  --color-offwhite: var(--color-paper-white);

  --color-slate: var(--color-graphite);

  --color-teal: var(--color-signal-teal);

  --color-gold: var(--color-brass-gold);

  --font-sans: var(--font-body);

  --container-width: var(--container-max);



  /* Typography */

  --font-display: 'General Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;



  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);

  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);

  --fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);

  --fs-h5: 1.0625rem;

  --fs-body-lg: 1.125rem;

  --fs-body: 1rem;

  --fs-body-sm: 0.875rem;

  --fs-caption: 0.75rem;



  --lh-heading: 1.15;

  --lh-body: 1.68;

  --lh-tight: 1.3;



  --fw-regular: 400;

  --fw-medium: 500;

  --fw-semibold: 600;

  --fw-bold: 700;



  /* Spacing — balanced rhythm (avoid huge empty bands on interior pages) */

  --space-1: 0.25rem;

  --space-2: 0.5rem;

  --space-3: 0.75rem;

  --space-4: 1rem;

  --space-5: 1.5rem;

  --space-6: 2rem;

  --space-7: 2.5rem;

  --space-8: 3rem;

  --space-9: 4rem;

  --space-10: 5rem;



  --section-padding-desktop: 5.5rem;

  --section-padding-tablet: 4.25rem;

  --section-padding-mobile: 3rem;



  /* Grid & layout */

  --grid-columns: 12;

  --grid-gutter: 1.5rem;

  --container-max: 1280px;

  --container-max-wide: 1440px;

  --content-max: var(--container-max);

  --container-padding-inline: 1.5rem;

  --header-height: 68px;



  /* Radius & elevation (homepage-aligned) */

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 18px;

  --radius-pill: 999px;



  --shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.04);

  --shadow-md: 0 8px 24px rgba(10, 20, 40, 0.08);

  --shadow-lg: 0 16px 48px rgba(10, 20, 40, 0.12);



  /* Motion */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 150ms;

  --duration-base: 250ms;

  --duration-slow: 450ms;



  /* Z-index */

  --z-nav: 100;

  --z-dropdown: 110;

  --z-overlay: 120;

  --z-modal: 130;

  --z-toast: 140;

  --z-skip-link: 150;

}