/* ============================================================
   AnsarTech Design System — Colors & Typography
   Source: AnsarTech_Brand_Board.png
   ============================================================ */

/* --- Webfonts (Google Fonts substitution — see README CAVEATS) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLORS ---------- */

  /* Primary */
  --at-red:        #D9071D;  /* AnsarTech Red */
  --at-black:      #0E0E0E;  /* AnsarTech Black */
  --at-white:      #FFFFFF;

  /* Secondary */
  --at-deep-red:   #8A1A12;
  --at-charcoal:   #1A1A1A;
  --at-mid-gray:   #4A4A4A;

  /* Neutrals */
  --at-light-gray: #E5E5E5;
  --at-off-white:  #F7F7F7;

  /* Status */
  --at-success:    #2EA84A;
  --at-warning:    #E8A317;
  --at-error:      #C0241F;
  --at-info:       #1E66D1;

  /* ---------- SEMANTIC TOKENS — light surface ---------- */
  --bg:            var(--at-off-white);
  --bg-elevated:   var(--at-white);
  --bg-inverse:    var(--at-black);

  --fg1:           var(--at-black);     /* primary text */
  --fg2:           var(--at-mid-gray);  /* secondary text */
  --fg3:           #7A7A7A;             /* tertiary / captions */
  --fg-on-red:     var(--at-white);
  --fg-on-dark:    var(--at-white);

  --border:        var(--at-light-gray);
  --border-strong: #C9C9C9;
  --divider:       #ECECEC;

  --accent:        var(--at-red);
  --accent-hover:  #B8061A;            /* ~7% darker */
  --accent-press:  var(--at-deep-red);

  /* ---------- TYPOGRAPHY ---------- */
  --font-primary:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --fs-display:    72px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-body:       16px;
  --fs-caption:    14px;
  --fs-micro:      12px;

  /* Line heights */
  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.5;
  --lh-relaxed:    1.6;

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

  /* Letter spacing */
  --ls-tight:      -0.02em;
  --ls-display:    -0.025em;
  --ls-caps:       0.08em;

  /* ---------- SPACING (8px base grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;

  /* ---------- RADII ---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-1: 1px;
  --bw-2: 2px;     /* logo-style stroke accent */
  --bw-3: 3px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(14,14,14,0.06), 0 1px 1px rgba(14,14,14,0.04);
  --shadow-md: 0 4px 12px rgba(14,14,14,0.08), 0 2px 4px rgba(14,14,14,0.05);
  --shadow-lg: 0 12px 32px rgba(14,14,14,0.14), 0 4px 8px rgba(14,14,14,0.06);
  --shadow-red: 0 8px 24px rgba(217,7,29,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
}

/* Dark surface override (Dark 75% per brand proportions) */
[data-theme="dark"] {
  --bg:            var(--at-black);
  --bg-elevated:   var(--at-charcoal);
  --bg-inverse:    var(--at-white);
  --fg1:           var(--at-white);
  --fg2:           #C9C9C9;
  --fg3:           #8A8A8A;
  --border:        #2A2A2A;
  --border-strong: #3D3D3D;
  --divider:       #1F1F1F;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply to the matching tag directly
   ============================================================ */
html, body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--fg1);
  margin: 0;
}

p, .body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}

.caption, small {
  font-family: var(--font-primary);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg2);
}

.eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--at-red);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--at-light-gray);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--at-charcoal);
}