/* ============================================================
   AJ Technology Services — Centralized Corporate Theme
   ============================================================
   Design Token System (Auto-Derived from public/logo.jpeg):
   - Primary: Logo Signature Royal Blue & Sky Suite (#042961 → #069bf8)
   - Secondary: Logo Deep Naval Blue & Tech Slate (#071430)
   - Accent: Logo Vivid Red Suite (#e1110d) + Logo Cyan (#14d1fc)
   - Background: Pure canvas, polished surfaces, & elevated neutrals
   - Feedback & Trust: Logo Royal Blue, WhatsApp Emerald, Status Red
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     PRIMARY PALETTE (Logo-Derived Royal Blue & Sky Suite)
     ---------------------------------------------------------- */
  --color-primary-50: #f0f7ff;
  --color-primary-100: #dceeff;
  --color-primary-200: #b9e0ff;
  --color-primary-300: #8ccdfc;
  --color-primary-400: #3fb3f9;
  --color-primary-500: #069bf8;  /* Logo Signature Sky Blue */
  --color-primary-600: #046ed9;  /* Logo Vivid Royal Blue */
  --color-primary-700: #074fa2;  /* Logo Royal Blue */
  --color-primary-800: #042961;  /* Logo Deep Royal Blue */
  --color-primary-900: #071430;  /* Logo Deep Navy */

  /* Primary Aliases */
  --color-primary: var(--color-primary-600);
  --color-primary-hover: #069bf8;
  --color-primary-active: var(--color-primary-700);
  --color-primary-soft: var(--color-primary-50);
  --color-primary-border: var(--color-primary-200);
  --color-primary-glow: rgba(4, 110, 217, 0.28);
  --color-primary-glow-strong: rgba(6, 155, 248, 0.42);

  /* ----------------------------------------------------------
     SECONDARY PALETTE (Logo-Derived Naval Blue & Tech Slate)
     ---------------------------------------------------------- */
  --color-secondary-50: #f2f6fb;
  --color-secondary-100: #e2ebf5;
  --color-secondary-200: #c8d9ec;
  --color-secondary-300: #a2bcd9;
  --color-secondary-400: #6f86a4;
  --color-secondary-500: #566f92;
  --color-secondary-600: #2b4973;
  --color-secondary-700: #042961;  /* Logo Deep Royal */
  --color-secondary-800: #03214a;  /* Logo Navy Surface */
  --color-secondary-900: #071430;  /* Logo Deep Navy */
  --color-secondary-950: #050b1c;  /* Logo Deepest Midnight */

  /* Secondary Aliases */
  --color-secondary: var(--color-secondary-900);
  --color-secondary-surface: var(--color-secondary-800);
  --color-secondary-light: var(--color-secondary-700);
  --color-secondary-deep: var(--color-secondary-950);
  --color-secondary-card: #071d3e;

  /* ----------------------------------------------------------
     ACCENT & EMBLEM — Logo Vivid Red Suite & Logo Cyan
     ---------------------------------------------------------- */
  --color-accent-red: #e1110d;             /* Logo Vivid Red */
  --color-accent-red-dark: #a40504;        /* Logo Dark Red */
  --color-accent-red-deep: #690404;        /* Logo Deep Red */
  --color-accent-red-soft: #fdecec;
  --color-accent-coral: #eb5f5b;           /* Logo Coral */
  --color-accent-cyan: #14d1fc;            /* Logo Cyan */
  --color-accent-cyan-soft: rgba(20, 209, 252, 0.15);
  --color-accent-sky: #069bf8;             /* Logo Bright Sky */
  --color-accent-sky-soft: rgba(6, 155, 248, 0.12);
  --color-accent-amber: var(--color-accent-sky); /* Legacy alias — now Logo Sky */
  --color-accent-amber-soft: rgba(6, 155, 248, 0.15);

  /* ----------------------------------------------------------
     BACKGROUND & SURFACE SHADES
     ---------------------------------------------------------- */
  --color-bg-base: #ffffff;
  --color-bg-subtle: #f7f8fc;
  --color-bg-surface: #f4f7fb;
  --color-bg-muted: #eef3f9;
  --color-bg-alt: #f3f6fa;
  --color-bg-overlay: rgba(5, 10, 28, 0.70);
  --color-bg-scrim: rgba(5, 10, 28, 0.88);

  /* Dark Canvas Surfaces */
  --color-bg-dark: var(--color-secondary-900);
  --color-bg-dark-surface: var(--color-secondary-800);
  --color-bg-dark-deep: var(--color-secondary-950);
  --color-bg-dark-subtle: #061026;
  --color-bg-dark-card: #071d3e;

  /* ----------------------------------------------------------
     TEXT & FOREGROUND SHADES
     ---------------------------------------------------------- */
  --color-text-main: #071430;        /* Logo Deep Navy / High Contrast */
  --color-text-headings: #042961;    /* Logo Deep Royal */
  --color-text-body: #3d556e;        /* Comfortable Slate Blue Reading */
  --color-text-muted: #64748b;       /* Metadata / Secondary */
  --color-text-subtle: #94a3b8;      /* Captions / Dividers */

  /* Inverse Text (On Dark Backgrounds) */
  --color-text-inverse: #ffffff;
  --color-text-inverse-heading: #ffffff;
  --color-text-inverse-body: #cbd5e1;
  --color-text-inverse-muted: #94a3b8;
  --color-text-inverse-subtle: #64748b;

  /* ----------------------------------------------------------
     BORDER & HAIRLINE SHADES
     ---------------------------------------------------------- */
  --color-border-subtle: #f1f5f9;
  --color-border: #e2e8f0;           /* Standard Hairline */
  --color-border-strong: #cbd5e1;
  --color-border-focus: var(--color-primary-400);

  /* Dark Theme Borders */
  --color-border-dark-subtle: rgba(255, 255, 255, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-border-dark-strong: rgba(4, 110, 217, 0.40);

  /* ----------------------------------------------------------
     ACCENT & FUNCTIONAL STATUS
     ---------------------------------------------------------- */
  --color-accent-emerald: #10b981;   /* WhatsApp / Success */
  --color-accent-emerald-dark: #16a34a;
  --color-accent-emerald-soft: #ecfdf5;
  --color-accent-rose: #ef4444;      /* Validation Errors */
  --color-accent-rose-soft: #fef2f2;

  /* ----------------------------------------------------------
     ENTERPRISE SHADOW SYSTEM
     ---------------------------------------------------------- */
  --shadow-color: 4 15 48;
  --theme-shadow-xs: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
  --theme-shadow-sm: 0 2px 4px 0 rgb(var(--shadow-color) / 0.06);
  --theme-shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.07), 0 2px 4px -2px rgb(var(--shadow-color) / 0.05);
  --theme-shadow-lg: 0 10px 25px -3px rgb(var(--shadow-color) / 0.09), 0 4px 6px -4px rgb(var(--shadow-color) / 0.04);
  --theme-shadow-xl: 0 20px 30px -6px rgb(var(--shadow-color) / 0.15), 0 8px 10px -6px rgb(var(--shadow-color) / 0.06);
  --shadow-brand: 0 4px 14px rgba(4, 110, 217, 0.32);
  --shadow-gold: var(--shadow-brand); /* Legacy alias — kept for safety */

  /* ----------------------------------------------------------
     LEGACY COMPATIBILITY MAPPINGS
     ---------------------------------------------------------- */
  --navy: var(--color-secondary-900);
  --navy-deep: var(--color-secondary-950);
  --navy-surface: var(--color-secondary-800);
  --navy-light: var(--color-secondary-700);
  --blue: var(--color-primary-600);
  --blue-hover: var(--color-primary-hover);
  --blue-soft: var(--color-primary-50);
  --blue-border: var(--color-primary-200);
  --sky: var(--color-accent-sky);
  --amber: var(--color-accent-sky);  /* Legacy alias — now Logo Sky */
  --ink: var(--color-text-main);
  --slate: var(--color-text-body);
  --body-text: var(--color-text-body);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --bg: var(--color-bg-base);
  --bg-surface: var(--color-bg-surface);
  --bg-tint: var(--color-bg-muted);
  --bg-alt: var(--color-bg-alt);
}