/* =========================================================================
   Sahayak Product Design System — Design Tokens (SHARED, fleet-wide)
   -------------------------------------------------------------------------
   The SINGLE SOURCE OF TRUTH for every product that extends
   templates/shared/_base.html. Product-neutral `--sah-*` namespace.

   THEME: premium light-mode institutional (Stage 1 of the redesign).
   Off-white canvas, deep-teal accent, Inter. This file changes only token
   VALUES — every variable NAME is preserved so existing page/component CSS
   keeps resolving. (Hardcoded literal hex still living in app.css /
   components.css / page templates is cleaned in Stage 2.)

   A hard-coded colour / size / shadow in a component is a DEFECT — use a token.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     COLOR — Primary / accent ramp (deep institutional teal)
     The "primary" scale IS the brand teal: low steps are tint fills, 600 is
     the action/link accent, 700/800 are hover / deep emphasis.
     --------------------------------------------------------------------- */
  --sah-primary-50:  #F3FBF9;  /* accent-subtle tint bg */
  --sah-primary-100: #DCF3EF;  /* soft chip / hover tint */
  --sah-primary-200: #B8E6DE;  /* accent borders / featured */
  --sah-primary-300: #8AD2C6;
  --sah-primary-400: #4FB3A4;
  --sah-primary-500: #199184;  /* focus border */
  --sah-primary-600: #0F766E;  /* primary action / link accent */
  --sah-primary-700: #115E59;  /* hover / pressed (accent-solid) */
  --sah-primary-800: #134E48;  /* deep emphasis */
  --sah-primary-900: #0D3D39;

  /* Accent scale (alias of the teal ramp; kept for back-compat). */
  --sah-accent-teal-50:  #F3FBF9;
  --sah-accent-teal-100: #DCF3EF;
  --sah-accent-teal-200: #B8E6DE;
  --sah-accent-teal-500: #199184;
  --sah-accent-teal-600: #0F766E;
  --sah-accent-teal-700: #115E59;

  /* Canonical brand hooks. */
  --sah-brand:  #115E59;   /* brand mark bg, primary button bg (accent-solid) */
  --sah-accent: #0F766E;   /* links / icons / accent (per-product remappable) */
  --sah-accent-deep:   #134E48;  /* emphasis */
  --sah-accent-subtle: #F3FBF9;  /* tint background */

  /* ---------------------------------------------------------------------
     COLOR — Neutral ramp (cool slate gray; light-mode workhorse)
     --------------------------------------------------------------------- */
  --sah-gray-0:   #FFFFFF;
  --sah-gray-50:  #F9F9FB;
  --sah-gray-100: #F0F0F3;
  --sah-gray-200: #D9D9E0;
  --sah-gray-300: #CDCED6;
  --sah-gray-400: #8B8D98;
  --sah-gray-500: #60646C;
  --sah-gray-600: #4A4E57;
  --sah-gray-700: #3A3D44;
  --sah-gray-800: #1C2024;
  --sah-gray-900: #11141A;

  /* ---------------------------------------------------------------------
     COLOR — Semantic (status). -700 = text-safe; -600 = dot/solid; -bg/-border
     = soft tint fills (on the light canvas).
     --------------------------------------------------------------------- */
  --sah-success-600: #29A383;  --sah-success-700: #197257;  /* on-track green (AA ≥4.5 on success-bg) */
  --sah-success-bg:  #E6F7ED;  --sah-success-border: #ACDEC8;

  --sah-warning-600: #FFC53D;  --sah-warning-700: #9A5A00;  /* due-soon amber (AA ≥4.5 on warning-bg) */
  --sah-warning-bg:  #FFF7C2;  --sah-warning-border: #F3D673;

  --sah-error-600:   #E5484D;  --sah-error-700:   #CE2C31;  /* overdue red */
  --sah-error-bg:    #FEEBEC;  --sah-error-border:  #FDBDBE;

  --sah-info-600:    #0588F0;  --sah-info-700:    #0D74CE;  /* informational blue */
  --sah-info-bg:     #EDF6FF;  --sah-info-border:   #B7D9F8;

  /* Verdict aliases (green / amber / red) — map onto the semantic scale. */
  --sah-verdict-green: var(--sah-success-700);
  --sah-verdict-amber: var(--sah-warning-700);
  --sah-verdict-red:   var(--sah-error-700);

  /* ---------------------------------------------------------------------
     COLOR — Semantic surface roles (use these in components, not raw scale)
     --------------------------------------------------------------------- */
  --sah-bg:            #FCFCFD;   /* page canvas */
  --sah-bg-alt:        #F9F9FB;   /* section-alt band */
  --sah-surface:       #FFFFFF;   /* cards, header, panels */
  --sah-surface-muted: #F0F0F3;   /* subtle fills, table head, hover */
  --sah-border:        #D9D9E0;   /* hairline borders */
  --sah-border-strong: #CDCED6;
  --sah-text:          #1C2024;   /* primary text */
  --sah-text-muted:    #60646C;   /* secondary text, labels */
  --sah-text-subtle:   #8B8D98;   /* placeholder / disabled */
  --sah-text-on-primary: #FFFFFF; /* text on the teal accent (on-accent) */
  --sah-link:          #0F766E;

  /* ---------------------------------------------------------------------
     Named role tokens (design-direction aliases; usable directly)
     --------------------------------------------------------------------- */
  --bg-base:        #FCFCFD;
  --bg-card:        #FFFFFF;
  --bg-elevated:    #F0F0F3;
  --accent:         #0F766E;
  --accent-dim:     #F3FBF9;
  --accent-glow:    0 1px 2px rgba(17, 94, 89, 0.18);  /* soft accent shadow */
  --danger:         #CE2C31;
  --warn:           #AB6400;
  --text-primary:   #1C2024;
  --text-secondary: #60646C;
  --text-dim:       #8B8D98;
  --border:         #D9D9E0;
  --border-accent:  #0F766E;
  --sah-accent-glow: 0 1px 2px rgba(17, 94, 89, 0.18);

  /* Canvas alias (== --sah-bg) for role-name call sites. */
  --sah-canvas:     #FCFCFD;

  /* Deep band — one deliberate high-contrast surface (final-CTA / toast).
     Deep teal anchor with light text; institutional, not washed-out. */
  --sah-bg-deep:       #134E48;   /* deep teal band */
  --sah-on-deep:       #FCFCFD;   /* light text on the deep band */
  --sah-on-deep-muted: #A7C6BF;   /* muted light text on the deep band */

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — Inter (UI + display, weight 600) + JetBrains Mono (figures).
     Display headings use Inter 600 (no separate display typeface).
     --------------------------------------------------------------------- */
  --sah-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, "Noto Sans Devanagari", sans-serif;
  --sah-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --sah-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
                   Consolas, monospace;

  /* Type scale — premium institutional. Existing step names keep working;
     role-named aliases added for clarity. */
  --sah-text-xs:   0.75rem;    /* 12px — label (uppercase 0.06em) */
  --sah-text-sm:   0.875rem;   /* 14px — small */
  --sah-text-base: 1rem;       /* 16px — body */
  --sah-text-md:   1.125rem;   /* 18px — body-lg */
  --sah-text-lg:   1.25rem;    /* 20px — h4 */
  --sah-text-xl:   1.5rem;     /* 24px — h3 */
  --sah-text-2xl:  2.25rem;    /* 36px — h2 */
  --sah-text-3xl:  3rem;       /* 48px — h1 */
  --sah-text-display: 3.75rem; /* 60px — hero display */

  /* Role-named aliases (same values; for pages that prefer role names). */
  --sah-text-h1:      3rem;
  --sah-text-h2:      2.25rem;
  --sah-text-h3:      1.5rem;
  --sah-text-h4:      1.25rem;
  --sah-text-body-lg: 1.125rem;
  --sah-text-body:    1rem;
  --sah-text-small:   0.875rem;
  --sah-text-label:   0.75rem;

  --sah-leading-tight:   1.1;    /* display / large headings */
  --sah-leading-snug:    1.25;
  --sah-leading-normal:  1.6;    /* body */
  --sah-leading-relaxed: 1.7;

  --sah-weight-normal:   400;
  --sah-weight-medium:   500;
  --sah-weight-semibold: 600;
  --sah-weight-bold:     600;    /* institutional: cap at semibold (no 700 hairline) */

  --sah-tracking-tight: -0.02em;  /* display / headings */
  --sah-tracking-wide:   0.06em;  /* eyebrows / uppercase labels */

  /* ---------------------------------------------------------------------
     SPACING — 4px base scale
     --------------------------------------------------------------------- */
  --sah-space-1:  0.25rem;
  --sah-space-2:  0.5rem;
  --sah-space-3:  0.75rem;
  --sah-space-4:  1rem;
  --sah-space-5:  1.25rem;
  --sah-space-6:  1.5rem;
  --sah-space-8:  2rem;
  --sah-space-10: 2.5rem;
  --sah-space-12: 3rem;
  --sah-space-16: 4rem;

  /* ---------------------------------------------------------------------
     RADII
     --------------------------------------------------------------------- */
  --sah-radius-sm:   6px;
  --sah-radius-md:   8px;
  --sah-radius-lg:   12px;
  --sah-radius-xl:   16px;
  --sah-radius-full: 9999px;

  /* ---------------------------------------------------------------------
     SHADOWS — soft, low-spread (depth without drama, on light)
     --------------------------------------------------------------------- */
  --sah-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sah-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sah-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --sah-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

  /* ---------------------------------------------------------------------
     BORDERS / RINGS / MOTION / LAYOUT
     --------------------------------------------------------------------- */
  --sah-border-width: 1px;
  --sah-ring: 0 0 0 3px rgba(15, 118, 110, 0.25);  /* focus ring (teal accent @ 25%) */

  --sah-transition-fast: 120ms ease;
  --sah-transition:      160ms ease;

  --sah-overlay: rgba(17, 20, 26, 0.50);  /* modal/dialog scrim */

  --sah-container-max: 1200px;
  --sah-header-height: 56px;
  --sah-z-header: 50;
  --sah-z-dropdown: 60;
}

