---
// Internal design system review page.
// Remove or gate behind auth before production launch.
import BaseLayout from '../layouts/BaseLayout.astro';
import ProjectLockup from '../components/ProjectLockup.astro';

const surfaces = [
  { token: '--surface-container-lowest', hex: '#fffcf7', label: 'surface-container-lowest', note: 'Floating / most elevated' },
  { token: '--surface / --background',   hex: '#faf6ee', label: 'surface / background',     note: 'Primary canvas' },
  { token: '--surface-container-low',    hex: '#f6f2e8', label: 'surface-container-low',    note: 'First tonal nest' },
  { token: '--surface-container',        hex: '#efeadc', label: 'surface-container',        note: 'Inset sections, sidebars' },
  { token: '--surface-container-high',   hex: '#e7e1d0', label: 'surface-container-high',   note: 'Deeper insets' },
  { token: '--surface-container-highest',hex: '#ddd6c3', label: 'surface-container-highest',note: 'Recessed / pressed' },
];

const pigments = [
  { token: '--pigment-terracotta', hex: '#b96b58', label: 'Faded Terracotta', note: 'Warnings, critical, destructive' },
  { token: '--pigment-copper',     hex: '#6d8c7c', label: 'Oxidized Copper',  note: 'Success, growth, positive' },
  { token: '--pigment-ochre',      hex: '#c29d59', label: 'Raw Ochre',        note: 'Cautions, tertiary accents' },
  { token: '--pigment-indigo',     hex: '#5a6d83', label: 'Faded Indigo',     note: 'Info, neutral data (only blue)' },
  { token: '--pigment-heather',    hex: '#8d7a85', label: 'Dusty Heather',    note: 'Categorical, supporting' },
];

const textColours = [
  { token: '--on-surface',         hex: '#383831', label: 'on-surface',         note: 'Primary text, charcoal slate' },
  { token: '--on-surface-variant', hex: '#5f5e5e', label: 'on-surface-variant', note: 'Secondary text, muted' },
  { token: '--on-surface-muted',   hex: '#8a887f', label: 'on-surface-muted',   note: 'Tertiary, timestamps, hints' },
  { token: '--secondary',          hex: '#785f53', label: 'secondary',          note: 'CTA fill, links, brand warm' },
  { token: '--secondary-dim',      hex: '#6b5348', label: 'secondary-dim',      note: 'Hover / pressed state of CTA' },
  { token: '--secondary-fixed-dim',hex: '#9a8679', label: 'secondary-fixed-dim',note: 'Input labels, muted accents' },
];

const spacing = [
  { token: '--space-1',  px: '4',   rem: '0.25' },
  { token: '--space-2',  px: '8',   rem: '0.5' },
  { token: '--space-3',  px: '12',  rem: '0.75' },
  { token: '--space-4',  px: '16',  rem: '1' },
  { token: '--space-5',  px: '24',  rem: '1.5' },
  { token: '--space-6',  px: '32',  rem: '2',    note: 'List separator default' },
  { token: '--space-7',  px: '40',  rem: '2.5' },
  { token: '--space-8',  px: '44',  rem: '2.75', note: 'Hero-card padding' },
  { token: '--space-10', px: '64',  rem: '4' },
  { token: '--space-12', px: '80',  rem: '5' },
  { token: '--space-16', px: '96',  rem: '6' },
  { token: '--space-20', px: '112', rem: '7',    note: 'Desktop lateral margin' },
  { token: '--space-24', px: '128', rem: '8' },
];

const radii = [
  { token: '--radius-sm',   value: '0.375rem / 6px',  label: 'radius-sm',   note: 'Dense UI, tags, chips' },
  { token: '--radius-md',   value: '0.75rem / 12px',  label: 'radius-md',   note: 'Default — buttons, cards, inputs' },
  { token: '--radius-lg',   value: '1.25rem / 20px',  label: 'radius-lg',   note: 'Hero cards, modals' },
  { token: '--radius-full', value: '9999px',           label: 'radius-full', note: 'Avatars, state dots only' },
];

const lucideIcons = [
  'file-text', 'calendar', 'users', 'lightbulb', 'message-square',
  'map', 'settings', 'arrow-right', 'check', 'plus',
  'eye', 'lock', 'log-out', 'edit-3', 'search',
];
---

