/* ============================================================
 * KDInfotech Design System — global stylesheet entry point.
 * Consumers link THIS file. Imports only; no rules live here.
 * ============================================================ */
/* KDInfotech — Typefaces
 *   Georgia        (serif) — display / headlines. Classic, widely available serif.
 *   Gill Sans Nova (sans)  — body / UI / labels / eyebrows. Ships with Microsoft
 *                           Office / Windows; falls back to Gill Sans / Segoe UI / Helvetica / Arial.
 * Both are system fonts, so no webfont import is needed.
 * The design system intentionally uses these two families only.
 */

/* KDInfotech — Color tokens · C·2 Deep Tech
 * Logo-true chartreuse→green leads. A deep navy ink is the dark "deep-tech"
 * ground (blue lives here, as a sophisticated near-black — never a 2nd accent).
 * A muted steel-blue is the functional/secondary color (links, info, data).
 */
:root {
  /* ---- Brand: the power gradient (sampled from the logo) ---------- */
  --kdi-lime-300: #E3EA6A;
  --kdi-lime-400: #D8E130;   /* gradient top (logo) */
  --kdi-lime-500: #BCD631;   /* signature lime — highlights/eyebrows on dark */
  --kdi-green-500: #86C441;  /* gradient bottom (logo) */
  --kdi-green-600: #5E9E2E;  /* usable accent on white */
  --kdi-green-700: #437320;  /* text-safe deep green (AA on white) */
  --kdi-green-800: #335718;
  --kdi-green-900: #233C10;
  --kdi-grad-power: linear-gradient(180deg, #D8E130 0%, #A8CE3A 45%, #86C441 100%); /* @kind color */
  --kdi-grad-power-soft: linear-gradient(135deg, #EAF0C0 0%, #CFE38C 100%); /* @kind color */

  /* ---- Deep-tech navy ground (the dark surfaces) ------------------ */
  --navy-950: #08131B;
  --navy-900: #0C1A26;       /* primary dark surface (hero, footer) */
  --navy-800: #12222F;       /* raised dark card */
  --navy-700: #1A2C3A;
  --navy-border: #213340;    /* hairline on navy */

  /* ---- Functional steel-blue (secondary / supporting only) -------- */
  --blue-700: #245A8C;
  --blue-600: #2E6BA8;       /* links / info text */
  --blue-500: #4E86C4;       /* secondary data series */
  --blue-300: #9CC0E4;
  --blue-bg: #E7F0FA;        /* info soft background */

  /* ---- Neutrals: cool, lab-clean ---------------------------------- */
  --black: #000000;          /* reserved: wordmark only */
  --ink-950: #0D0F12;
  --ink-900: #14171C;        /* primary text */
  --ink-800: #20242B;
  --ink-700: #353B45;
  --ink-600: #545C68;        /* secondary text */
  --ink-500: #7C8694;        /* tertiary text / placeholders */
  --ink-400: #A3ABB7;
  --ink-300: #C9CFD8;        /* strong border */
  --ink-200: #E2E6EC;        /* default border */
  --ink-150: #EBEEF2;
  --ink-100: #F1F4F7;        /* sunken surface */
  --ink-50: #F7F9FB;         /* page background */
  --white: #FFFFFF;

  /* ---- Semantic status -------------------------------------------- */
  --status-operational: #5E9E2E;  /* brand green */
  --status-operational-bg: #EDF6E0;
  --status-info: #2E6BA8;         /* muted steel-blue (functional) */
  --status-info-bg: #E7F0FA;
  --status-warning: #C9821A;
  --status-warning-bg: #FBF1DC;
  --status-critical: #D23B3B;
  --status-critical-bg: #FBE7E7;

  /* ================================================================= */
  /* SEMANTIC ALIASES — prefer these in components                     */
  /* ================================================================= */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-disabled: var(--ink-400);
  --text-link: var(--kdi-green-700);
  --text-info: var(--blue-600);
  --text-on-accent: var(--white);
  --text-on-inverse: #DCE4EA;
  --text-on-inverse-dim: #8FA0AC;

  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-raised: var(--white);
  --surface-inverse: var(--navy-900);        /* dark sections are navy */
  --surface-inverse-raised: var(--navy-800);
  --surface-accent-soft: var(--status-operational-bg);

  --border-subtle: var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: var(--navy-border);

  --accent: var(--kdi-green-600);
  --accent-hover: var(--kdi-green-700);
  --accent-active: var(--kdi-green-800);
  --accent-soft: var(--status-operational-bg);

  --focus-ring: rgba(94, 158, 46, 0.45);

  /* deep-tech motifs */
  --grid-line-dark: rgba(255, 255, 255, 0.045);
  --glow-green: radial-gradient(circle, rgba(124,190,58,.22), transparent 66%); /* @kind color */
}

/* KDInfotech — Typography tokens */
:root {
  /* ---- Families — two fonts only: Georgia (serif) + Gill Sans Nova (sans) - */
  --font-serif: Georgia, 'Times New Roman', serif;   /* display / headlines */
  --font-sans:  'Gill Sans Nova', 'Gill Sans', 'Segoe UI', Helvetica, Arial, sans-serif; /* body / UI */
  --font-mono:  'Gill Sans Nova', 'Gill Sans', 'Segoe UI', Helvetica, Arial, sans-serif; /* labels / eyebrows — same sans so the system stays 2 fonts */

  /* ---- Weights ----------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type scale (px) — 1.25 major-third, tightened at small ------ */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 60px;
  --text-6xl: 76px;

  /* ---- Line heights ------------------------------------------------ */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---------------------------------------------- */
  --tracking-tighter: -0.02em;  /* large serif display */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;      /* mono eyebrows / labels */

  /* ---- Semantic roles ---------------------------------------------- */
  --type-display: var(--weight-semibold) var(--text-5xl)/var(--leading-tight) var(--font-serif);
  --type-h1: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-serif);
  --type-h2: var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-serif);
  --type-h3: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-serif);
  --type-h4: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body-lg: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label: var(--weight-medium) var(--text-sm)/1.2 var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-mono: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-eyebrow: var(--weight-medium) var(--text-2xs)/1.2 var(--font-mono);
}

