/* =========================================================
   Brickora — Colors & Type Foundations
   Source: home-page references (Brickora · Конструкторы)
   ========================================================= */

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

:root {
  /* ---------- Surface / Neutrals ---------------------------------------- */
  /* Brickora pages live on a warm off-white "paper" backdrop with very       */
  /* subtle warm grey panels. There is essentially no pure white.            */
  --bk-paper:        #F6F4EF;   /* page background — warm bone */
  --bk-paper-2:      #EFEBE3;   /* slightly darker paper, used for soft panels */
  --bk-card:         #FBFAF6;   /* card / pill fill — a touch lighter than paper */
  --bk-card-hover:   #F1EEE6;
  --bk-line:         #E6E1D6;   /* hairline border */
  --bk-line-2:       #D9D2C2;   /* slightly stronger border */

  /* ---------- Ink / Foreground ----------------------------------------- */
  /* The wordmark and headlines use a near-black with a hint of cool blue.  */
  --bk-ink:          #1F232B;   /* primary headline / button fill */
  --bk-ink-2:        #2A2F38;   /* body */
  --bk-ink-3:        #5A6070;   /* secondary copy */
  --bk-ink-4:        #8A8F9C;   /* tertiary / captions */
  --bk-ink-5:        #B8BCC6;   /* disabled, dividers on dark */

  /* ---------- Accent: Warm Sand --------------------------------------- */
  /* The signature accent — used on the second/third headline word and on   */
  /* the model bricks (tan / latte). Paired with ink for contrast.          */
  --bk-sand:         #C9A77C;   /* primary accent — warm sand */
  --bk-sand-2:       #B8966A;   /* hover / press */
  --bk-sand-3:       #E2C9A6;   /* tinted accent / chips */
  --bk-sand-wash:    #F2E7D6;   /* very light wash for badges / highlights */

  /* ---------- Brick palette (illustration / 3D models) ----------------- */
  /* Used inside marketing imagery only. Useful when composing brick chips,  */
  /* product swatches, podium illustrations.                                */
  --bk-brick-cream:  #EDE3D1;
  --bk-brick-tan:    #C9A77C;
  --bk-brick-coffee: #6E5A40;
  --bk-brick-charcoal: #2A2622;
  --bk-brick-white:  #F6F2EA;

  /* ---------- Semantic --------------------------------------------------- */
  --bk-success:      #4F8A5B;
  --bk-warning:      #D49A3A;
  --bk-danger:       #C0533F;
  --bk-info:         #4A6B8A;

  /* ---------- Glow / Atmosphere ---------------------------------------- */
  /* Hero scenes use a warm rim-light. Reserve for hero compositions.       */
  --bk-glow-warm:    radial-gradient(60% 60% at 50% 50%, rgba(255,221,170,.55), rgba(255,221,170,0) 70%);
  --bk-glow-cool:    radial-gradient(60% 60% at 50% 50%, rgba(220,225,235,.7),  rgba(220,225,235,0) 70%);

  /* ---------- Shadows / Elevation -------------------------------------- */
  /* Soft, warm, low-contrast — never crisp drop shadows.                   */
  --bk-shadow-1:     0 1px 2px rgba(31,35,43,.04), 0 2px 6px rgba(31,35,43,.04);
  --bk-shadow-2:     0 4px 14px rgba(31,35,43,.06), 0 1px 2px rgba(31,35,43,.04);
  --bk-shadow-3:     0 12px 40px rgba(31,35,43,.10), 0 2px 6px rgba(31,35,43,.05);
  --bk-shadow-press: inset 0 1px 0 rgba(31,35,43,.06);

  /* ---------- Radii (pill-led, generous) ------------------------------- */
  --bk-r-1:  8px;
  --bk-r-2:  14px;
  --bk-r-3:  20px;   /* feature card */
  --bk-r-4:  28px;   /* hero pill / large card */
  --bk-r-5:  40px;   /* big section panel */
  --bk-r-pill: 999px;

  /* ---------- Spacing (4px base) --------------------------------------- */
  --bk-s-1:  4px;
  --bk-s-2:  8px;
  --bk-s-3:  12px;
  --bk-s-4:  16px;
  --bk-s-5:  20px;
  --bk-s-6:  24px;
  --bk-s-7:  32px;
  --bk-s-8:  40px;
  --bk-s-9:  56px;
  --bk-s-10: 72px;
  --bk-s-11: 96px;
  --bk-s-12: 128px;

  /* ---------- Type families -------------------------------------------- */
  /* Headlines + UI use Onest (closest free Google equivalent to the         */
  /* heavy geometric grotesque used on Brickora.com — see SUBSTITUTIONS).    */
  --bk-font-display: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-font-body:    "Onest", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (desktop) ------------------------------------- */
  --bk-fs-display-1: clamp(56px, 6.4vw, 96px);   /* hero headline */
  --bk-fs-display-2: clamp(44px, 5vw, 72px);     /* secondary hero */
  --bk-fs-h1:        clamp(36px, 3.6vw, 56px);
  --bk-fs-h2:        clamp(28px, 2.4vw, 40px);
  --bk-fs-h3:        24px;
  --bk-fs-h4:        20px;
  --bk-fs-body-l:    18px;
  --bk-fs-body:      16px;
  --bk-fs-body-s:    14px;
  --bk-fs-caption:   13px;
  --bk-fs-eyebrow:   12px;

  --bk-lh-tight:   1.05;
  --bk-lh-snug:    1.15;
  --bk-lh-normal:  1.45;
  --bk-lh-loose:   1.6;

  --bk-tracking-eyebrow: 0.14em;
  --bk-tracking-tight:  -0.02em;
  --bk-tracking-display:-0.025em;

  /* ---------- Motion ---------------------------------------------------- */
  --bk-ease:        cubic-bezier(.22,.61,.36,1);
  --bk-ease-out:    cubic-bezier(.16,1,.3,1);
  --bk-dur-1: 120ms;
  --bk-dur-2: 200ms;
  --bk-dur-3: 320ms;
  --bk-dur-4: 520ms;

  /* ---------- Semantic role aliases ------------------------------------ */
  --bg:        var(--bk-paper);
  --bg-elev:   var(--bk-card);
  --fg:        var(--bk-ink);
  --fg-2:      var(--bk-ink-2);
  --fg-muted:  var(--bk-ink-3);
  --fg-subtle: var(--bk-ink-4);
  --border:    var(--bk-line);
  --accent:    var(--bk-sand);
  --accent-ink:var(--bk-sand-2);
}

