<!-- Option 1: Local file -->
<link rel="stylesheet" href="kranium.css">

<!-- Option 2: Direct import in CSS -->
@import url('kranium.css');

/* Override in your own stylesheet after importing kranium.css */
:root {
  --k-accent:        #1a4b8c;   /* change brand color */
  --k-accent-bright: #2563eb;
  --k-accent-dim:    rgba(37, 99, 235, 0.18);
  --k-accent-glow:   0 0 18px #1d4ed8;
  --k-bg-deep:       #080c14;   /* darker background */
}

<h1 class="k-display">Big Hero Title</h1>
<h2 class="k-headline">Section Headline</h2>
<p  class="k-lead">Intro paragraph with larger font</p>
<span class="k-gradient-text k-display">Gradient Text</span>

<button class="k-btn k-btn-primary">Primary</button>
<button class="k-btn k-btn-secondary">Secondary</button>
<button class="k-btn k-btn-outline">Outline</button>
<button class="k-btn k-btn-ghost">Ghost</button>
<button class="k-btn k-btn-success">Success</button>
<button class="k-btn k-btn-danger">Danger</button>
<button class="k-btn k-btn-primary" disabled>Disabled</button>

<button class="k-btn k-btn-primary k-btn-xs">XS</button>
<button class="k-btn k-btn-primary k-btn-sm">SM</button>
<button class="k-btn k-btn-primary">Default</button>
<button class="k-btn k-btn-primary k-btn-lg">LG</button>
<button class="k-btn k-btn-primary k-btn-xl">XL</button>

<div class="k-btn-group">
  <button class="k-btn k-btn-secondary">Code</button>
  <button class="k-btn k-btn-secondary">Issues</button>
  <button class="k-btn k-btn-secondary">Pull Requests</button>
</div>

<!-- Interactive card -->
<div class="k-card k-card-interactive">
  <div class="k-card-header">
    <span class="k-card-title">Title</span>
    <button class="k-btn k-btn-ghost k-btn-sm">Action</button>
  </div>
  <p>Card content.</p>
  <div class="k-card-footer">
    <button class="k-btn k-btn-secondary k-btn-sm">Cancel</button>
    <button class="k-btn k-btn-primary k-btn-sm">Save</button>
  </div>
</div>

<!-- Stat card -->
<div class="k-card k-stat-card">
  <div class="k-stat-label">Total Commits</div>
  <div class="k-stat-value">2,491</div>
  <div class="k-stat-delta up">↑ 12% this month</div>
</div>

<div class="k-form-group">
  <label class="k-label k-label-required">Name</label>
  <input class="k-input" placeholder="Enter name">
  <span class="k-hint">Max 100 characters</span>
</div>

<!-- Input group with prefix -->
<div class="k-input-group">
  <span class="k-input-affix">https://</span>
  <input class="k-input" placeholder="example.com">
</div>

<!-- Toggle -->
<label class="k-toggle">
  <input type="checkbox">
  <div class="k-toggle-track"></div>
  Enable feature
</label>

<span class="k-badge k-badge-success">Success</span>
<span class="k-badge k-badge-danger k-badge-dot">Error</span>

<!-- Deletable tag -->
<span class="k-tag">rust <span class="k-tag-close">×</span></span>

<div class="k-alert k-alert-success">
  <span class="k-alert-icon">✅</span>
  <div>
    <div class="k-alert-title">Deployed</div>
    <div class="k-alert-body">Version 2.4.1 is live.</div>
  </div>
</div>

<!-- Toast container (fixed position) -->
<div class="k-toast-container">
  <div class="k-toast k-toast-success">✅ Commit pushed successfully</div>
</div>

<div class="k-tabs">
  <div class="k-tab active">Overview</div>
  <div class="k-tab">Commits</div>
  <div class="k-tab">Branches</div>
</div>

<div class="k-segmented">
  <div class="k-segmented-item active">Day</div>
  <div class="k-segmented-item">Week</div>
  <div class="k-segmented-item">Month</div>
</div>

<div class="k-avatar k-avatar-lg">JD</div>

<!-- With image -->
<div class="k-avatar k-avatar-md">
  <img src="avatar.jpg" alt="Jane">
</div>

<!-- Online status -->
<div class="k-avatar-wrap">
  <div class="k-avatar">AB</div>
  <div class="k-avatar-status online"></div>
</div>

<!-- User row -->
<div class="k-user-row">
  <div class="k-avatar k-avatar-sm">MK</div>
  <div>
    <div class="k-user-row-name">Martin K.</div>
    <div class="k-user-row-meta">Maintainer</div>
  </div>
</div>

<div class="k-file-tree">
  <a class="k-tree-item dir">📁 src</a>
  <div class="k-tree-indent">
    <a class="k-tree-item active">📄 index.ts</a>
    <a class="k-tree-item">📄 app.ts</a>
  </div>
  <a class="k-tree-item">📄 package.json</a>
</div>

<div class="k-skeleton k-skeleton-title"></div>
<div class="k-skeleton k-skeleton-text"></div>

<!-- Skeleton row (avatar + lines) -->
<div class="k-skeleton-row">
  <div class="k-skeleton k-skeleton-avatar"></div>
  <div class="k-skeleton-row-body">
    <div class="k-skeleton k-skeleton-text" style="width:55%"></div>
    <div class="k-skeleton k-skeleton-text" style="width:35%"></div>
  </div>
</div>