/* =====================================================================
   AnaghaHR Design Tokens — v2.0 (production design)
   Single source of truth. Every value used in a page must come from here.
   Brand: Anagha Technosoft "Navy Poster" — navy + signal orange.
   Contrast notes are measured against the surface named.
   ===================================================================== */
:root {
  /* ---------- Navy (primary brand / dark surfaces) ---------- */
  --navy-950: #050A1C;   /* footer, deepest surfaces */
  --navy-900: #0B1437;   /* PRIMARY. hero, dark sections, headings on light */
  --navy-800: #121D47;   /* raised panels on navy */
  --navy-700: #1B2A55;   /* hover on navy buttons, chart fills */
  --navy-600: #2A3866;   /* borders on navy, secondary chart fills */
  --navy-100: #E8EAF2;   /* tinted chip / badge on light */
  --navy-50:  #F3F4F8;   /* app-canvas grey inside product mockups */

  /* ---------- Text ---------- */
  --text-strong: #0B1437;      /* headings on light       18.0:1 on #fff */
  --text: #22284A;             /* body on light           14.3:1 on #fff */
  --text-muted: #5A6180;       /* secondary on light       6.1:1 on #fff, 5.7:1 on subtle */
  --text-subtle: #636988;      /* captions, placeholders   5.4:1 on #fff, 5.0:1 on subtle */
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #C9CDDD;  /* 11.3:1 on navy-900 */
  --text-on-dark-subtle: #9AA3C7; /*  7.2:1 on navy-900 */

  /* ---------- Orange (signal / action) ---------- */
  --orange-500: #F15A29;   /* BRAND orange: accents, rules, dots, text on navy (5.3:1), large display text */
  --orange-600: #F15A29;   /* ACTION fill — matches anaghatechnosoft.com buttons (white label 3.4:1, AA-large only) */
  --orange-700: #B23B12;   /* orange TEXT on white 6.0:1, cream 5.5:1 */
  --orange-hover: #D44A1C; /* action hover fill (parent brand-700) */
  --orange-100: #FFE6D9;
  --orange-50:  #FFF4EE;

  /* ---------- Neutrals / surfaces ---------- */
  --white: #FFFFFF;
  --cream: #F6F5F2;        /* warm light band — same as anaghatechnosoft.com (marquee, panels) */
  --cream-200: #EDEBE5;    /* borders / wells on cream */
  --surface-subtle: #F6F5F2;   /* alias of cream */
  --surface-tint: #F4F5F8;     /* app-canvas grey inside product mockups (parent navy-50) */
  --line: rgba(11, 20, 55, .10);
  --line-strong: rgba(11, 20, 55, .18);
  --line-on-dark: rgba(255, 255, 255, .12);
  --line-on-dark-strong: rgba(255, 255, 255, .24);

  /* ---------- Semantic ---------- */
  --success-700: #137A4B; --success-50: #E7F5EE;
  --warning-700: #8A5300; --warning-50: #FFF4DE;
  --danger-700:  #B42318; --danger-50:  #FDECEA;
  --info-700:    #1D4ED8; --info-50:    #EAF0FF;
  /* Alert body text (darker than the -700 accents for long copy) */
  --success-900: #0D5A37; --warning-900: #6B4100; --danger-900: #8C1C13; --info-900: #1E3A8A;

  /* ---------- Interaction tints ---------- */
  --line-hover: rgba(11, 20, 55, .32);        /* input hover border */
  --focus-tint: rgba(207, 69, 23, .14);       /* input focus halo */
  --danger-tint: rgba(180, 35, 24, .14);      /* invalid input focus halo */
  --frame-chrome: #EEF0F5;                    /* product-frame title bar */
  --frame-dot: #CDD1DC;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (min @375 → max @1440) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.9vw, 5rem);       /* 44 → 80  hero */
  --fs-h1:      clamp(2.5rem, 1.75rem + 3.2vw, 4rem);       /* 40 → 64  page titles */
  --fs-h2:      clamp(2rem, 1.45rem + 2.35vw, 3.25rem);     /* 32 → 52  section titles */
  --fs-h3:      clamp(1.375rem, 1.2rem + .7vw, 1.75rem);    /* 22 → 28  sub-sections */
  --fs-h4:      1.25rem;                                     /* 20  card titles */
  --fs-h5:      1.0625rem;                                   /* 17  small titles */
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);    /* 17 → 20  lede paragraphs */
  --fs-body:    1rem;                                        /* 16 */
  --fs-small:   .875rem;                                     /* 14 */
  --fs-caption: .8125rem;                                    /* 13 */
  --fs-label:   .75rem;                                      /* 12  mono uppercase labels */

  --lh-tight: 1.04;  --lh-heading: 1.12;  --lh-snug: 1.3;  --lh-body: 1.6;
  --tracking-display: -.035em;  --tracking-heading: -.025em;  --tracking-title: -.015em;
  --tracking-label: .18em;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* ---------- Spacing (4pt) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(72px, 4rem + 5vw, 128px);
  --section-y-sm: clamp(48px, 2.5rem + 3vw, 80px);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-narrow: 820px;
  --measure: 68ch;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;

  /* ---------- Radius ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 20, 55, .06);
  --shadow-sm: 0 2px 8px -2px rgba(11, 20, 55, .10), 0 1px 2px rgba(11, 20, 55, .06);
  --shadow-md: 0 12px 32px -12px rgba(11, 20, 55, .22), 0 2px 6px rgba(11, 20, 55, .05);
  --shadow-lg: 0 28px 64px -24px rgba(11, 20, 55, .35);
  --shadow-product: 0 48px 120px -36px rgba(3, 8, 30, .70), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-cta: 0 10px 28px -12px rgba(241, 90, 41, .6);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px var(--white), 0 0 0 5px var(--orange-600);
  --focus-ring-on-dark: 0 0 0 3px var(--navy-900), 0 0 0 5px var(--orange-500);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms;   /* hover, press */
  --dur-base: 220ms;   /* toggles, accordions, tabs */
  --dur-slow: 420ms;   /* reveals, modals */

  /* ---------- Z-index ---------- */
  --z-header: 50; --z-dropdown: 60; --z-overlay: 80; --z-modal: 90; --z-toast: 100;
}