/* KDInfotech — Spacing tokens (4px base grid) */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Semantic */
  --gap-inline: var(--space-2);     /* between inline siblings (icon+label) */
  --gap-stack: var(--space-4);      /* between stacked blocks */
  --gap-section: var(--space-16);   /* between page sections */
  --pad-control: var(--space-3);    /* inside inputs / buttons */
  --pad-card: var(--space-6);       /* inside cards */
  --container-max: 1200px;
  --container-prose: 680px;
}

/* KDInfotech — Radius tokens · C·2 Deep Tech
 * Softened from the original: friendly-but-precise, matching the SaaS read.
 */
:root {
  --radius-none: 0;
  --radius-xs: 4px;     /* tags, chips */
  --radius-sm: 8px;     /* buttons, inputs */
  --radius-md: 12px;    /* cards, panels */
  --radius-lg: 16px;    /* large surfaces */
  --radius-xl: 20px;    /* modals, hero cards */
  --radius-pill: 999px; /* status pills, avatars */
}

/* KDInfotech — Elevation tokens
 * Crisp, cool-tinted shadows. Low spread, never blurry blobs.
 */
:root {
  --shadow-xs: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06), 0 1px 3px rgba(20, 23, 28, 0.08);
  --shadow-md: 0 2px 4px rgba(20, 23, 28, 0.05), 0 4px 12px rgba(20, 23, 28, 0.08);
  --shadow-lg: 0 4px 8px rgba(20, 23, 28, 0.06), 0 12px 28px rgba(20, 23, 28, 0.12);
  --shadow-xl: 0 8px 16px rgba(20, 23, 28, 0.08), 0 24px 56px rgba(20, 23, 28, 0.16);

  /* Hairline ring — used in place of/with shadow on flat cards */
  --ring-hairline: inset 0 0 0 1px var(--border-default);
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* Inner sunken (wells, code blocks) */
  --shadow-inset: inset 0 1px 2px rgba(20, 23, 28, 0.06);
}

/* KDInfotech — Motion tokens
 * Fast, precise, mechanical. Ease-out for entrances; no bounce.
 */
:root {
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast: 140ms;    /* @kind other */
  --dur-base: 200ms;    /* @kind other */
  --dur-slow: 320ms;    /* @kind other */

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-standard: cubic-bezier(0.3, 0, 0, 1);    /* @kind other */

  --transition-control: background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out),
                        transform var(--dur-fast) var(--ease-out);
}

/* KDInfotech — base element defaults & helpers
 * Light-touch resets so specimens/components inherit the brand by default.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--kdi-lime-300); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

/* Utility: mono eyebrow / kicker used across the brand */
.kdi-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-hover);
}