<BaseLayout title="Style guide">
  <div class="sg-root">

    <!-- ── Page header ────────────────────────────────────────── -->
    <header class="sg-header">
      <div class="sg-inner">
        <span class="label-md sg-label">Design system review · Project Bifrost</span>
        <h1 class="display-lg sg-title">
          Visual language in <em class="emphasis">context.</em>
        </h1>
        <p class="lead sg-lead">
          Every token, type step, and component rendered from <code>design/colors_and_type.css</code>.
          Human review required before any real page is built.
        </p>
        <nav class="sg-nav" aria-label="Style guide sections">
          <a href="#logo">Logo</a>
          <a href="#colour">Colour</a>
          <a href="#type">Typography</a>
          <a href="#spacing">Spacing</a>
          <a href="#radii">Radii</a>
          <a href="#elevation">Elevation</a>
          <a href="#buttons">Buttons</a>
          <a href="#inputs">Inputs</a>
          <a href="#cards">Cards</a>
          <a href="#icons">Iconography</a>
          <a href="#motion">Motion</a>
          <a href="#editorial">Editorial</a>
        </nav>
      </div>
    </header>

    <!-- ── 01 · Logo ──────────────────────────────────────────── -->
    <section id="logo" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">01 — Logo</span>
        <div class="logo-grid">
          <div class="logo-cell logo-cell--light">
            <img src="/logo.svg" alt="Fenja AI wordmark (dark on light)" class="logo-wordmark" />
            <span class="label-sm">Wordmark · on light</span>
          </div>
          <div class="logo-cell logo-cell--dark">
            <img src="/logo-white.svg" alt="Fenja AI wordmark (light on dark)" class="logo-wordmark" />
            <span class="label-sm" style="color: rgba(255,252,247,0.55);">Wordmark · on dark</span>
          </div>
          <div class="logo-cell logo-cell--light">
            <img src="/logo-icon.svg" alt="Fenja AI spear icon (dark)" class="logo-icon" />
            <span class="label-sm">Icon · on light</span>
          </div>
          <div class="logo-cell logo-cell--dark">
            <img src="/logo-icon-white.svg" alt="Fenja AI spear icon (light)" class="logo-icon" />
            <span class="label-sm" style="color: rgba(255,252,247,0.55);">Icon · on dark</span>
          </div>
        </div>
        <p class="body-sm sg-note">
          Minimum sizes: icon 24×36px · wordmark 96×36px.
          Clear space equal to the spear-head height on all sides.
          Never distort, recolour, or place on a competing textured background.
        </p>

        <h2 class="sg-sub">ProjectLockup component</h2>
        <p class="body-sm sg-note">
          Definitive Emphasis pattern applied to the project name.
          "Project " in Newsreader regular, "Bifrost" in bold italic, terminal period.
          Fenja wordmark below at reduced opacity. Three sizes × two alignments.
        </p>
        <div class="lockup-demo-grid">
          <div class="lockup-demo-cell">
            <span class="label-sm sg-demo-label">hero · left</span>
            <ProjectLockup size="hero" alignment="left" />
          </div>
          <div class="lockup-demo-cell">
            <span class="label-sm sg-demo-label">lg · left</span>
            <ProjectLockup size="lg" alignment="left" />
          </div>
          <div class="lockup-demo-cell">
            <span class="label-sm sg-demo-label">md · left</span>
            <ProjectLockup size="md" alignment="left" />
          </div>
          <div class="lockup-demo-cell lockup-demo-cell--centered">
            <span class="label-sm sg-demo-label">hero · center</span>
            <ProjectLockup size="hero" alignment="center" />
          </div>
          <div class="lockup-demo-cell">
            <span class="label-sm sg-demo-label">md · left · no wordmark</span>
            <ProjectLockup size="md" alignment="left" showWordmark={false} />
          </div>
        </div>
      </div>
    </section>

    <!-- ── 02 · Colour ────────────────────────────────────────── -->
    <section id="colour" class="sg-section sg-section--tinted">
      <div class="sg-inner">
        <span class="label-md sg-section-label">02 — Colour</span>

        <h2 class="sg-sub">Surface tiers</h2>
        <p class="body-sm sg-note">
          Depth is tonal, not shadowed. Stack these tiers; never use a 1px solid border for layout separation.
        </p>
        <div class="swatch-row">
          {surfaces.map(s => (
            <div class="swatch" style={`background:${s.hex};`}>
              <div class="swatch-meta">
                <span class="swatch-name">{s.label}</span>
                <span class="swatch-hex">{s.hex}</span>
                <span class="swatch-note">{s.note}</span>
              </div>
            </div>
          ))}
        </div>

        <h2 class="sg-sub">Text colours</h2>
        <div class="text-colour-row">
          {textColours.map(t => (
            <div class="text-colour-cell">
              <span class="text-colour-sample" style={`color:${t.hex};`}>Aa</span>
              <span class="swatch-name">{t.label}</span>
              <span class="swatch-hex">{t.hex}</span>
              <span class="swatch-note">{t.note}</span>
            </div>
          ))}
        </div>

        <h2 class="sg-sub">Archival Pigments</h2>
        <p class="body-sm sg-note">
          Flat, matte inks — extracted from historical manuscripts.
          Never gradient, never glossy. At 20–40% opacity for data overlaps.
        </p>
        <div class="swatch-row">
          {pigments.map(p => (
            <div class="swatch swatch--tall" style={`background:${p.hex};`}>
              <div class="swatch-meta swatch-meta--light">
                <span class="swatch-name">{p.label}</span>
                <span class="swatch-hex">{p.hex}</span>
                <span class="swatch-note">{p.note}</span>
              </div>
            </div>
          ))}
        </div>

        <h2 class="sg-sub">Ghost border</h2>
        <div class="ghost-demo">
          <div class="ghost-demo-box">
            <span class="body-sm">
              <code>--outline-variant</code> at 15% opacity — the only permissible border for accessibility fallbacks.
              Never a solid 100% line for layout.
            </span>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 03 · Typography ────────────────────────────────────── -->
    <section id="type" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">03 — Typography</span>
        <p class="body-sm sg-note">
          Two families: <strong>Newsreader</strong> (serif) for intent and editorial authority;
          <strong>Manrope</strong> (sans) for execution and precision.
          Headlines always left-aligned. Body line-height 1.6.
        </p>

        <div class="type-scale">
          <div class="type-row">
            <span class="type-meta label-sm">display-xl · Newsreader 400 · −0.02em · lh 1.1</span>
            <div class="display-xl">A quiet record.</div>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">display-lg · Newsreader 400 · −0.02em · lh 1.1</span>
            <div class="display-lg">A quiet record.</div>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">display-md · Newsreader 400 · −0.02em · lh 1.1</span>
            <div class="display-md">A quiet record.</div>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">headline-lg · Newsreader 400 · −0.01em</span>
            <h1 class="headline-lg" style="margin:0;">Archive of work in progress.</h1>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">headline-md · Newsreader 400 · −0.01em</span>
            <h2 class="headline-md" style="margin:0;">Archive of work in progress.</h2>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">headline-sm · Newsreader 400 · −0.01em</span>
            <h3 class="headline-sm" style="margin:0;">Archive of work in progress.</h3>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">title-lg · Manrope 600 · 0</span>
            <h4 class="title-lg" style="margin:0;">Navigation · structural label</h4>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">title-md · Manrope 600 · 0</span>
            <h5 class="title-md" style="margin:0;">Navigation · structural label</h5>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">body-lg · Manrope 400 · lh 1.6</span>
            <p class="body-lg" style="margin:0;">
              Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market.
            </p>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">body-md · Manrope 400 · lh 1.6</span>
            <p class="body-md" style="margin:0;">
              Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market.
            </p>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">body-sm · Manrope 400 · lh 1.5 · on-surface-variant</span>
            <p class="body-sm" style="margin:0;">
              Data remains under absolute, localised control while we deliver the robust security and traceability demanded by the market.
            </p>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">label-md · Manrope 500 · uppercase · +0.08em</span>
            <span class="label-md">Section heading · status chip</span>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">label-sm · Manrope 500 · uppercase · +0.08em</span>
            <span class="label-sm">Section heading · status chip</span>
          </div>
          <div class="type-row">
            <span class="type-meta label-sm">lead · Newsreader italic 400 · on-surface-variant</span>
            <p class="lead" style="margin:0;">
              An interface that breathes, inviting contemplation rather than consumption.
            </p>
          </div>
        </div>

        <div class="type-emphasis-demo">
          <span class="label-md sg-sub-label">Definitive emphasis — headline syntax</span>
          <p class="body-sm sg-note">
            The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic.
            Everything before it stays in regular weight. Every headline ends with a period.
          </p>
          <p class="body-sm sg-note">
            Scope: applies to all display and headline scales — <code>display-xl</code>, <code>display-lg</code>,
            <code>display-md</code>, <code>headline-lg</code>, <code>headline-md</code>, <code>headline-sm</code>.
            Not applied to <code>title</code> (sans), <code>body</code>, <code>label</code>, or <code>lead</code>.
            Never applied to user-generated content (contribution text, document titles, notes).
          </p>
          <div class="emphasis-examples">
            <div class="display-md emphasis-headline">
              A quiet place to keep <em class="emphasis-keyword">what you are reading.</em>
            </div>
            <div class="headline-lg emphasis-headline">
              Reading alongside you, <em class="emphasis-keyword">Fenja.</em>
            </div>
            <div class="headline-md emphasis-headline">
              Ask the <em class="emphasis-keyword">archive.</em>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 04 · Spacing ───────────────────────────────────────── -->
    <section id="spacing" class="sg-section sg-section--tinted">
      <div class="sg-inner">
        <span class="label-md sg-section-label">04 — Spacing scale</span>
        <p class="body-sm sg-note">
          Editorial, generous. Desktop lateral margin is <code>--space-20</code> (7rem / 112px).
          List separation defaults to <code>--space-6</code> (2rem). Hero-card padding is <code>--space-8</code>.
        </p>
        <div class="spacing-list">
          {spacing.map(s => (
            <div class="spacing-row">
              <code class="spacing-token">{s.token}</code>
              <div class="spacing-bar-wrap">
                <div class="spacing-bar" style={`width:${s.px}px;`}></div>
              </div>
              <span class="spacing-values label-sm">{s.rem}rem · {s.px}px{s.note ? ` — ${s.note}` : ''}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- ── 05 · Radii ─────────────────────────────────────────── -->
    <section id="radii" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">05 — Corner radii</span>
        <p class="body-sm sg-note">
          <code>--radius-md</code> (12px) is the primary radius — used on buttons, cards, and inputs.
          Fully-rounded pills (<code>--radius-full</code>) are reserved for avatars and state dots only.
        </p>
        <div class="radii-row">
          {radii.map(r => (
            <div class="radii-cell">
              <div class="radii-shape" style={`border-radius:var(${r.token});`}></div>
              <code class="radii-token">{r.label}</code>
              <span class="body-sm">{r.value}</span>
              <span class="label-sm">{r.note}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    <!-- ── 06 · Elevation ─────────────────────────────────────── -->
    <section id="elevation" class="sg-section sg-section--tinted">
      <div class="sg-inner">
        <span class="label-md sg-section-label">06 — Elevation</span>
        <p class="body-sm sg-note">
          Depth comes from tonal layering, not shadow. Shadows are available only when a floating effect is truly needed —
          blur 32–64px, opacity 4–6%, color <code>--on-surface</code> (warm, never pure black).
        </p>
        <div class="elevation-row">
          <div class="elevation-card elevation-card--none">
            <span class="label-sm">No elevation</span>
            <p class="body-sm" style="margin:0;">Tonal lift only. A <code>surface-container-lowest</code> card on a <code>surface-container-low</code> section — zero shadow needed.</p>
          </div>
          <div class="elevation-card elevation-card--ambient">
            <span class="label-sm">shadow-ambient</span>
            <p class="body-sm" style="margin:0;">For floating cards. <code>0 12px 32px −12px rgba(56,56,49,.06)</code></p>
          </div>
          <div class="elevation-card elevation-card--float">
            <span class="label-sm">shadow-float</span>
            <p class="body-sm" style="margin:0;">For popovers and command palettes. Two-layer warm shadow.</p>
          </div>
          <div class="elevation-card elevation-card--modal">
            <span class="label-sm">shadow-modal</span>
            <p class="body-sm" style="margin:0;">For overlays and modals. Deepest elevation in the system.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 07 · Buttons ───────────────────────────────────────── -->
    <section id="buttons" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">07 — Buttons</span>
        <p class="body-sm sg-note">
          No border on any button. No shadow. One easing (<code>cubic-bezier(.2,0,0,1)</code>), one speed (240ms).
          Press = 1px translateY down. No scale transforms.
        </p>
        <div class="btn-showcase">
          <div class="btn-group">
            <span class="label-sm sg-sub-label">Primary</span>
            <p class="body-sm" style="margin:0 0 var(--space-4);">
              <code>#785f53</code> fill · white text · radius-md · hover → <code>#6b5348</code>
            </p>
            <div class="btn-row">
              <button class="btn-primary">Open the archive</button>
              <button class="btn-primary" disabled>Disabled</button>
            </div>
          </div>
          <div class="btn-group">
            <span class="label-sm sg-sub-label">Secondary</span>
            <p class="body-sm" style="margin:0 0 var(--space-4);">
              <code>surface-container-highest</code> fill · <code>on-surface</code> text · reads like a pressed indentation.
            </p>
            <div class="btn-row">
              <button class="btn-secondary">Cancel</button>
              <button class="btn-secondary" disabled>Disabled</button>
            </div>
          </div>
          <div class="btn-group">
            <span class="label-sm sg-sub-label">Tertiary</span>
            <p class="body-sm" style="margin:0 0 var(--space-4);">
              Warm-wheat <code>#d9c9a8</code> fill · dark-walnut text · serif italic arrow slides 4px on hover.
            </p>
            <div class="btn-row">
              <button class="btn-tertiary">Learn more <span class="btn-arr">&rarr;</span></button>
              <button class="btn-tertiary" disabled>Disabled <span class="btn-arr">&rarr;</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 08 · Inputs ────────────────────────────────────────── -->
    <section id="inputs" class="sg-section sg-section--tinted">
      <div class="sg-inner">
        <span class="label-md sg-section-label">08 — Form inputs</span>
        <p class="body-sm sg-note">
          Forgo the box. <code>surface-variant</code> background, bottom-only ghost border. No rounded box.
          Labels: all-caps, +0.08em tracking, <code>secondary-fixed-dim</code> colour.
          Focus: bottom border thickens to <code>--secondary</code>.
        </p>
        <div class="input-grid">
          <div class="field">
            <label class="field-label" for="sg-email">Email address</label>
            <input class="field-input" id="sg-email" type="email" placeholder="mette@organisation.dk" />
          </div>
          <div class="field">
            <label class="field-label" for="sg-org">Organisation</label>
            <input class="field-input" id="sg-org" type="text" value="Statens Serum Institut" />
            <span class="field-hint">e.g. Auto-saved a moment ago.</span>
          </div>
          <div class="field">
            <label class="field-label" for="sg-idea">Your idea</label>
            <textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="What if the wiki could auto-link to relevant meeting notes when I paste a concept?"></textarea>
          </div>
          <div class="field">
            <label class="field-label" for="sg-disabled">Read-only</label>
            <input class="field-input" id="sg-disabled" type="text" value="Cannot be changed" disabled />
          </div>
        </div>
      </div>
    </section>

    <!-- ── 09 · Cards ─────────────────────────────────────────── -->
    <section id="cards" class="sg-section sg-section--mid">
      <div class="sg-inner">
        <span class="label-md sg-section-label">09 — Cards</span>
        <p class="body-sm sg-note">
          No borders. No shadows on standard cards. Elevation is tonal — place a lighter tier card on a darker tier section.
          Hero cards: <code>--space-8</code> (44px) padding. Standard cards: <code>--space-5</code> to <code>--space-6</code>.
        </p>

        <span class="label-sm sg-sub-label">Hero card (surface-container-lowest on surface-container)</span>
        <div class="card-hero">
          <span class="label-sm">Latest update</span>
          <h2 class="headline-md" style="margin: var(--space-3) 0 var(--space-4);">
            Pilot infrastructure is <em class="emphasis-keyword">live.</em>
          </h2>
          <p class="body-md" style="margin:0 0 var(--space-5);">
            The Hetzner CAX11 is provisioned, Caddy is routing HTTPS, and the first migrations are applied.
            We are ready to issue the first wave of invite links.
          </p>
          <button class="btn-primary">Read the update</button>
        </div>

        <span class="label-sm sg-sub-label" style="margin-top: var(--space-7); display:block;">Standard cards (surface-container-lowest grid on surface-container)</span>
        <div class="cards-grid">
          <div class="card-standard">
            <span class="label-sm">In progress</span>
            <h3 class="headline-sm" style="margin: var(--space-2) 0 var(--space-3);">Authentication system</h3>
            <p class="body-sm" style="margin:0;">Session cookies, bcrypt password hashing, and signed one-time invite tokens.</p>
          </div>
          <div class="card-standard">
            <span class="label-sm">Next</span>
            <h3 class="headline-sm" style="margin: var(--space-2) 0 var(--space-3);">Contribution feed</h3>
            <p class="body-sm" style="margin:0;">Ideas, inspiration, and questions from all pilot participants in one shared stream.</p>
          </div>
          <div class="card-standard">
            <span class="label-sm">Later</span>
            <h3 class="headline-sm" style="margin: var(--space-2) 0 var(--space-3);">Calendar view</h3>
            <p class="body-sm" style="margin:0;">CAB meetings and milestones. Big, typographic, unrushed. One month per view.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 10 · Iconography ───────────────────────────────────── -->
    <section id="icons" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">10 — Iconography</span>
        <p class="body-sm sg-note">
          Custom runic/graphite icon set is aspirational — not yet produced. Current substitution: <strong>Lucide</strong> at 1.5px stroke weight.
          Stroke colour: <code>--on-surface</code> (#383831). No fills on main silhouette. No emoji. No rounded Material icons.
        </p>

        <span class="label-sm sg-sub-label">Lucide substitution at 24×24, stroke 1.5</span>
        <div class="icon-grid" id="icon-grid">
          {lucideIcons.map(name => (
            <div class="icon-cell">
              <i data-lucide={name} class="icon"></i>
              <span class="label-sm">{name}</span>
            </div>
          ))}
        </div>

        <span class="label-sm sg-sub-label" style="margin-top:var(--space-7); display:block;">
          Sizes in context
        </span>
        <div class="icon-sizes">
          <div class="icon-size-row">
            <i data-lucide="file-text" style="width:16px;height:16px;stroke:var(--on-surface);stroke-width:1.5;"></i>
            <span class="label-sm">16×16 — inline with label-md, dense tables</span>
          </div>
          <div class="icon-size-row">
            <i data-lucide="file-text" style="width:20px;height:20px;stroke:var(--on-surface);stroke-width:1.5;"></i>
            <span class="label-sm">20×20 — navigation, form adornments</span>
          </div>
          <div class="icon-size-row">
            <i data-lucide="file-text" style="width:24px;height:24px;stroke:var(--on-surface);stroke-width:1.5;"></i>
            <span class="label-sm">24×24 — default UI icon</span>
          </div>
          <div class="icon-size-row">
            <i data-lucide="file-text" style="width:32px;height:32px;stroke:var(--on-surface);stroke-width:1.5;"></i>
            <span class="label-sm">32×32 — feature callouts</span>
          </div>
        </div>

        <span class="label-sm sg-sub-label" style="margin-top:var(--space-7); display:block;">Unicode glyphs as typographic icons</span>
        <div class="glyph-row">
          <span class="glyph-cell"><span class="glyph">—</span><span class="label-sm">em-dash · attribution</span></span>
          <span class="glyph-cell"><span class="glyph">§</span><span class="label-sm">section · notes</span></span>
          <span class="glyph-cell"><span class="glyph">¶</span><span class="label-sm">pilcrow · archive</span></span>
          <span class="glyph-cell"><span class="glyph">·</span><span class="label-sm">interpunct · lists</span></span>
          <span class="glyph-cell"><span class="glyph">↗</span><span class="label-sm">external link</span></span>
          <span class="glyph-cell"><span class="glyph">↳</span><span class="label-sm">reply / thread</span></span>
        </div>
      </div>
    </section>

    <!-- ── 11 · Motion ────────────────────────────────────────── -->
    <section id="motion" class="sg-section sg-section--tinted">
      <div class="sg-inner">
        <span class="label-md sg-section-label">11 — Motion</span>
        <p class="body-sm sg-note">
          One easing. Three durations. No bounces, no springs, no overshoots. The system moves with confidence — not enthusiasm.
        </p>

        <div class="motion-grid">
          <div class="motion-cell">
            <span class="label-sm">Easing — standard</span>
            <code class="motion-value">cubic-bezier(0.2, 0.0, 0, 1)</code>
            <span class="body-sm">All transitions. Decelerating — fast start, slow finish.</span>
          </div>
          <div class="motion-cell">
            <span class="label-sm">Easing — entrance</span>
            <code class="motion-value">cubic-bezier(0, 0, 0, 1)</code>
            <span class="body-sm">Elements entering the viewport. Maximum deceleration.</span>
          </div>
          <div class="motion-cell">
            <span class="label-sm">Easing — exit</span>
            <code class="motion-value">cubic-bezier(0.3, 0, 1, 1)</code>
            <span class="body-sm">Elements leaving. Accelerating — quick and unobtrusive.</span>
          </div>
          <div class="motion-cell">
            <span class="label-sm">Duration — fast</span>
            <code class="motion-value">140ms</code>
            <span class="body-sm">Micro-interactions: hover colour shifts, focus rings.</span>
          </div>
          <div class="motion-cell">
            <span class="label-sm">Duration — default</span>
            <code class="motion-value">240ms</code>
            <span class="body-sm">All standard component transitions.</span>
          </div>
          <div class="motion-cell">
            <span class="label-sm">Duration — slow</span>
            <code class="motion-value">420ms</code>
            <span class="body-sm">Layout changes, page entrances (fade + 4px translate-up).</span>
          </div>
        </div>

        <div class="motion-demo">
          <span class="label-sm sg-sub-label">Live demo — hover each element</span>
          <div class="motion-demo-row">
            <button class="btn-primary motion-demo-btn">Primary hover</button>
            <button class="btn-secondary motion-demo-btn">Secondary hover</button>
            <button class="btn-tertiary motion-demo-btn">Tertiary hover <span class="btn-arr">&rarr;</span></button>
            <a href="#motion" class="motion-demo-link">Editorial link hover</a>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 12 · Editorial patterns ─────────────────────────────── -->
    <section id="editorial" class="sg-section sg-section--light">
      <div class="sg-inner">
        <span class="label-md sg-section-label">12 — Editorial patterns</span>

        <h2 class="sg-sub">Pulled quote</h2>
        <p class="body-sm sg-note">
          A short, high-impact statement extracted from body copy. Newsreader italic,
          oversized, with a left-rule in the secondary colour. Muted attribution line below.
          Use sparingly — one per section maximum.
        </p>
        <div class="sg-demo-panel">
          <blockquote class="pulled-quote">
            <p class="pulled-quote__text">We can't build our digital fortress on foreign clouds.</p>
            <footer class="pulled-quote__attribution">— Framing line, Project Bifrost vision</footer>
          </blockquote>
        </div>

        <h2 class="sg-sub">Large statistic</h2>
        <p class="body-sm sg-note">
          A single striking figure, set in Newsreader at display scale, colour-muted.
          Followed by a short label in Manrope. Used for credibility anchors in pitch sections.
        </p>
        <div class="sg-demo-panel">
          <figure class="stat-figure">
            <p class="stat-figure__number">97%</p>
            <figcaption class="stat-figure__label">of AI foundational model usage falls outside EU jurisdiction</figcaption>
          </figure>
        </div>

        <h2 class="sg-sub">Architecture diagram row</h2>
        <p class="body-sm sg-note">
          Four stacked horizontal rows using surface tiers for tonal separation. No borders,
          no drop shadows. Left label in Manrope tracked uppercase, right body in Newsreader italic.
        </p>
        <div class="sg-demo-panel">
          <div class="arch-diagram">
            <div class="arch-row" style="background: var(--surface-container-lowest);">
              <span class="arch-row__label label-sm">AI Model</span>
              <span class="arch-row__desc body-md">Locally hosted open-source foundation model — no data leaves the infrastructure.</span>
            </div>
            <div class="arch-row" style="background: var(--surface-container-low);">
              <span class="arch-row__label label-sm">Agents</span>
              <span class="arch-row__desc body-md">Specialised agents that handle distinct tasks and collaborate.</span>
            </div>
            <div class="arch-row" style="background: var(--surface-container);">
              <span class="arch-row__label label-sm">Semantic Layer</span>
              <span class="arch-row__desc body-md">The vocabulary through which the AI understands the organisation.</span>
            </div>
            <div class="arch-row" style="background: var(--surface-container-high);">
              <span class="arch-row__label label-sm">Tools</span>
              <span class="arch-row__desc body-md">The capabilities agents use to act: read files, query systems, produce output.</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── Footer ─────────────────────────────────────────────── -->
    <footer class="sg-footer">
      <div class="sg-inner sg-footer-inner">
        <img src="/logo-icon.svg" alt="Fenja AI" class="sg-footer-icon" />
        <span class="body-sm">
          Design system review · Project Bifrost ·
          <code>design/colors_and_type.css</code> is authoritative.
          This page is for human approval only — not linked from the product.
        </span>
      </div>
    </footer>

  </div>
</BaseLayout>

<!-- Lucide icons CDN -->
<script
  src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"
  is:inline
></script>
<script is:inline>
  document.addEventListener('DOMContentLoaded', function () {
    if (typeof lucide !== 'undefined') lucide.createIcons();
  });
</script>

<style>
  /* ── Page shell ─────────────────────────────────────────────── */
  .sg-root {
    min-height: 100vh;
  }

  .sg-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }

  /* ── Section backgrounds (tonal alternation, no borders) ─────── */
  .sg-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .sg-section--light  { background: var(--background); }
  .sg-section--tinted { background: var(--surface-container-low); }
  .sg-section--mid    { background: var(--surface-container); }

  /* ── Header ─────────────────────────────────────────────────── */
  .sg-header {
    background: var(--surface-container-lowest);
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }
  .sg-label {
    display: block;
    margin-bottom: var(--space-4);
  }
  .sg-title {
    margin-bottom: var(--space-5);
  }
  .sg-title .emphasis {
    font-weight: 700;
    font-style: italic;
  }
  .sg-lead {
    max-width: var(--reading-max);
    margin-bottom: var(--space-8);
  }

  /* ── Section nav ─────────────────────────────────────────────── */
  .sg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .sg-nav a {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .sg-nav a:hover {
    color: var(--on-surface);
    border-bottom: none;
  }

  /* ── Section labels ──────────────────────────────────────────── */
  .sg-section-label {
    display: block;
    margin-bottom: var(--space-7);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-label-md);
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .sg-sub {
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: var(--space-8) 0 var(--space-4);
  }
  .sg-sub-label {
    display: block;
    margin-bottom: var(--space-4);
    color: var(--on-surface-muted);
  }
  .sg-note {
    max-width: var(--reading-max);
    margin-bottom: var(--space-6) !important;
    color: var(--on-surface-variant);
  }

  /* ── 01 Logo ─────────────────────────────────────────────────── */
  .logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .logo-cell {
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .logo-cell--light { background: var(--surface-container-low); }
  .logo-cell--dark  { background: var(--on-surface); }
  .logo-wordmark {
    height: 36px;
    width: auto;
    display: block;
  }
  .logo-icon {
    height: 48px;
    width: auto;
    display: block;
  }

  /* ── ProjectLockup demo ─────────────────────────────────────── */
  .lockup-demo-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-6);
  }
  .lockup-demo-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--background);
    border-radius: var(--radius-md);
  }
  .lockup-demo-cell--centered {
    background: var(--surface-container-low);
    align-items: center;
  }
  .sg-demo-label {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  /* ── 02 Colour ───────────────────────────────────────────────── */
  .swatch-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .swatch {
    border-radius: var(--radius-md);
    height: 80px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-3);
    position: relative;
    overflow: hidden;
  }
  .swatch--tall { height: 100px; }
  .swatch-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .swatch-meta--light .swatch-name,
  .swatch-meta--light .swatch-hex,
  .swatch-meta--light .swatch-note {
    color: rgba(255, 252, 247, 0.9);
  }
  .swatch-name {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface);
    font-weight: 600;
  }
  .swatch-hex {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface-variant);
  }
  .swatch-note {
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--on-surface-muted);
    margin-top: 2px;
  }

  .text-colour-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .text-colour-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-5);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
  }
  .text-colour-sample {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-2);
  }

  .ghost-demo {
    margin-top: var(--space-4);
  }
  .ghost-demo-box {
    display: inline-block;
    padding: var(--space-5) var(--space-6);
    border: 1px solid rgba(186, 186, 176, 0.15);
    border-radius: var(--radius-md);
    max-width: 38rem;
  }

  /* ── 03 Typography ───────────────────────────────────────────── */
  .type-scale {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-10);
  }
  .type-row {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: var(--space-6);
    align-items: baseline;
    padding: var(--space-5) 0;
    border-bottom: 1px solid rgba(186, 186, 176, 0.15);
  }
  .type-meta {
    color: var(--on-surface-muted);
    padding-top: 4px;
  }

  .type-emphasis-demo {
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
  }
  .emphasis-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-5);
  }
  .emphasis-headline {
    margin: 0;
  }
  .emphasis-keyword {
    font-weight: 700;
    font-style: italic;
  }

  /* ── 04 Spacing ──────────────────────────────────────────────── */
  .spacing-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .spacing-row {
    display: grid;
    grid-template-columns: 13rem 200px 1fr;
    gap: var(--space-5);
    align-items: center;
  }
  .spacing-token {
    font-family: var(--font-mono);
    font-size: var(--text-label-sm);
    color: var(--on-surface-variant);
  }
  .spacing-bar-wrap {
    height: 16px;
    display: flex;
    align-items: center;
  }
  .spacing-bar {
    height: 10px;
    background: var(--secondary);
    border-radius: var(--radius-sm);
    min-width: 4px;
  }
  .spacing-values {
    color: var(--on-surface-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-label-sm);
  }

  /* ── 05 Radii ────────────────────────────────────────────────── */
  .radii-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
  .radii-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .radii-shape {
    width: 80px;
    height: 80px;
    background: var(--surface-container);
    margin-bottom: var(--space-3);
  }
  .radii-token {
    font-family: var(--font-mono);
    font-size: var(--text-label-sm);
    color: var(--on-surface-variant);
  }

  /* ── 06 Elevation ────────────────────────────────────────────── */
  .elevation-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
  .elevation-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .elevation-card--none    { box-shadow: var(--shadow-none); }
  .elevation-card--ambient { box-shadow: var(--shadow-ambient); }
  .elevation-card--float   { box-shadow: var(--shadow-float); }
  .elevation-card--modal   { box-shadow: var(--shadow-modal); }

  /* ── 07 Buttons ──────────────────────────────────────────────── */
  .btn-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .btn-group {
    display: flex;
    flex-direction: column;
  }
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  .btn-primary,
  .btn-secondary,
  .btn-tertiary {
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    border: 0;
    cursor: pointer;
    padding: 11px 22px;
    border-radius: var(--radius-md);
    transition:
      background var(--duration-med) var(--ease-standard),
      color var(--duration-med) var(--ease-standard),
      gap var(--duration-med) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }
  .btn-primary:active,
  .btn-secondary:active,
  .btn-tertiary:active {
    transform: translateY(1px);
  }
  .btn-primary:disabled,
  .btn-secondary:disabled,
  .btn-tertiary:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .btn-primary {
    background: var(--secondary);
    color: var(--on-secondary);
  }
  .btn-primary:hover:not(:disabled) { background: var(--secondary-dim); }

  .btn-secondary {
    background: var(--surface-container-highest);
    color: var(--on-surface);
    box-shadow: inset 0 1px 0 rgba(56, 56, 49, 0.05);
  }
  .btn-secondary:hover:not(:disabled) { background: #d2cab4; }

  .btn-tertiary {
    background: #d9c9a8;
    color: #4a3a2f;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .btn-tertiary:hover:not(:disabled) {
    background: #cdbb95;
    gap: var(--space-3);
  }
  .btn-arr {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    transform: translateY(-1px);
  }

  /* ── 08 Inputs ───────────────────────────────────────────────── */
  .input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
    max-width: 44rem;
  }
  .field {
    display: flex;
    flex-direction: column;
  }
  .field-label {
    font-family: var(--font-sans);
    font-size: var(--text-label-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--secondary-fixed-dim);
    margin-bottom: var(--space-2);
  }
  .field-input {
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    color: var(--on-surface);
    background: var(--surface-container-high);
    border: 0;
    border-bottom: 1px solid rgba(186, 186, 176, 0.3);
    border-radius: 0;
    padding: 10px 2px;
    outline: none;
    resize: none;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }
  .field-input:hover:not(:disabled) { background: #ded7c4; }
  .field-input:focus { border-bottom-color: var(--secondary); }
  .field-input:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .field-textarea { height: 80px; }
  .field-hint {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-label-sm);
    color: var(--on-surface-muted);
    margin-top: var(--space-2);
  }

  /* ── 09 Cards ────────────────────────────────────────────────── */
  .card-hero {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 48rem;
    margin-bottom: var(--space-6);
  }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .card-standard {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--space-6);
  }

  /* ── 10 Icons ────────────────────────────────────────────────── */
  .icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 72px;
  }
  .icon {
    width: 24px;
    height: 24px;
    stroke: var(--on-surface);
    stroke-width: 1.5;
    fill: none;
  }
  .icon-sizes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .icon-size-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .glyph-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .glyph-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 72px;
  }
  .glyph {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--on-surface);
  }

  /* ── 11 Motion ───────────────────────────────────────────────── */
  .motion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
  }
  .motion-cell {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .motion-value {
    font-family: var(--font-mono);
    font-size: var(--text-label-md);
    color: var(--secondary);
    display: block;
    margin: var(--space-1) 0;
  }
  .motion-demo {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-8);
  }
  .motion-demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-4);
  }
  .motion-demo-link {
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
  }

  /* ── Footer ──────────────────────────────────────────────────── */
  /* ── 12 Editorial patterns ──────────────────────────────────── */
  .sg-demo-panel {
    padding: var(--space-8);
    background: var(--background);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
  }

  /* Pulled quote */
  .pulled-quote {
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-left: 3px solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 44rem;
  }
  .pulled-quote__text {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-style: italic;
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface-variant);
    margin: 0;
  }
  .pulled-quote__attribution {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-muted);
  }

  /* Large statistic */
  .stat-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .stat-figure__number {
    font-family: var(--font-serif);
    font-size: var(--text-display-xl);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--on-surface-muted);
    margin: 0;
  }
  .stat-figure__label {
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    color: var(--on-surface-variant);
    max-width: 28rem;
    line-height: var(--leading-relaxed);
  }

  /* Architecture diagram */
  .arch-diagram {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .arch-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5) var(--space-6);
  }
  .arch-row__label {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    font-weight: 600;
  }
  .arch-row__desc {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  .sg-footer {
    background: var(--on-surface);
    padding: var(--space-8) 0;
  }
  .sg-footer-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .sg-footer .body-sm {
    color: rgba(255, 252, 247, 0.5);
    margin: 0;
  }
  .sg-footer .body-sm code {
    color: rgba(255, 252, 247, 0.7);
  }
  .sg-footer-icon {
    height: 28px;
    width: auto;
    opacity: 0.7;
    filter: invert(1);
  }
</style>
