{# showcase_1_tags.html
   Visual reference for all styled elements.
   Section 1: Standard HTML5 tags with base styles.
   Section 2: Custom tags in their natural state.
   Section 3: Color components - txtcolor / bgcolor / bordercolor.
   Section 4: Color palette reference.
#}

<style>
  /* -- Showcase helpers -----------------------------------------
     Local only. Not part of APEP. Used to group and label demo
     areas without interfering with the elements being shown.
  ---------------------------------------------------------------- */

  .sc-group {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    position: relative;
    margin-top: var(--space-8);
  }

  .sc-label {
    position: absolute;
    top: -0.8em;
    left: var(--space-4);
    background-color: var(--color-bg);
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;

    letter-spacing: var(--letter-spacing-wide);
    white-space: nowrap;
  }

  .sc-section-rule {
    border: none;
    border-top: 3px solid var(--color-surface);
    margin: var(--space-16) 0 var(--space-12);
  }

  /* bordercolor demo helper - sets border style without touching border-color */
  .sc-bordered {
    border-style: solid;
    border-width: 2px;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }

  /* color palette grid (from main.html) */
.color-grid-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.color-grid {
  display: grid;
  grid-template-columns: 52px 52px 1fr;
  gap: 0;
  font-family: monospace;
  font-size: 13px;
  flex: 1 1 0;
  min-width: 0;
}
  .color-grid-header { display: contents; }
  .color-grid-header > div {
    padding: 6px 8px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ddd;
  }
  .color-grid-header > div:nth-child(2) { background: #111;}
  .color-row  { display: contents; }
  .color-cell {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .color-cell-dark {
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .color-swatch {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .color-name-cell {
    padding: 4px 14px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #555;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    white-space: nowrap;
  }
  .section-row { display: contents; }
  .section-row > .section-light { background: #e8edf5; border-bottom: 1px solid #cdd5e3; }
  .section-row > .section-dark  { background: #1c2030; border-bottom: 1px solid #2a3050; }
  .section-row > .section-label {
    background: #e8edf5;
    border-bottom: 1px solid #cdd5e3;
    padding: 8px 14px;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a5580;
    display: flex;
    align-items: center;
  }
</style>

<stack gap="xl">


{# ════════════════════════════════════════════════════════════
   SECTION 1 - STANDARD HTML5 TAGS
   ════════════════════════════════════════════════════════════ #}

<prose>
    <h1>Standard HTML5 Tags</h1>
    <p>Native HTML5 elements styled via base_typography.css and base_fallback.css. No custom tags, no color attributes.</p>
</prose>


{# -- Headings ----------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">h1 - h6</span>
    <prose>
        <h1>h1 - Main Heading</h1>
        <h2>h2 - Section Heading</h2>
        <h3>h3 - Subsection</h3>
        <h4>h4 - Fourth Level</h4>
        <h5>h5 - Fifth Level</h5>
        <h6>h6 - Sixth Level</h6>
    </prose>
</div>


{# -- Paragraph & Inline ------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">p · strong · em · small · s · u · q · abbr · dfn · cite · sub · sup · del · ins · mark · time · samp · var</span>
    <prose>
        <p>A standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>
            <strong>strong</strong> - important. &nbsp;
            <em>em</em> - emphasis. &nbsp;
            <small>small</small> - fine print. &nbsp;
            <s>s</s> - no longer accurate. &nbsp;
            <u>u</u> - unarticulated annotation. &nbsp;
            <b>b</b> - bold. &nbsp;
            <i>i</i> - alternate voice.
        </p>
        <p>
            <q>Short inline quotation using the q element.</q> &nbsp;
            Use <abbr title="HyperText Markup Language">HTML</abbr> for structure and <abbr title="Cascading Style Sheets">CSS</abbr> for presentation. &nbsp;
            The <dfn>viewport</dfn> is the visible area of a web page. &nbsp;
            <cite>The Design of Everyday Things</cite> - Don Norman.
        </p>
        <p>
            H<sub>2</sub>O &nbsp;·&nbsp; E = mc<sup>2</sup> &nbsp;·&nbsp;
            <del>removed text</del> &nbsp;·&nbsp;
            <ins>inserted text</ins> &nbsp;·&nbsp;
            Highlighted: <mark>brown fox</mark> and <mark type="blue">lazy dog</mark>.
        </p>
        <p>
            Event on <time datetime="2025-06-12">June 12, 2025</time>. &nbsp;·&nbsp;
            Sample output: <samp>Error: file not found</samp> &nbsp;·&nbsp;
            Variable: <var>x</var> = <var>y</var> + <var>z</var>
        </p>
        <p><a href="#">Standard link</a> &nbsp;·&nbsp; <a href="#visited">Visited link</a></p>
    </prose>
</div>


{# -- kbd + code --------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">kbd · code</span>
    <stack gap="md">
        <p>Save: <kbd>Ctrl</kbd> + <kbd>S</kbd> &nbsp;·&nbsp; Copy: <kbd>Ctrl</kbd> + <kbd>C</kbd> &nbsp;·&nbsp; Paste: <kbd>Ctrl</kbd> + <kbd>V</kbd></p>
        <p>Inline: use <code inline>display: flex</code> to enable flex layout on a container.</p>
        <code>const greet = (name) => {
    return `Hello, ${name}!`;
};

console.log(greet("World"));</code>
    </stack>
</div>


{# -- Blockquote --------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">blockquote</span>
    <stack gap="sm">
        <blockquote>Default - a passage quoted from another source.</blockquote>
        <blockquote type="success">type="success" - everything went as expected.</blockquote>
        <blockquote type="warning">type="warning" - proceed with caution.</blockquote>
        <blockquote type="danger">type="danger" - critical issue, action required.</blockquote>
        <blockquote type="info">type="info" - informational note, no action needed.</blockquote>
    </stack>
</div>


{# -- Lists -------------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">ul · ol · dl / dt · dd · li</span>
    <split-group gap="md">
        <split>
            <prose>
                <h3>ul / li</h3>
                <ul>
                    <li>First item</li>
                    <li>Second item with <a href="#">a link</a></li>
                    <li>Third item</li>
                </ul>
            </prose>
        </split>
        <split>
            <prose>
                <h3>ol / li</h3>
                <ol>
                    <li>Step one</li>
                    <li>Step two</li>
                    <li>Step three</li>
                </ol>
            </prose>
        </split>
        <split>
            <prose>
                <h3>dl / dt / dd</h3>
                <dl>
                    <dt>HTML</dt>
                    <dd>Structure and semantics.</dd>
                    <dt>CSS</dt>
                    <dd>Visual presentation and layout.</dd>
                    <dt>JavaScript</dt>
                    <dd>Behaviour and interactivity.</dd>
                </dl>
            </prose>
        </split>
    </split-group>
</div>


{# -- Table -------------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">table · thead · tbody · tfoot · tr · th · td</span>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>Status</th>
                <th>Since</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Müller</td>
                <td>Lead Developer</td>
                <td>Active</td>
                <td>2021</td>
            </tr>
            <tr>
                <td>Bob Schneider</td>
                <td>UX Designer</td>
                <td>Active</td>
                <td>2022</td>
            </tr>
            <tr>
                <td>Clara Becker</td>
                <td>Project Manager</td>
                <td>On leave</td>
                <td>2020</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">3 team members total</td>
            </tr>
        </tfoot>
    </table>
</div>


{# -- Pre / Address / Figure --------------------------------- #}

<div class="sc-group">
    <span class="sc-label">pre · address · figure · figcaption</span>
    <split-group gap="lg">
        <split>
            <pre>pre - preserves whitespace.
  name: "showcase"
  version: 1.0
  tags: [html, css]</pre>
        </split>
        <split>
            <address>
                Soss Community<br>
                Example Street 1, Exampletown 12345<br>
                <a href="mailto:community@soss.page">community@soss.page</a>
            </address>
        </split>
        <split>
            <figure>
                <blockquote>"Any sufficiently advanced technology is indistinguishable from magic."</blockquote>
                <figcaption>Arthur C. Clarke, <cite>Profiles of the Future</cite>, 1962</figcaption>
            </figure>
        </split>
    </split-group>
</div>


{# -- Details / Summary / HR --------------------------------- #}

<div class="sc-group">
    <span class="sc-label">details · summary · hr</span>
    <stack gap="sm">
        <details>
            <summary>Click to expand - details / summary</summary>
            <p>Hidden content revealed after clicking the summary element.</p>
        </details>
        <details open>
            <summary>Already open on load - details[open]</summary>
            <p>The <code inline>open</code> attribute makes this expanded by default.</p>
        </details>
        <hr>
    </stack>
</div>


{# -- Form elements ------------------------------------------ #}

<div class="sc-group">
    <span class="sc-label">input · textarea · select · button · fieldset · legend · label · progress · meter · output</span>
    <split-group gap="lg">
        <split>
            <stack gap="sm">
                <prose><h3>Text inputs</h3></prose>
                <label>text<br><input type="text" placeholder="Enter text here"></label>
                <label>email<br><input type="email" placeholder="name@example.com"></label>
                <label>password<br><input type="password" placeholder="••••••••"></label>
                <label>number<br><input type="number" placeholder="0"></label>
                <label>date<br><input type="date"></label>
                <label>search<br><input type="search" placeholder="Search…"></label>
                <label>url<br><input type="url" placeholder="https://"></label>
                <label>disabled<br><input type="text" value="Cannot edit this" disabled></label>
                <label>textarea<br>
                    <textarea rows="3" placeholder="Write something here…"></textarea>
                </label>
                <label>datalist<br>
                    <input list="frameworks" placeholder="Pick or type a framework">
                    <datalist id="frameworks">
                        <option value="Django">
                        <option value="Flask">
                        <option value="FastAPI">
                    </datalist>
                </label>
            </stack>
        </split>
        <split>
            <stack gap="sm">
                <prose><h3>Select</h3></prose>
                <label>select<br>
                    <select>
                        <option value="">Choose an option</option>
                        <optgroup label="Group A">
                            <option value="a1">Option A1</option>
                            <option value="a2">Option A2</option>
                        </optgroup>
                        <optgroup label="Group B">
                            <option value="b1">Option B1</option>
                        </optgroup>
                    </select>
                </label>

                <prose><h3>Checkboxes &amp; Radios</h3></prose>
                <fieldset>
                    <legend>Checkboxes</legend>
                    <label><input type="checkbox" checked> Option Alpha</label>
                    <label><input type="checkbox"> Option Beta</label>
                    <label><input type="checkbox" disabled> Disabled</label>
                </fieldset>
                <fieldset>
                    <legend>Radio buttons</legend>
                    <label><input type="radio" name="demo" checked> Choice One</label>
                    <label><input type="radio" name="demo"> Choice Two</label>
                    <label><input type="radio" name="demo" disabled> Disabled</label>
                </fieldset>

                <prose><h3>Range / Color / File</h3></prose>
                <label>range<br><input type="range" min="0" max="100" value="40"></label>
                <label>color<br><input type="color" value="#3b82f6"></label>
                <label>file<br><input type="file"></label>
            </stack>
        </split>
        <split>
            <stack gap="sm">
                <prose><h3>Buttons</h3></prose>
                <button type="button">button</button>
                <button type="submit">type="submit"</button>
                <button type="reset">type="reset"</button>
                <button type="button" disabled>disabled</button>
                <input type="button" value="input[type=button]">
                <input type="submit" value="input[type=submit]">
                <input type="reset" value="input[type=reset]">

                <prose><h3>Progress / Meter / Output</h3></prose>
                <label>progress (60%)<br><progress value="60" max="100"></progress></label>
                <label>meter - optimum<br><meter value="0.6" min="0" max="1" low="0.25" high="0.75" optimum="0.5"></meter></label>
                <label>meter - low<br><meter value="0.2" min="0" max="1" low="0.25" high="0.75" optimum="0.5"></meter></label>
                <label>meter - high<br><meter value="0.9" min="0" max="1" low="0.25" high="0.75" optimum="0.5"></meter></label>
                <p>Calculation result: <output>42.00</output></p>
            </stack>
        </split>
    </split-group>
</div>


{# ════════════════════════════════════════════════════════════
   SECTION 2 - CUSTOM TAGS
   ════════════════════════════════════════════════════════════ #}

<hr class="sc-section-rule">

<prose>
    <h1>Custom Tags</h1>
    <p>Custom tags defined in base_custom_tags.css. No color attributes, no extra classes.</p>
</prose>


{# -- Layout ------------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">stack</span>
    <prose><p>Vertical flex column. <code inline>gap</code> controls spacing between children.</p></prose>
    <stack gap="sm">
        <p>First child (gap="sm")</p>
        <p>Second child</p>
        <p>Third child</p>
    </stack>
</div>

<div class="sc-group">
    <span class="sc-label">split-group · split · pos-divider</span>
    <prose><p>Horizontal flex row. Children grow equally. <code inline>pos-divider</code> adds a decorative divider.</p></prose>
    <split-group gap="md">
        <split pos-divider="right">
            <p>Left - pos-divider="right"</p>
        </split>
        <split pos-divider="right">
            <p>Centre</p>
        </split>
        <split>
            <p>Right</p>
        </split>
    </split-group>
</div>

<div class="sc-group">
    <span class="sc-label">grid-auto · columns · span</span>
    <prose><p>Responsive grid. Default 2 columns. <code inline>span</code> attribute spans the full row.</p></prose>
    <grid-auto columns="3" gap="md">
        <p>Cell 1</p>
        <p>Cell 2</p>
        <p>Cell 3</p>
        <p span>Full width - span attribute</p>
    </grid-auto>
</div>

<div class="sc-group">
    <span class="sc-label">sidebar-layout · sticky</span>
    <prose><p>Two-column grid. Last direct child is always the sidebar.</p></prose>
    <sidebar-layout>
        <div><p>Main area - grows flexibly to fill the available width.</p></div>
        <div sticky><p>Sidebar - sticky when scrolled.</p></div>
    </sidebar-layout>
</div>


{# -- Interaction -------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">shrink</span>
    <prose><p>Children start at 60% scale, grow to 100% on hover.</p></prose>
    <shrink>
        <button type="button">Button A</button>
        <button type="button">Button B</button>
        <button type="button">Button C</button>
    </shrink>
</div>

<div class="sc-group">
    <span class="sc-label">theme-block · theme="light|dark"</span>
    <prose><p>Only visible when <code inline>data-theme</code> on a parent matches. Default (no data-theme) = light.</p></prose>
    <theme-block theme="light"><p>Visible in light mode.</p></theme-block>
    <theme-block theme="dark"><p>Visible in dark mode.</p></theme-block>
</div>


{# -- Content ------------------------------------------------ #}

<div class="sc-group">
    <span class="sc-label">card · type · hoverable · icon</span>
    <stack gap="md">
        <grid-auto columns="3" gap="md">
            <card>
                <eyebrow>default</eyebrow>
                <p>Elevated bg, border, shadow.</p>
            </card>
            <card type="surface">
                <eyebrow type="inverted">surface</eyebrow>
                <prose inverted><p>Inverted text via prose[inverted].</p></prose>
            </card>
            <card type="ghost">
                <eyebrow>ghost</eyebrow>
                <p>Transparent, no border.</p>
            </card>
            <card type="flat">
                <eyebrow>flat</eyebrow>
                <p>No shadow, no border.</p>
            </card>
            <card type="sidebar">
                <eyebrow>sidebar</eyebrow>
                <p>For sidebar layouts.</p>
            </card>
            <card type="service">
                <eyebrow>service</eyebrow>
                <p>For service or feature overviews.</p>
            </card>
        </grid-auto>
        <grid-auto columns="2" gap="md">
            <card type="data">
                <eyebrow>data</eyebrow>
                <span class="card-value">98.4%</span>
                <span class="card-cap">Uptime last 30 days</span>
            </card>
            <card type="info-row">
                <span>System status: all services operational.</span>
                <span><badge type="success">Online</badge></span>
            </card>
        </grid-auto>
        <split-group gap="md">
            <split>
                <card hoverable>
                    <eyebrow>hoverable</eyebrow>
                    <p>Hover to see border + shadow change.</p>
                </card>
            </split>
            <split>
                <card icon>
                    <span>★</span>
                    <eyebrow>icon</eyebrow>
                    <p>First child becomes icon badge slot.</p>
                </card>
            </split>
            <split>
                <card icon hoverable>
                    <span>⚡</span>
                    <eyebrow>icon + hoverable</eyebrow>
                    <p>Combined modifiers.</p>
                </card>
            </split>
        </split-group>
    </stack>
</div>

<div class="sc-group">
    <span class="sc-label">prose · inverted · width</span>
    <split-group gap="md">
        <split>
            <prose>
                <h3>prose - default</h3>
                <p>Typographic content block with vertical rhythm and muted paragraph colour.</p>
                <ul>
                    <li>List item A</li>
                    <li>List item B with <a href="#">a link</a></li>
                </ul>
            </prose>
        </split>
        <split>
            <card type="surface">
                <prose inverted>
                    <h3>prose[inverted]</h3>
                    <p>Flips to inverted palette. Links get inverted colours automatically: <a href="#">example link</a>.</p>
                </prose>
            </card>
        </split>
    </split-group>
</div>

<div class="sc-group">
    <span class="sc-label">badge · type · nopill</span>
    <split-group gap="md">
        <split>
            <stack gap="sm" align="start">
                <badge>default</badge>
                <badge type="primary">primary</badge>
                <badge type="success">success</badge>
                <badge type="warning">warning</badge>
                <badge type="danger">danger</badge>
                <badge type="surface">surface</badge>
                <badge nopill>nopill modifier</badge>
            </stack>
        </split>
        <split>
            <prose>
                <p>Inline usage: Status <badge type="success">Active</badge> Plan <badge type="primary">Pro</badge> Renewal <badge type="warning">Soon</badge></p>
            </prose>
        </split>
    </split-group>
</div>

<div class="sc-group">
    <span class="sc-label">eyebrow · type="muted|inverted"</span>
    <stack gap="sm" align="start">
        <eyebrow>default eyebrow</eyebrow>
        <eyebrow type="muted">muted eyebrow</eyebrow>
        <card type="surface" style="padding: var(--space-4) var(--space-6); display:inline-flex;">
            <eyebrow type="inverted">inverted eyebrow (on surface)</eyebrow>
        </card>
    </stack>
</div>

<div class="sc-group">
    <span class="sc-label">meta-row</span>
    <prose><p>Horizontal row of small meta items with dot separators via CSS.</p></prose>
    <meta-row>
        <span>Category</span>
        <span>12 June 2025</span>
        <span>5 min read</span>
        <span>3 comments</span>
    </meta-row>
</div>

<div class="sc-group">
    <span class="sc-label">infobox</span>
    <prose><p>Always-visible ? indicator. Direct child shown as popup on hover.</p></prose>
    <p>
        This term needs an explanation
        <infobox>
            <p>This is the explanatory popup content of the infobox element.</p>
        </infobox>
        and the sentence continues after it.
    </p>
</div>

<div class="sc-group">
    <span class="sc-label">tooltip · show="top|bottom|left|right"</span>
    <prose><p>Hover popup anchored to the preceding sibling. Parent needs <code inline>position: relative</code>.</p></prose>
    <split-group gap="md">
        <split>
            <div style="position: relative; display: inline-block;">
                <button type="button">show="top"</button>
                <tooltip show="top"><p>Tooltip above.</p></tooltip>
            </div>
        </split>
        <split>
            <div style="position: relative; display: inline-block;">
                <button type="button">show="bottom"</button>
                <tooltip show="bottom"><p>Tooltip below.</p></tooltip>
            </div>
        </split>
        <split>
            <div style="position: relative; display: inline-block;">
                <button type="button">show="right"</button>
                <tooltip show="right"><p>Tooltip right.</p></tooltip>
            </div>
        </split>
        <split>
            <div style="position: relative; display: inline-block;">
                <button type="button">show="left"</button>
                <tooltip show="left"><p>Tooltip left.</p></tooltip>
            </div>
        </split>
    </split-group>
</div>


{# ════════════════════════════════════════════════════════════
   SECTION 3 - COLOR COMPONENTS
   ════════════════════════════════════════════════════════════ #}

<hr class="sc-section-rule">

<prose>
    <h1>Color Components</h1>
    <p>Attributes from base_color_components.css. Note: <code inline>bordercolor</code> requires <code inline>border-style</code> and <code inline>border-width</code> set separately - never in the same inline style, as that would override the attribute via inline specificity.</p>
</prose>


{# -- txtcolor ----------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">txtcolor</span>
    <grid-auto columns="4" gap="sm">
        <p txtcolor="primary">primary</p>
        <p txtcolor="primary-light">primary-light</p>
        <p txtcolor="primary-dark">primary-dark</p>
        <p txtcolor="secondary">secondary</p>
        <p txtcolor="secondary-light">secondary-light</p>
        <p txtcolor="secondary-dark">secondary-dark</p>
        <p txtcolor="accent">accent</p>
        <p txtcolor="success">success</p>
        <p txtcolor="warning">warning</p>
        <p txtcolor="danger">danger</p>
        <p txtcolor="info">info</p>
        <p txtcolor="text-muted">text-muted</p>
        <p txtcolor="text-heading">text-heading</p>
        <p txtcolor="text-label">text-label</p>
        <p txtcolor="link">link</p>
        <p txtcolor="link-visited">link-visited</p>
    </grid-auto>
</div>


{# -- bgcolor ------------------------------------------------ #}

<div class="sc-group">
    <span class="sc-label">bgcolor</span>
    <grid-auto columns="4" gap="sm">
        <p bgcolor="primary" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">primary</p>
        <p bgcolor="primary-light" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">primary-light</p>
        <p bgcolor="primary-subtle" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">primary-subtle</p>
        <p bgcolor="secondary" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">secondary</p>
        <p bgcolor="accent" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">accent</p>
        <p bgcolor="success" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">success</p>
        <p bgcolor="success-bg" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">success-bg</p>
        <p bgcolor="warning" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">warning</p>
        <p bgcolor="warning-bg" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">warning-bg</p>
        <p bgcolor="danger" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">danger</p>
        <p bgcolor="danger-bg" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">danger-bg</p>
        <p bgcolor="info" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">info</p>
        <p bgcolor="info-bg" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">info-bg</p>
        <p bgcolor="surface" txtcolor="text-inverted" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">surface</p>
        <p bgcolor="bg-elevated" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">bg-elevated</p>
        <p bgcolor="bg-sunken" style="padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);">bg-sunken</p>
    </grid-auto>
</div>


{# -- bordercolor -------------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">bordercolor - uses .sc-bordered helper class, not inline border style</span>
    <grid-auto columns="4" gap="sm">
        <p bordercolor="primary" class="sc-bordered">primary</p>
        <p bordercolor="secondary" class="sc-bordered">secondary</p>
        <p bordercolor="accent" class="sc-bordered">accent</p>
        <p bordercolor="success" class="sc-bordered">success</p>
        <p bordercolor="warning" class="sc-bordered">warning</p>
        <p bordercolor="danger" class="sc-bordered">danger</p>
        <p bordercolor="info" class="sc-bordered">info</p>
        <p bordercolor="border-strong" class="sc-bordered">border-strong</p>
        <p bordercolor="primary-dark" class="sc-bordered">primary-dark</p>
        <p bordercolor="secondary-dark" class="sc-bordered">secondary-dark</p>
        <p bordercolor="focus" class="sc-bordered">focus</p>
        <p bordercolor="text-muted" class="sc-bordered">text-muted</p>
    </grid-auto>
</div>


{# -- Hover variants ----------------------------------------- #}

<div class="sc-group">
    <span class="sc-label">bgcolor-hover · txtcolor-hover · bordercolor-hover</span>
    <prose><p>Applied on :hover. Combine freely with base attributes. Transition must be set inline or via class.</p></prose>
    <split-group gap="md">
        <split>
            <button type="button"
                bgcolor="primary" txtcolor="text-inverted" bordercolor="primary"
                bgcolor-hover="primary-dark" bordercolor-hover="primary-dark"
                style="padding: var(--space-3) var(--space-6); border: 2px solid; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; width: 100%;">
                bgcolor-hover="primary-dark"
            </button>
        </split>
        <split>
            <button type="button"
                bgcolor="bg-elevated" txtcolor="text" bordercolor="border"
                bgcolor-hover="bg-sunken" txtcolor-hover="primary" bordercolor-hover="primary"
                style="padding: var(--space-3) var(--space-6); border: 2px solid; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; width: 100%;">
                txtcolor-hover="primary"
            </button>
        </split>
        <split>
            <button type="button"
                bgcolor="danger-bg" txtcolor="danger" bordercolor="danger"
                bgcolor-hover="danger" txtcolor-hover="text-inverted"
                style="padding: var(--space-3) var(--space-6); border: 2px solid; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; width: 100%;">
                bgcolor-hover="danger"
            </button>
        </split>
    </split-group>
</div>


{# -- Combined real-world examples --------------------------- #}

<div class="sc-group">
    <span class="sc-label">combined - custom tags + color components</span>
    <stack gap="md">
        <grid-auto columns="3" gap="md">
            <card bgcolor="primary-subtle" bordercolor="primary">
                <eyebrow>card + bgcolor + bordercolor</eyebrow>
                <p>bgcolor="primary-subtle" bordercolor="primary"</p>
            </card>
            <card bgcolor="success-bg" bordercolor="success">
                <eyebrow txtcolor="success">card + success palette</eyebrow>
                <p>All three attributes from color components.</p>
            </card>
            <card bgcolor="danger-bg" bordercolor="danger">
                <eyebrow txtcolor="danger">card + danger palette</eyebrow>
                <p>All three attributes from color components.</p>
            </card>
        </grid-auto>

        <split-group gap="md">
            <split>
                <prose><h3>meta-row + badge inline</h3></prose>
                <meta-row>
                    <span>Published 12 June 2025</span>
                    <span>4 min read</span>
                    <badge type="primary">New</badge>
                    <badge type="warning">Draft</badge>
                </meta-row>
            </split>
            <split>
                <card type="surface">
                    <eyebrow type="inverted">surface card + prose[inverted]</eyebrow>
                    <prose inverted>
                        <p>Paragraph on dark surface. <a href="#">Inverted link</a> gets palette automatically.</p>
                    </prose>
                    <badge type="surface" style="align-self: flex-start; border: 1px solid rgba(255,255,255,0.2);">surface badge</badge>
                </card>
            </split>
        </split-group>
    </stack>
</div>


{# ════════════════════════════════════════════════════════════
   SECTION 4 - COLOR PALETTE REFERENCE
   ════════════════════════════════════════════════════════════ #}

<hr class="sc-section-rule">

<prose>
    <h1>Color Palette Reference</h1>
    <p>All CSS custom properties from base_colors.css. Swatches shown in both light and dark context.</p>
</prose>

<div class="color-grid-wrap">

  <!-- Grid 1: Main Colors + Backgrounds & Surfaces -->
  <div class="color-grid">
    <div class="color-grid-header"><div>Light</div><div>Dark</div><div>Variable</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Main Colors</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-primary);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-primary);"></div></div><div class="color-name-cell">--color-primary</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-primary-light);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-primary-light);"></div></div><div class="color-name-cell">--color-primary-light</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-primary-dark);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-primary-dark);"></div></div><div class="color-name-cell">--color-primary-dark</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-primary-subtle);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-primary-subtle);"></div></div><div class="color-name-cell">--color-primary-subtle</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-secondary);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-secondary);"></div></div><div class="color-name-cell">--color-secondary</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-secondary-light);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-secondary-light);"></div></div><div class="color-name-cell">--color-secondary-light</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-secondary-dark);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-secondary-dark);"></div></div><div class="color-name-cell">--color-secondary-dark</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-accent);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-accent);"></div></div><div class="color-name-cell">--color-accent</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Backgrounds & Surfaces</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-bg);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-bg);"></div></div><div class="color-name-cell">--color-bg</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-bg-elevated);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-bg-elevated);"></div></div><div class="color-name-cell">--color-bg-elevated</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-bg-sunken);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-bg-sunken);"></div></div><div class="color-name-cell">--color-bg-sunken</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-surface);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-surface);"></div></div><div class="color-name-cell">--color-surface</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-surface-alt);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-surface-alt);"></div></div><div class="color-name-cell">--color-surface-alt</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-surface-hover);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-surface-hover);"></div></div><div class="color-name-cell">--color-surface-hover</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-border);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-border);"></div></div><div class="color-name-cell">--color-border</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-border-strong);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-border-strong);"></div></div><div class="color-name-cell">--color-border-strong</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-border-input);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-border-input);"></div></div><div class="color-name-cell">--color-border-input</div></div>
  </div>

  <!-- Grid 2: Semantic Colors + Text Colors -->
  <div class="color-grid">
    <div class="color-grid-header"><div>Light</div><div>Dark</div><div>Variable</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Semantic Colors</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-success);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-success);"></div></div><div class="color-name-cell">--color-success</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-success-bg);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-success-bg);"></div></div><div class="color-name-cell">--color-success-bg</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-warning);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-warning);"></div></div><div class="color-name-cell">--color-warning</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-warning-bg);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-warning-bg);"></div></div><div class="color-name-cell">--color-warning-bg</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-danger);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-danger);"></div></div><div class="color-name-cell">--color-danger</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-danger-bg);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-danger-bg);"></div></div><div class="color-name-cell">--color-danger-bg</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-info);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-info);"></div></div><div class="color-name-cell">--color-info</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-info-bg);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-info-bg);"></div></div><div class="color-name-cell">--color-info-bg</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Text Colors</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text);"></div></div><div class="color-name-cell">--color-text</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text-muted);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text-muted);"></div></div><div class="color-name-cell">--color-text-muted</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text-inverted);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text-inverted);"></div></div><div class="color-name-cell">--color-text-inverted</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text-placeholder);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text-placeholder);"></div></div><div class="color-name-cell">--color-text-placeholder</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text-heading);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text-heading);"></div></div><div class="color-name-cell">--color-text-heading</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-text-label);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-text-label);"></div></div><div class="color-name-cell">--color-text-label</div></div>
  </div>

  <!-- Grid 3: Link Colors + Shadows & Focus + Overlay Colors -->
  <div class="color-grid">
    <div class="color-grid-header"><div>Light</div><div>Dark</div><div>Variable</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Link Colors</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link);"></div></div><div class="color-name-cell">--color-link</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link-hover);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link-hover);"></div></div><div class="color-name-cell">--color-link-hover</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link-visited);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link-visited);"></div></div><div class="color-name-cell">--color-link-visited</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link-inverted);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link-inverted);"></div></div><div class="color-name-cell">--color-link-inverted</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link-inverted-hover);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link-inverted-hover);"></div></div><div class="color-name-cell">--color-link-inverted-hover</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-link-inverted-visited);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-link-inverted-visited);"></div></div><div class="color-name-cell">--color-link-inverted-visited</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Shadows & Focus</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-shadow);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-shadow);"></div></div><div class="color-name-cell">--color-shadow</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-shadow-strong);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-shadow-strong);"></div></div><div class="color-name-cell">--color-shadow-strong</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-focus);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-focus);"></div></div><div class="color-name-cell">--color-focus</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-focus-shadow);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-focus-shadow);"></div></div><div class="color-name-cell">--color-focus-shadow</div></div>
    <div class="section-row"><div class="section-light"></div><div class="section-dark"></div><div class="section-label">Overlay Colors</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-overlay-light);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-overlay-light);"></div></div><div class="color-name-cell">--color-overlay-light</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-overlay-medium);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-overlay-medium);"></div></div><div class="color-name-cell">--color-overlay-medium</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-backdrop);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-backdrop);"></div></div><div class="color-name-cell">--color-backdrop</div></div>
    <div class="color-row"><div class="color-cell" style="background:#fff;"><div class="color-swatch" style="background:var(--color-backdrop-heavy);"></div></div><div class="color-cell color-cell-dark"><div class="color-swatch" style="background:var(--color-backdrop-heavy);"></div></div><div class="color-name-cell">--color-backdrop-heavy</div></div>
  </div>

</div>


</stack>