/* ============================================================
   akuig Design System — Colours & Type
   Canonical tokens for the akuig brand and the Telepath AI
   product surface. British spellings used throughout.
   ============================================================ */

/* ---- Web fonts ----------------------------------------------
   Brand display face: Telugu MN (uploaded, locally hosted).
   Body + mono stacks are Google-Fonts hosted with a system
   fallback in case CDN is unavailable.
   ----------------------------------------------------------- */
@font-face {
  font-family: 'Telugu MN';
  src: url('fonts/TeluguMN.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Telugu MN';
  src: url('fonts/TeluguMN-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------
     BRAND — core, rarely used raw. Use semantic tokens below.
     ------------------------------------------------------------ */
  --akuig-red:       #AA0000;   /* the red "g" in the wordmark */
  --akuig-red-soft:  #C44A40;   /* pressed / hovered coral-red */
  --akuig-coral:     #E85A4F;   /* marketing accent — warmer */
  --akuig-coral-dk:  #C44A40;

  --akuig-ink:       #0A0A0A;   /* near-black body text */
  --akuig-paper:     #FAFAFA;   /* off-white background */
  --akuig-cream:     #F5F5F5;   /* tinted paper */

  /* ------------------------------------------------------------
     NEUTRALS — 50-900 scale. Use semantic tokens where possible.
     ------------------------------------------------------------ */
  --n-50:  #F5F5F5;
  --n-100: #E5E5E5;
  --n-200: #D4D4D4;
  --n-300: #A3A3A3;
  --n-400: #737373;
  --n-500: #525252;
  --n-600: #404040;
  --n-700: #262626;
  --n-800: #171717;
  --n-900: #0A0A0A;

  /* ------------------------------------------------------------
     SEMANTIC — status colours used across network topology,
     SLA tiers, and operations dashboards.
     ------------------------------------------------------------ */
  --ok:        #22C55E;   /* healthy, success, active */
  --warn:      #EAB308;   /* caution, pending, minor */
  --danger:    #EF4444;   /* fault, critical, error */
  --info:      #3B82F6;   /* access tier, neutral info */
  --violet:    #8B5CF6;   /* radio tier, specialised */

  /* SLA tiers (matches customer tier badges) */
  --tier-platinum: #8B5CF6;
  --tier-gold:     #EAB308;
  --tier-silver:   #94A3B8;
  --tier-bronze:   #CD7F32;

  /* Network-tier colours (topology legend) */
  --net-core:   var(--akuig-coral);
  --net-access: var(--info);
  --net-radio:  var(--violet);
  --net-cpe:    var(--ok);

  /* ------------------------------------------------------------
     SEMANTIC SURFACES — foreground / background pairs
     ------------------------------------------------------------ */
  --fg-1:   var(--n-900);   /* headlines, primary text */
  --fg-2:   var(--n-500);   /* body, secondary */
  --fg-3:   var(--n-400);   /* meta, tertiary, hint */
  --fg-4:   var(--n-300);   /* disabled, placeholder */
  --fg-inv: #FFFFFF;        /* on dark surfaces */

  --bg-1: #FFFFFF;          /* elevated cards */
  --bg-2: var(--akuig-paper);
  --bg-3: var(--n-50);
  --bg-ink: var(--n-800);   /* dark sections */
  --bg-ink-deep: var(--n-900);

  --line-1: var(--n-100);   /* hairline dividers */
  --line-2: var(--n-200);   /* stronger rules */
  --line-inv: var(--n-600); /* rules on dark bg */

  --accent:    var(--akuig-coral);
  --accent-dk: var(--akuig-coral-dk);
  --accent-on: #FFFFFF;

  /* ------------------------------------------------------------
     TYPE — stacks
     ------------------------------------------------------------ */
  --font-display: 'Telugu MN', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Code', Consolas, monospace;

  /* ------------------------------------------------------------
     TYPE — fluid scale.
     H1 is display-serif; H2/H3 default display; H4+ are body.
     ------------------------------------------------------------ */
  --fs-hero:  clamp(2.75rem, 1.9rem + 3.5vw, 4.5rem);
  --fs-h1:    clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4:    1.125rem;
  --fs-lg:    1.25rem;       /* lead paragraphs */
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.8rem;
  --fs-micro: 0.72rem;       /* eyebrow / caps labels */

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-tight:   1.4;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-caps:    0.1em;       /* all-caps eyebrow labels */

  /* ------------------------------------------------------------
     SPACING, RADII, ELEVATION
     ------------------------------------------------------------ */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 6rem;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Elevation — soft, editorial. No heavy drop shadows. */
  --elev-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 0 rgba(10,10,10,0.02);
  --elev-2: 0 4px 12px -4px rgba(10,10,10,0.08);
  --elev-3: 0 12px 24px -8px rgba(10,10,10,0.10);
  --elev-4: 0 25px 50px -12px rgba(10,10,10,0.25);
  --ring-accent: 0 0 0 3px rgba(232,90,79,0.18);
  --ring-focus:  0 0 0 3px rgba(59,130,246,0.25);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES — use in preference to raw tag styling
   ============================================================ */
.ak-hero,
.ak-h1,
.ak-h2,
.ak-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
}

.ak-hero  { font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.ak-h1    { font-size: var(--fs-h1); }
.ak-h2    { font-size: var(--fs-h2); }
.ak-h3    { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); }

/* H4 and smaller drop to body font — editorial convention */
.ak-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg-1);
  line-height: var(--lh-tight);
}

.ak-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--fg-2);
  line-height: var(--lh-body);
  max-width: 62ch;
}

.ak-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  line-height: var(--lh-body);
}

.ak-meta {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-tight);
}

.ak-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

.ak-eyebrow--ink { color: var(--fg-3); }

.ak-code,
.ak-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  color: var(--fg-1);
}

.ak-code {
  background: var(--bg-3);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-1);
}

/* Accent utility */
.ak-accent { color: var(--accent); }