/* =====================================================================
   Bajrang Electricals and Engineering Works — Design Tokens
   Shared foundation for the public website, admin dashboard, worker
   dashboard, and customer portal.

   These EXTEND, not replace, the palette already established in
   bajrang-hero/style.css — same navy + electric-blue brand hues, same
   spacing/radius/motion scale. New tokens below
   are for things the hero prototype never needed: light application
   surfaces for data-dense dashboards, semantic status colors, and a
   finer type/spacing scale.
===================================================================== */

:root {
  /* ---------- 1. BRAND HUES (unchanged from bajrang-hero) ---------- */
  --color-navy-950: #05070d;
  --color-navy-900: #0a0f1e;
  --color-navy-800: #0f1830;
  --color-navy-700: #17223f;
  --color-navy-600: #223055;

  --color-electric-blue: #2f7dff;
  --color-electric-blue-light: #5aa0ff;
  --color-electric-blue-dim: rgba(47, 125, 255, 0.15);

  --color-white: #ffffff;

  --color-text-primary: #f5f7fb;
  --color-text-secondary: #aab4cc;
  --color-text-muted: #6b7690;

  /* ---------- 2. NEW: brand hues extended for light surfaces ----------
     The hero only ever needed brand colors on a dark ground. Dashboards
     and forms need the same hues at contrast ratios that work on white. */
  --color-navy-500: #3c4c82;
  --color-navy-400: #64719c;
  --color-electric-blue-dark: #1c56c9;
  --color-electric-blue-tint: #eaf2ff;

  /* ---------- 3. NEW: semantic status colors ----------
     Never needed for a one-section hero; every dashboard needs them for
     job/invoice/payment status, form validation, and alerts. */
  --color-success: #157347;
  --color-success-bg: #e7f6ee;
  --color-success-border: #bfe5cf;
  --color-warning: #9a6400;
  --color-warning-bg: #fdf2df;
  --color-warning-border: #f3ddab;
  --color-danger: #c62d3f;
  --color-danger-bg: #fbe9eb;
  --color-danger-border: #f2c1c8;
  --color-info: var(--color-electric-blue-dark);
  --color-info-bg: var(--color-electric-blue-tint);
  --color-info-border: #c7dcfb;

  /* ---------- 4. TYPOGRAPHY ----------
     IBM Plex Sans throughout: a plain, open-lettered face that stays easy
     to read at paragraph size, where the geometric Poppins it replaced was
     wide and tiring in longer text. One family covers everything — Plex
     Sans Devanagari is drawn to the same weights and proportions, so Hindi
     and English sit together on a line, and Plex Mono is used only where
     digits need to line up (table figures, ids, timestamps). */
  --font-base: 'IBM Plex Sans', 'IBM Plex Sans Devanagari', 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

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

  /* ---------- 5. SPACING (existing xs–xl kept, extended both ways) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---------- 6. LAYOUT (existing kept, extended for app shells) ---------- */
  --container-width: 1180px;
  --app-max-width: 1440px;
  --app-sidebar-width: 268px;
  --app-sidebar-collapsed-width: 76px;
  --app-header-height: 68px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- 7. MOTION (unchanged) ---------- */
  --transition-fast: 0.2s ease;
  --transition-med: 0.4s ease;

  /* ---------- 8. NEW: elevation ----------
     Used sparingly and by role, never decoratively — see components.css. */
  --shadow-sm: 0 1px 2px rgba(15, 20, 40, 0.05), 0 1px 1px rgba(15, 20, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 20, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 20, 40, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-electric-blue-dim);

  /* ---------- 9. NEW: light application surface ----------
     For the admin dashboard, worker dashboard, and customer portal —
     data-dense screens read better on a calm light ground than on the
     hero's dark navy. Brand hues carry over as text/accent/border, never
     replaced. */
  --app-bg: #f4f5fa;
  --app-surface: #ffffff;
  --app-border: #e3e6ef;
  --app-border-strong: #ccd1e0;
  --app-text-primary: #12172a;
  --app-text-secondary: #565f78;
  --app-text-muted: #8890a6;
  --app-focus-ring: 0 0 0 3px rgba(47, 125, 255, 0.28);

  /* ---------- 9b. NEW: AI-feature accent ----------
     A distinct hue from the brand's electric blue so every AI surface —
     the assistant chip, the "AI Assist" panels on service requests/jobs,
     the dashboard insights card — reads as its own consistent, deliberate
     language rather than borrowing the CTA blue used for ordinary actions.
     Used only for AI branding accents; never for a plain button or link. */
  --color-ai-accent: #6552e0;
  --color-ai-accent-light: #8a7af2;
  --color-ai-accent-dim: rgba(101, 82, 224, 0.16);
  --color-ai-accent-tint: #f2f0fd;

  /* ---------- 10. NEW: current-surface context ----------
     Every shared component (cards, tables, inputs, dropdowns, modals,
     the secondary/ghost buttons) reads color from THESE tokens rather
     than the dark or light tokens directly, so the same component CSS
     works unmodified on the public site's dark hero sections and on the
     three app shells' light surface. Default here is the dark, marketing
     context; .app-shell (below) is the one place that flips it. */
  --surface-bg: var(--color-navy-900);
  --surface-card: var(--color-navy-800);
  --surface-card-hover: var(--color-navy-700);
  --surface-border: var(--color-navy-600);
  --surface-text: var(--color-text-primary);
  --surface-text-secondary: var(--color-text-secondary);
  --surface-text-muted: var(--color-text-muted);
}

/* The three application shells (admin, worker, customer portal) opt into
   the calm light surface here — the public site keeps the default dark
   tokens above. One override point, not a duplicated component layer.
   Split into two classes on purpose: .app-shell also carries the
   sidebar+main grid layout (§14 in components.css), while .surface-light
   is the token flip alone, for any light-surface page that doesn't need a
   sidebar (this showcase, or a top-nav-style portal page). Named
   differently from the --app-surface *variable* (the white card color)
   to avoid confusing the two. */
.app-shell,
.surface-light {
  --surface-bg: var(--app-bg);
  --surface-card: var(--app-surface);
  --surface-card-hover: #fafbfd;
  --surface-border: var(--app-border);
  --surface-text: var(--app-text-primary);
  --surface-text-secondary: var(--app-text-secondary);
  --surface-text-muted: var(--app-text-muted);
}

/* Reading scale for the public website. The scale in :root is sized for
   the dashboards, where a screen holds a table and forty rows of figures;
   a visitor reading a paragraph about generator hire needs larger text
   than that. Every public page has a bare <body> and every dashboard page
   has .surface-light, so the small end of the scale moves up one step
   here and nowhere else. Headings (xl and above) are already large enough
   and stay as they are. */
body:not(.surface-light) {
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  /* #6b7690 was 4.2:1 on the navy ground — under the 4.5:1 needed for small
     text. Captions and footer copy use this colour. --surface-text-muted is
     restated because :root resolved it against the old value; a light
     section inside the page (.surface-light) still sets its own. */
  --color-text-muted: #8a95b0;
  --surface-text-muted: var(--color-text-muted);
}

/* Respect users who prefer reduced motion — same rule the hero already
   applies, restated here so every surface inherits it even before it
   loads bajrang-hero's stylesheet (which it won't; see base.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-med: 0s;
  }
}