/* =========================================================
   Semantic element styles — drop-in defaults
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--bk-font-body);
  font-size: var(--bk-fs-body);
  line-height: var(--bk-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bk-display-1, h1.bk-hero {
  font-family: var(--bk-font-display);
  font-size: var(--bk-fs-display-1);
  font-weight: 800;
  line-height: var(--bk-lh-tight);
  letter-spacing: var(--bk-tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.bk-display-2 {
  font-family: var(--bk-font-display);
  font-size: var(--bk-fs-display-2);
  font-weight: 800;
  line-height: var(--bk-lh-tight);
  letter-spacing: var(--bk-tracking-display);
}
h1, .bk-h1 { font-size: var(--bk-fs-h1); font-weight: 700; line-height: var(--bk-lh-snug); letter-spacing: var(--bk-tracking-tight); }
h2, .bk-h2 { font-size: var(--bk-fs-h2); font-weight: 700; line-height: var(--bk-lh-snug); letter-spacing: var(--bk-tracking-tight); }
h3, .bk-h3 { font-size: var(--bk-fs-h3); font-weight: 600; line-height: 1.25; }
h4, .bk-h4 { font-size: var(--bk-fs-h4); font-weight: 600; line-height: 1.3; }

p, .bk-p {
  font-size: var(--bk-fs-body);
  line-height: var(--bk-lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}
.bk-lede {
  font-size: var(--bk-fs-body-l);
  color: var(--fg-muted);
  max-width: 48ch;
}
.bk-caption  { font-size: var(--bk-fs-caption); color: var(--fg-muted); }
.bk-eyebrow  {
  font-size: var(--bk-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--bk-tracking-eyebrow);
  color: var(--fg-muted);
  font-weight: 500;
}
.bk-mono { font-family: var(--bk-font-mono); }

/* Brand accent word — used on the third line of split headlines */
.bk-accent-word { color: var(--bk-sand); }

/* Selection: warm sand wash */
::selection { background: var(--bk-sand-wash); color: var(--bk-ink); }