/* =========================================================================
   PER-PRODUCT BRAND OVERRIDES
   Each product keeps the shared base and only remaps its accent. The page
   opts in with <html data-product="…"> (set from `product_key`). All products
   currently share the institutional deep-teal accent; per-product hues can be
   reintroduced here later.
   ========================================================================= */
:root[data-product="ngo"]    { --sah-accent: #0F766E; }
:root[data-product="rera"]   { --sah-accent: #0F766E; }
:root[data-product="food"]   { --sah-accent: #0F766E; }
:root[data-product="edu"]    { --sah-accent: #0F766E; }
:root[data-product="diag"]   { --sah-accent: #0F766E; }
:root[data-product="export"] { --sah-accent: #0F766E; }

/* -------------------------------------------------------------------------
   diaglab (Diagnostic Lab ERP) — medical teal.
   A DISTINCT product hue (vs the shared deep-teal): remaps the full primary
   ramp + brand/accent/ring hooks so every token-driven component (buttons,
   focus rings, badges, hero tint, pricing tiers, deep CTA band) shifts to the
   clinical teal palette. AA-checked: accent #2C7A78 on #FFF ≈ 5.1:1.
   ------------------------------------------------------------------------- */
:root[data-product="diaglab"] {
  --sah-primary-50:  #E9F3F2;
  --sah-primary-100: #D3E7E5;
  --sah-primary-200: #A9D0CD;
  --sah-primary-300: #86BEB9;
  --sah-primary-400: #6FA8A0;
  --sah-primary-500: #3E8F8C;
  --sah-primary-600: #2C7A78;
  --sah-primary-700: #1C5856;
  --sah-primary-800: #164845;
  --sah-primary-900: #103734;

  --sah-brand:         #1C5856;
  --sah-accent:        #2C7A78;
  --sah-accent-deep:   #164845;
  --sah-accent-subtle: #E9F3F2;
  --sah-accent-glow:   0 1px 2px rgba(28, 88, 86, 0.18);
  --sah-link:          #1C5856;
  --sah-ring:          0 0 0 3px rgba(44, 122, 120, 0.30);

  --accent:        #2C7A78;
  --accent-dim:    #E9F3F2;
  --border-accent: #2C7A78;

  --sah-bg-deep:       #1C5856;   /* deep teal final-CTA band */
  --sah-on-deep-muted: #A7C6BF;
}

/* -------------------------------------------------------------------------
   mfg (Manufacturing ERP) — industrial slate.
   Authoritative slate primary; brick #9E4640 is reserved for future
   risk/alert signals (no landing/login/pricing element consumes it yet, so it
   is intentionally NOT bound to a status token — binding it to --sah-error-*
   would mis-tint genuine error states). AA: accent #38465C on #FFF ≈ 9.5:1.
   ------------------------------------------------------------------------- */
:root[data-product="mfg"] {
  --sah-primary-50:  #EEF0F3;
  --sah-primary-100: #DFE3E9;
  --sah-primary-200: #C2C9D4;
  --sah-primary-300: #9AA3B4;
  --sah-primary-400: #6B7689;
  --sah-primary-500: #4A566C;
  --sah-primary-600: #38465C;
  --sah-primary-700: #26303F;
  --sah-primary-800: #1E2632;
  --sah-primary-900: #161C25;

  --sah-brand:         #26303F;
  --sah-accent:        #38465C;
  --sah-accent-deep:   #1E2632;
  --sah-accent-subtle: #EEF0F3;
  --sah-accent-glow:   0 1px 2px rgba(38, 48, 63, 0.18);
  --sah-link:          #38465C;
  --sah-ring:          0 0 0 3px rgba(56, 70, 92, 0.30);

  --accent:        #38465C;
  --accent-dim:    #EEF0F3;
  --border-accent: #38465C;

  --sah-bg-deep:       #26303F;   /* deep slate final-CTA band */
  --sah-on-deep-muted: #AAB2BF;
}