/* Simister Labs brand stylesheet v1.0 (2026-09-30).
   Drop in with <link rel="stylesheet" href="brand.css">. Light by default; dark follows the system,
   or force it with <html data-theme="dark">. Fonts load from Google Fonts; local copies are in ../fonts. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=Rubik:wght@400;500;700&display=swap');

:root {
  /* palette */
  --sl-night: #0f0d09;
  --sl-ink: #111214;
  --sl-paper: #f6f1e4;
  --sl-orange: #c4561c;            /* graphics and large text only */
  --sl-orange-on-dark: #d85f1f;    /* orange body text on night, 5.2:1 */
  --sl-orange-on-light: #a74918;   /* orange body text on paper, 5.2:1 */

  /* type */
  --sl-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --sl-font-body: 'Rubik', system-ui, Arial, sans-serif;

  /* space (8 px grid), radius */
  --sl-space-1: 4px;  --sl-space-2: 8px;  --sl-space-3: 12px; --sl-space-4: 16px;
  --sl-space-5: 24px; --sl-space-6: 32px; --sl-space-7: 48px; --sl-space-8: 64px; --sl-space-9: 96px;
  --sl-radius-sm: 6px; --sl-radius-md: 12px; --sl-radius-lg: 20px;

  /* roles, light theme */
  --sl-bg: var(--sl-paper);
  --sl-surface: #ffffff;
  --sl-text: var(--sl-ink);
  --sl-muted: #6b6558;
  --sl-line: #e2dccb;
  --sl-accent: var(--sl-orange);
  --sl-accent-text: var(--sl-orange-on-light);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sl-bg: var(--sl-night); --sl-surface: #17150f; --sl-text: var(--sl-paper);
    --sl-muted: #bdb6a4; --sl-line: #2a261c; --sl-accent-text: var(--sl-orange-on-dark); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sl-bg: var(--sl-night); --sl-surface: #17150f; --sl-text: var(--sl-paper);
  --sl-muted: #bdb6a4; --sl-line: #2a261c; --sl-accent-text: var(--sl-orange-on-dark); color-scheme: dark;
}

/* base */
body { margin: 0; background: var(--sl-bg); color: var(--sl-text); font: 400 16px/1.55 var(--sl-font-body); }
h1, h2, h3, .sl-display {
  font-family: var(--sl-font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.02; margin: 0 0 var(--sl-space-4);
}
h1 { font-size: clamp(40px, 7vw, 72px); }
h2 { font-size: clamp(30px, 4.5vw, 44px); }
h3 { font-size: 26px; }
a { color: var(--sl-accent-text); text-underline-offset: 3px; }
.sl-muted { color: var(--sl-muted); }
.sl-eyebrow { font: 700 13px/1 var(--sl-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-accent-text); }
.sl-labs { font-family: var(--sl-font-display); font-weight: 800; letter-spacing: 0.36em; text-transform: uppercase; }

/* components */
.sl-card { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-radius-md); padding: var(--sl-space-5); }
.sl-button {
  display: inline-block; font: 700 15px/1 var(--sl-font-body); padding: 14px 22px; border-radius: var(--sl-radius-sm);
  background: var(--sl-orange-on-light); color: var(--sl-paper); text-decoration: none; border: 0; cursor: pointer;
}
.sl-button--ghost { background: transparent; color: var(--sl-text); box-shadow: inset 0 0 0 2px var(--sl-line); }
.sl-button:focus-visible { outline: 3px solid var(--sl-accent-text); outline-offset: 3px; }

/* logo: size by height; the SVG keeps its proportions */
.sl-logo { display: block; height: 64px; width: auto; }
.sl-logo--mark { height: 40px; }