/* quartz — token skin, scoped to [data-theme="quartz"] (theme scope). Consumes base.css + foundations token API. */

[data-theme="quartz"] { --bg: #FAFBFD;
  --bg-alt: #F1F5F9;
  --bg-dark: #0E1726;
  --surface: #FFFFFF;
  --ink: #0E1726;
  --ink-inverse: #F4F8FC;
  --text-body: #0E1726;
  --muted: #55657A;
  --accent: #0E7C95;              
  --accent-hover: #0A6074;
  --accent-tint: #E3F2F6;
  --accent-2: #38BDD8;            
  --line: #DCE4EE;

  
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-utility: 'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 600;
  --fs-h1: clamp(2.5rem, 5.5vw, 3.75rem); /* @kind font */
  --fs-h2: clamp(1.875rem, 3.5vw, 2.5rem); /* @kind font */
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.65; /* @kind font */
  --fs-eyebrow: 0.75rem;
  --eyebrow-tracking: 0.12em;
  --eyebrow-weight: 500;

  
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --shadow: none;
  --offset: 4px 4px 0 var(--line);
  --speed: 150ms; /* @kind other */
  --btn-tracking: 0.04em;
  --btn-font: var(--font-utility);
  --label-weight: 500; }

[data-theme="quartz"] h1 { letter-spacing: -0.01em; line-height: 1.08; }

[data-theme="quartz"] .eyebrow::before { content: "[ "; }

[data-theme="quartz"] .eyebrow::after { content: " ]"; }

[data-theme="quartz"] .mono { font-family: var(--font-utility); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }

[data-theme="quartz"] .tick-frame { padding: 10px;
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) left 0 top 0 / 12px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) left 0 top 0 / 1px 12px,
    linear-gradient(var(--accent-2), var(--accent-2)) right 0 top 0 / 12px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) right 0 top 0 / 1px 12px,
    linear-gradient(var(--accent-2), var(--accent-2)) left 0 bottom 0 / 12px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) left 0 bottom 0 / 1px 12px,
    linear-gradient(var(--accent-2), var(--accent-2)) right 0 bottom 0 / 12px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) right 0 bottom 0 / 1px 12px;
  background-repeat: no-repeat; }

[data-theme="quartz"] .spec-list { list-style: none; padding: 0; }

[data-theme="quartz"] .spec-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }

[data-theme="quartz"] .spec-list li::before { content: ""; position: absolute; left: 4px; top: 0.55em;
  width: 9px; height: 1px; background: var(--accent); }

[data-theme="quartz"] .spec-list li::after { content: ""; position: absolute; left: 8px; top: calc(0.55em - 4px);
  width: 1px; height: 9px; background: var(--accent); }

[data-theme="quartz"] .card { border-radius: var(--radius-md); }

[data-theme="quartz"] .card.featured { box-shadow: var(--offset); }

[data-theme="quartz"] .card .index { font-family: var(--font-utility); color: var(--muted); font-size: 0.8125rem; }

[data-theme="quartz"] .card { border-top: 2px solid var(--accent-2); }

[data-theme="quartz"] .blueprint { background-image:
    linear-gradient(color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 40%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; }

[data-theme="quartz"] .stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.25rem); color: var(--ink); line-height: 1; }

[data-theme="quartz"] .stat-label { font-family: var(--font-utility); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

[data-theme="quartz"] .site-footer { background: var(--bg-dark); color: var(--ink-inverse); border-top: 1px solid var(--accent-2); }