/* ============================================================
   AtmanirbharKharGym DESIGN SYSTEM — colors_and_type.css
   Business directory / local listings portal.
   Palette family: cobalt blue + tangerine orange (Justdial-inspired,
   original brand). Fonts: Plus Jakarta Sans (display) + Hind (body/UI).
   Load fonts via Google Fonts CDN (see <link> in HTML files) or self-host
   into /fonts and swap the @font-face below.
   ============================================================ */

/* ---- Fonts (CDN import; comment out if self-hosting) ---- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Hind:wght@400;500;600;700&display=swap");

:root {
  /* ============ BRAND COLORS ============ */
  /* Cobalt — primary brand blue (signage, headers, links, primary UI) */
  --brand-blue: #116db6; /* core */
  --brand-blue-600: #0e5f9f; /* hover */
  --brand-blue-700: #0b4f85; /* press / deep */
  --brand-blue-800: #093d67; /* darkest */
  --brand-blue-300: #6fb0de; /* light line / disabled */
  --brand-blue-100: #e4f0fa; /* tint surface */
  --brand-blue-50: #f1f7fc; /* faint wash */

  /* Tangerine — energetic accent (CTAs, highlights, "call now") */
  --brand-orange: #f26600; /* core */
  --brand-orange-600: #db5c00; /* hover */
  --brand-orange-700: #b94e00; /* press */
  --brand-orange-100: #ffeddf; /* tint surface */
  --brand-orange-50: #fff6ef; /* faint wash */

  /* Gold — ratings / stars (warm, high visibility) */
  --gold: #f5a623;
  --gold-700: #c9821a;
  --gold-100: #fdf1dc;

  /* ============ SEMANTIC / STATUS ============ */
  --success: #1e9e57; /* "Open now", verified */
  --success-100: #e3f5ec;
  --warning: #e8920c; /* "Closing soon" */
  --warning-100: #fcf1dc;
  --danger: #dd3838; /* "Closed", errors */
  --danger-100: #fce7e7;
  --info: var(--brand-blue);

  /* ============ NEUTRALS (cool gray ramp) ============ */
  --fg1: #0f1c28; /* primary text — near-black, cool */
  --fg2: #41525f; /* secondary text */
  --fg3: #6c7b88; /* tertiary / meta */
  --fg4: #9aa8b4; /* placeholder / disabled text */
  --line: #e1e8ee; /* default border */
  --line-strong: #cdd7df; /* stronger border */
  --surface: #ffffff; /* cards, sheets */
  --surface-2: #f7fafc; /* nested / striped */
  --bg: #eef3f7; /* app/page background */
  --bg-blue: #0b4f85; /* deep brand section bg */
  --overlay: rgba(15, 28, 40, 0.55); /* modal scrim */

  /* ============ TYPE FAMILIES ============ */
  --font-display:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:
    "SFMono-Regular", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ============ TYPE SCALE (px / line-height) ============ */
  --t-display: 44px;
  --lh-display: 1.08; /* hero */
  --t-h1: 34px;
  --lh-h1: 1.14;
  --t-h2: 26px;
  --lh-h2: 1.2;
  --t-h3: 20px;
  --lh-h3: 1.28;
  --t-h4: 17px;
  --lh-h4: 1.35;
  --t-body: 15px;
  --lh-body: 1.55; /* default UI/body */
  --t-sm: 13.5px;
  --lh-sm: 1.5; /* meta, captions */
  --t-xs: 12px;
  --lh-xs: 1.4; /* tags, overlines */

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extra: 800;

  /* ============ SPACING (4px base) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ============ SHADOWS (cool-tinted, soft) ============ */
  --sh-xs: 0 1px 2px rgba(15, 28, 40, 0.06);
  --sh-sm: 0 1px 3px rgba(15, 28, 40, 0.08), 0 1px 2px rgba(15, 28, 40, 0.04);
  --sh-md: 0 4px 12px rgba(15, 28, 40, 0.1);
  --sh-lg: 0 10px 28px rgba(15, 28, 40, 0.14);
  --sh-pop: 0 16px 40px rgba(11, 79, 133, 0.18);
  --focus-ring: 0 0 0 3px rgba(17, 109, 182, 0.3);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — apply when you include this file
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  margin: 0;
}
h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  font-weight: var(--w-extra);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-bold);
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  font-weight: var(--w-semibold);
}

p {
  margin: 0 0 var(--sp-4);
}
a {
  color: var(--brand-blue);
  text-decoration: none;
}
a:hover {
  color: var(--brand-blue-600);
  text-decoration: underline;
}
small {
  font-size: var(--t-sm);
  color: var(--fg3);
}
code,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---- Utility type classes ---- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: var(--w-extra);
  letter-spacing: -0.025em;
}
.t-overline {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.t-meta {
  font-size: var(--t-sm);
  color: var(--fg3);
}
.t-num {
  font-variant-numeric: tabular-nums;
}