/* Baibursai - light Swiss.
   White ground, a tight grotesk, heavy type, hard edges, one vivid accent.
   Rules and blocks do the work that shadows would do elsewhere. */

:root {
  --bg:        #ffffff;
  --bg-2:      #f6f6f4;
  --card-bg:   #ffffff;
  --foot-bg:   #0f0f0f;
  --band-bg:   #f4f4f1;
  --th-bg:     #f6f6f4;
  --code-bg:   #0f0f0f;
  --input-bg:  #ffffff;
  --row-hover: #f6f6f4;
  --side-on-bg:#f1f1ed;
  --badge-bg:  #f6f6f4;

  --text:    #16161a;
  --text-2:  #55555e;
  --text-3:  #8a8a94;
  --heading: #0b0b0d;
  --code-text: #e8e8e4;

  --line:   #e2e2dd;
  --line-2: #cfcfc8;

  --accent:       #2f4bff;
  --accent-hover: #1b35e0;
  --accent-line:  #c3ccff;
  --accent-bg:    #f0f2ff;
  --on-accent:    #ffffff;

  --link:       #2f4bff;
  --link-hover: #1b35e0;

  --ok: #10794a;        --ok-line: #bfe3d0;     --ok-bg: #edf8f2;
  --warn: #9a6200;      --warn-line: #f0dcb4;   --warn-bg: #fdf6e8;
  --danger: #c62b2b;    --danger-line: #f3c9c9; --danger-bg: #fdeeee;

  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --body-size: 16px;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --display-leading: 1.02;
  --h1-max: 4.6rem;
  --h2-max: 2.7rem;
  --lede-size: 1.06rem;
  --hero-lede: 1.18rem;
  --hero-h1-width: 13ch;

  --brand-weight: 700;
  --brand-size: 1.02rem;
  --brand-tracking: -0.02em;
  --brand-transform: lowercase;
  --brand-mark: 22px;
  --nav-weight: 500;

  --wrap: 1200px;
  --gap: 20px;
  --section-y: 84px;
  --hero-y: 104px;
  --card-pad: 24px;
  --head-h: 66px;
  --head-bg: rgba(255, 255, 255, .92);
  --head-border: 1px solid #16161a;

  --r: 0px;
  --r-sm: 0px;
  --card-border: 1px solid #16161a;
  --card-shadow: none;
  --card-shadow-hover: 5px 5px 0 #16161a;
  --featured-shadow: 5px 5px 0 #2f4bff;

  --btn-bg: #ffffff;
  --btn-hover-bg: #16161a;
  --btn-hover-border: #16161a;
  --btn-pad: 11px 20px;
  --btn-pad-lg: 15px 30px;
  --btn-tracking: -0.01em;
  --btn-transform: none;
}

/* Swiss flourishes that only this brand gets. */
h1, h2 { text-transform: none; }
h1 em, h2 em { font-style: normal; background: var(--accent); color: #fff; padding: 0 .12em; }

.btn:hover { background: #16161a; color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.hero { border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: .8;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }

.eyebrow { color: var(--accent); }

/* Hard offset blocks instead of soft shadows */
a.card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #16161a; }
a.card { transition: transform .12s ease, box-shadow .12s ease; }

.site-foot { color: #e8e8e4; }
.site-foot h4 { color: #8a8a94; }
.site-foot a { color: #b8b8b2; }
.site-foot a:hover { color: #fff; }
.site-foot p { color: #b8b8b2; }
.site-foot h2 { color: #fff; }
.site-foot .foot-mark { color: #fff; }
.site-foot .foot-bottom, .site-foot .status-line { color: #8a8a94; }
.site-foot .foot-cta, .site-foot .foot-grid, .site-foot .foot-bottom { border-color: #2a2a2a; }
.site-foot .btn { background: transparent; border-color: #55555e; color: #fff; }
.site-foot .btn:hover { background: #fff; color: #0f0f0f; border-color: #fff; }
.site-foot .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }