/* ===========================================================================
   Hardy IT — design tokens
   Palette derived from the Hardy IT logo (teal → lime gradient).
   Lifted verbatim from the approved mockup (brief-mockup-conversion.md FR-C1.1) -
   values, names and grouping unchanged. Component styles live in site.css and
   reference these tokens only (FR-C1.2).
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --teal-50:  #E6F6F5;
  --teal-100: #C2EAE8;
  --teal-300: #4FC7C1;
  --teal-400: #22B3AC;
  --teal-500: #12A5A0;   /* primary */
  --teal-600: #0D8A85;   /* hover */
  --teal-700: #0A6F6B;
  --teal-900: #063F3D;

  --lime-50:  #F2F8E4;
  --lime-100: #E2F0C4;
  --lime-400: #A5D34F;
  --lime-500: #8DC63F;   /* accent, from the "IT" in the logo */
  --lime-600: #74A82F;
  --lime-700: #5B841F;

  --brand-gradient: linear-gradient(120deg, var(--lime-500) 0%, var(--teal-500) 100%);

  /* --- Neutrals (light surface) ----------------------------------------- */
  --ink-900: #0C1618;   /* headings */
  --ink-700: #2A3B3E;   /* body */
  --ink-500: #5A6E71;   /* secondary text */
  --ink-400: #7D9094;   /* muted */
  --line:    #E2E9EA;
  --surface: #FFFFFF;
  --surface-2: #F5F9F9;
  --surface-3: #EDF4F4;

  /* --- Neutrals (dark surface) ------------------------------------------ */
  --dk-bg:    #081312;
  --dk-bg-2:  #0D1B1A;
  --dk-card:  #12211F;
  --dk-line:  rgba(255,255,255,.10);
  --dk-text:  #EAF3F2;
  --dk-text-2:#A9C0BE;
  --dk-muted: #7E9997;

  /* --- Severity: light surface ------------------------------------------ */
  --sev-red-bg:     #FDECEA;
  --sev-red-text:   #9E1F17;
  --sev-red-line:   #F3C4BF;
  --sev-amber-bg:   #FCF2DF;
  --sev-amber-text: #7A4B00;   /* dark amber — passes AA on its tint */
  --sev-amber-line: #EFD8A8;
  --sev-green-bg:   #E7F6EE;
  --sev-green-text: #14663A;
  --sev-green-line: #BCE3CD;
  --sev-info-bg:    #EDF1F2;
  --sev-info-text:  #47585B;
  --sev-info-line:  #D6DEDF;

  /* --- Severity: dark surface ------------------------------------------- */
  --sev-red-bg-dk:     rgba(255,107,94,.14);
  --sev-red-text-dk:   #FF9C92;
  --sev-red-line-dk:   rgba(255,107,94,.32);
  --sev-amber-bg-dk:   rgba(255,183,64,.14);
  --sev-amber-text-dk: #FFC65C;
  --sev-amber-line-dk: rgba(255,183,64,.32);
  --sev-green-bg-dk:   rgba(76,209,132,.14);
  --sev-green-text-dk: #63D897;
  --sev-green-line-dk: rgba(76,209,132,.32);
  --sev-info-bg-dk:    rgba(255,255,255,.07);
  --sev-info-text-dk:  #A9C0BE;
  --sev-info-line-dk:  rgba(255,255,255,.14);

  /* --- Type -------------------------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.4rem, 1.2rem + 3.4vw, 3.9rem);
  --fs-h1:      clamp(2.1rem, 1.3rem + 2.4vw, 3.1rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem);
  --fs-h3:      1.22rem;
  --fs-body:    1.02rem;
  --fs-sm:      .9rem;
  --fs-xs:      .8rem;
  --lh-tight:   1.08;
  --lh-body:    1.65;

  /* --- Space, radius, shadow -------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(12,22,24,.05);
  --shadow-md: 0 4px 16px rgba(12,22,24,.07);
  --shadow-lg: 0 18px 48px rgba(12,22,24,.10);
  --container: 1200px;

  /* --- Breakpoints (FR-C5.6, preserved as tokens) ----------------------- */
  --bp-md: 980px;
  --bp-sm: 640px;

  /* --- Brand constants used as ink on the accent/gradient surfaces.
         Present as literals in the mockup's own component CSS (.btn--accent,
         .cta-band); promoted to tokens here so no component rule carries a raw
         hex (FR-C1.2). Not part of the mockup's :root, added deliberately. --- */
  --ink-on-accent: #16240A;   /* text on lime accent (btn--accent) */
  --ink-on-gradient: #06201F; /* text on the brand-gradient CTA band */
}