/* ==========================================================================
   Havells TRB Design System — colors_and_type.css
   Load this file FIRST in every page. Defines base tokens + semantic styles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');

:root {
  /* ---------- Color: brand ---------- */
  --red:           #E11D2A;   /* Havells signature red */
  --red-dark:      #B81621;   /* hover/pressed */
  --red-darker:    #8E1019;   /* deep accent */
  --red-tint:      #FBE6E8;   /* paper-on-red wash */

  /* ---------- Color: ink (text) ---------- */
  --ink:           #10131A;   /* primary text, headlines */
  --ink-2:         #3A4150;   /* secondary text */
  --ink-3:         #6B7280;   /* tertiary / placeholder */
  --ink-4:         #9BA1AC;   /* disabled / hint */

  /* ---------- Color: paper (surface) ---------- */
  --paper:         #FBFAF7;   /* primary canvas — warm off-white */
  --paper-2:       #F2EFE8;   /* alt surface, hover wash, table stripe */
  --paper-3:       #E8E4D8;   /* deeper paper, sidebar in some kits */
  --white:         #FFFFFF;   /* pure white — modals, inputs only */

  /* ---------- Color: line (border) ---------- */
  --line:          #E5E0D6;   /* default borders */
  --line-strong:   #C9C2B2;   /* table outer, section dividers */
  --line-dark:     #2A2F3A;   /* on-ink surface borders */

  /* ---------- Color: semantic risk scale ---------- */
  --critical:      #B81621;   /* same as red-dark — blocking findings */
  --high:          #D97309;   /* amber */
  --medium:        #A88815;   /* mustard */
  --low:           #3F7D3F;   /* sage */
  --compliant:     #1F5A2E;   /* forest */
  --info:          #1F4E79;   /* navy */

  /* tints (5% of the corresponding semantic) for backgrounds of pills/cards */
  --critical-tint: #F7E3E4;
  --high-tint:     #FBEFE0;
  --medium-tint:   #F6F0DA;
  --low-tint:      #E6EFE5;
  --compliant-tint:#DCE8DE;
  --info-tint:     #DEEAF5;

  /* ---------- Type: families ---------- */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Newsreader', 'Source Serif Pro', ui-serif, Georgia, serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: base scale (px values, line-heights, tracking) ---------- */
  /* display — for executive readouts, large posture %, PDF covers */
  --display-1-size:    72px;
  --display-1-lh:      1.04;     /* @kind font */
  --display-1-track:   -0.02em;  /* @kind font */
  --display-2-size:    56px;
  --display-2-lh:      1.06;     /* @kind font */
  --display-2-track:   -0.018em; /* @kind font */

  /* headings — UI titles */
  --h1-size:           32px;  --h1-lh: 1.18;  /* @kind font */  --h1-track: -0.012em; /* @kind font */
  --h2-size:           24px;  --h2-lh: 1.22;  /* @kind font */  --h2-track: -0.008em; /* @kind font */
  --h3-size:           20px;  --h3-lh: 1.28;  /* @kind font */  --h3-track: -0.004em; /* @kind font */
  --h4-size:           16px;  --h4-lh: 1.35;  /* @kind font */  --h4-track:  0;       /* @kind font */

  /* body */
  --body-size:         15px;  --body-lh: 1.55;    /* @kind font */
  --body-sm-size:      13px;  --body-sm-lh: 1.5;  /* @kind font */
  --caption-size:      12px;  --caption-lh: 1.4;  /* @kind font */
  --eyebrow-size:      11px;  --eyebrow-lh: 1.2;  /* @kind font */  --eyebrow-track: 0.08em; /* @kind font */

  /* mono */
  --mono-size:         13px;  --mono-lh: 1.5;     /* @kind font */
  --mono-sm-size:      11px;  --mono-sm-lh: 1.4;  /* @kind font */

  /* ---------- Spacing scale ---------- */
  --sp-0: 2px;
  --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;

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

  /* ---------- Shadows (minimal) ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.04), 0 0 0 1px rgba(16, 19, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 19, 26, 0.06), 0 0 0 1px rgba(16, 19, 26, 0.06);
  --shadow-lg: 0 24px 48px rgba(16, 19, 26, 0.10), 0 0 0 1px rgba(16, 19, 26, 0.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --t-micro: 120ms; /* @kind other */
  --t-fast:  200ms; /* @kind other */
  --t-page:  320ms; /* @kind other */

  /* ---------- Layout fixed dimensions ---------- */
  --app-bar-h:     64px;
  --nav-rail-w:    248px;
  --nav-rail-w-collapsed: 64px;
  --inspector-w:   400px;
  --content-max:  1280px;
  --editorial-max: 880px;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--red);
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';  /* Geist refinements */
}

/* ==========================================================================
   Semantic type classes — use these instead of raw sizes in components
   ========================================================================== */

.t-display-1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-1-size);
  line-height: var(--display-1-lh);
  letter-spacing: var(--display-1-track);
  color: var(--ink);
}
.t-display-2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-2-size);
  line-height: var(--display-2-lh);
  letter-spacing: var(--display-2-track);
  color: var(--ink);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
  color: var(--ink);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-track);
  color: var(--ink);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-track);
  color: var(--ink);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  color: var(--ink);
}

.t-body    { font-size: var(--body-size); line-height: var(--body-lh); color: var(--ink); }
.t-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--ink-2); }
.t-caption { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-3); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
}

.t-mono     { font-family: var(--font-mono); font-size: var(--mono-size); line-height: var(--mono-lh); }
.t-mono-sm  { font-family: var(--font-mono); font-size: var(--mono-sm-size); line-height: var(--mono-sm-lh); letter-spacing: 0.02em; }

.t-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ==========================================================================
   Utilities used across UI kit
   ========================================================================== */

.u-paper      { background: var(--paper); }
.u-paper-2    { background: var(--paper-2); }
.u-white      { background: var(--white); }
.u-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.u-card-strong {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}

/* Brand red rule — top of editorial pages */
.u-brand-rule {
  height: 3px;
  background: var(--red);
  width: 64px;
}

/* Fine grain noise overlay — disabled (caused bundler asset warnings).
   Kept as a no-op so existing markup continues to validate. */
.u-grain::after { content: none; }

/* Focus visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Selection */
::selection {
  background: var(--red);
  color: var(--paper);
}