/* =========================================================
   LINOX DESIGN SYSTEM — Foundations
   Tokens lifted directly from the Linox AI Vision website
   (Chaos-Collective/linox-ai-vision-web · src/style.css)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- COLOR · ORANGE (brand) ---------- */
  --linox-orange-20: #ffd9b3; /* lightest tint */
  --linox-orange-40: #ffa64d;
  --linox-orange-60: #ff8c00; /* PRIMARY — DarkOrange, hue ~33° (clear orange, not red-leaning) */
  --linox-orange-70: #e67900; /* hover/pressed */

  /* ---------- COLOR · NEUTRAL ---------- */
  --linox-white:    #ffffff;
  --linox-gray-10:  #fafafa;
  --linox-gray-20:  #f5f5f5;
  --linox-gray-30:  #e5e5e5;
  --linox-gray-40:  #d4d4d4;
  --linox-gray-50:  #a3a3a3;
  --linox-gray-60:  #737373;
  --linox-gray-70:  #525252;
  --linox-gray-80:  #404040;
  --linox-gray-90:  #2d2d2d;
  --linox-gray-100: #1a1a1a; /* near-black */

  /* ---------- COLOR · STATUS ---------- */
  --linox-red-40:    #f87171;
  --linox-red-60:    #ef4444;
  --linox-yellow-20: #fde047;
  --linox-yellow-30: #eab308;
  --linox-green-40:  #4ade80;
  --linox-green-60:  #16a34a;

  /* ---------- SEMANTIC COLOR ---------- */
  --bg-primary:   var(--linox-white);
  --bg-secondary: var(--linox-gray-10);
  --bg-tertiary:  var(--linox-gray-20);
  --bg-inverse:   var(--linox-gray-100);
  --bg-brand:     var(--linox-orange-60);

  --fg-primary:   var(--linox-gray-100);
  --fg-secondary: var(--linox-gray-70);
  --fg-helper:    var(--linox-gray-60);
  --fg-inverse:   var(--linox-white);
  --fg-on-color:  var(--linox-white);

  --link:         var(--linox-orange-60);
  --link-hover:   var(--linox-orange-70);
  --link-inverse: var(--linox-orange-40);

  --border-subtle:      var(--linox-gray-20);
  --border-default:     var(--linox-gray-30);
  --border-strong:      var(--linox-gray-50);
  --border-interactive: var(--linox-orange-60);

  --alert-critical: var(--linox-red-60);
  --alert-warning:  var(--linox-yellow-30);
  --alert-success:  var(--linox-green-60);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (px) — IBM Carbon inspired, light-weight headlines */
  --type-display:    65px;  /* H1 hero */
  --type-h1:         54px;  /* section headings */
  --type-h2:         48px;  /* problem titles */
  --type-h3:         38px;  /* differentiator headings */
  --type-h4:         28px;  /* tier titles */
  --type-h5:         22px;  /* subheading / lead */
  --type-h6:         20px;
  --type-body-lg:    18px;  /* default body */
  --type-body:       16px;
  --type-body-sm:    15px;  /* card body */
  --type-caption:    14px;
  --type-small:      13px;
  --type-micro:      12px;  /* labels, mono */
  --type-tag:        11px;  /* tier label, all-caps */

  --weight-light:    300;   /* headlines */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-tag:    1px;     /* uppercase labels */
  --tracking-wide:   2px;     /* tier labels */

  /* ---------- SPACING (Carbon scale) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 160px;

  /* ---------- LAYOUT ---------- */
  --max-width:   1280px;
  --nav-height:  48px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-xs:   2px;   /* tags, severity chips */
  --radius-sm:   4px;   /* filters, cards (sharp) */
  --radius-md:   8px;   /* default cards, images */
  --radius-lg:   12px;  /* panels, image containers */
  --radius-xl:   16px;  /* large icons */
  --radius-pill: 80px;  /* primary CTA buttons */
  --radius-full: 9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:    0 20px 40px rgba(0, 0, 0, 0.10);
  --shadow-2xl:   0 30px 60px rgba(0, 0, 0, 0.10);
  --shadow-hero:  0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-brand: 0 15px 35px rgba(255, 140, 0, 0.30);

  /* Carbon-style bottom-right offset, used on tier labels */
  --shadow-offset-brand: 4px 4px 0 var(--linox-orange-60);

  /* ---------- MOTION (Carbon easings) ---------- */
  --ease-carbon:   cubic-bezier(0.2, 0, 0.38, 0.9);
  --motion-fast:   110ms var(--ease-carbon);
  --motion-normal: 240ms var(--ease-carbon);
  --motion-slow:   400ms var(--ease-carbon);
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

.linox-display {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}
.linox-display strong { font-weight: var(--weight-semibold); }

.linox-h1 {
  font-family: var(--font-sans);
  font-size: var(--type-h1);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}
.linox-h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}
.linox-h2 span { color: var(--linox-orange-60); font-weight: var(--weight-semibold); }

.linox-h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}
.linox-h4 {
  font-family: var(--font-sans);
  font-size: var(--type-h4);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}
.linox-h5 {
  font-family: var(--font-sans);
  font-size: var(--type-h5);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.linox-h6 {
  font-family: var(--font-sans);
  font-size: var(--type-h6);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.linox-body {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.linox-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.linox-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-helper);
}

/* All-caps tag label (e.g. "THE CHALLENGE", "TIER 1") */
.linox-tag {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tag);
  color: var(--linox-orange-60);
}

/* Tier-style label: white-on-black with offset orange shadow */
.linox-tier-label {
  font-family: var(--font-mono);
  font-size: var(--type-tag);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--linox-white);
  background: var(--linox-gray-100);
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-offset-brand);
}

.linox-mono {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
  color: var(--fg-helper);
}

.linox-link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--motion-fast);
}
.linox-link:hover { color: var(--link-hover); }

/* Header divider — short orange bar under section titles */
.linox-divider {
  height: 4px;
  width: 80px;
  background: var(--linox-orange-60);
  border-radius: var(--radius-xs);
}