/**
 * Istislav Design System — CSS Variables & Base Styles
 * ======================================================
 * Import this file as the first entry in your main CSS.
 * Works with Tailwind CSS v3+ using @layer directives.
 *
 * Usage:
 *   @import './design-system/tokens.css';
 *   @tailwind base;
 *   @tailwind components;
 *   @tailwind utilities;
 */

/* ─── System Font Declarations ──────────────────────────────────────────────
   No external font downloads — all system-native.
   Ubuntu has its own system font. Roboto is pre-installed on Android.
   SF Pro is handled by -apple-system / BlinkMacSystemFont.
   No @font-face needed for system fonts.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── CSS Custom Properties (Design Tokens) ─────────────────────────────── */
:root {
  /* === BRAND COLORS === */
  --color-brand-primary:   #E8A020;   /* logo gold — amber-500 */
  --color-brand-primary-hover: #C8841A;
  --color-brand-primary-light: #FDE49E;
  --color-brand-primary-dark:  #F7B92C;

  /* === TYPOGRAPHY === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
               Cantarell, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --font-mono: "SF Mono", "Cascadia Code", "Cascadia Mono", Consolas,
               "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono",
               Menlo, Monaco, "Courier New", monospace;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Ubuntu, Cantarell, sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Letter spacing for headings */
  --tracking-display:  -0.03em;
  --tracking-heading:  -0.02em;
  --tracking-subhead:  -0.01em;
  --tracking-body:      0em;
  --tracking-label:     0.08em;
  --tracking-overline:  0.12em;

  /* === SPACING === */
  --space-section:    6rem;    /* 96px — vertical section gap */
  --space-section-sm: 4rem;   /* 64px */
  --space-section-lg: 8rem;   /* 128px */
  --space-content:    1200px; /* max-width */

  /* === BORDER RADIUS === */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1050;
  --z-tooltip:  1070;
  --z-toast:    1090;
}

/* ─── LIGHT THEME (default) ──────────────────────────────────────────────── */
:root,
.theme-light {
  color-scheme: light;

  /* Backgrounds */
  --bg-page:       #F8F7F5;    /* page backdrop */
  --bg-surface:    #FFFFFF;    /* cards, panels */
  --bg-elevated:   #FFFFFF;    /* dropdowns, modals */
  --bg-sunken:     #F0EEE9;    /* inputs, code areas */
  --bg-overlay:    rgba(13, 16, 8, 0.50);

  /* Borders */
  --border-subtle:   rgba(60, 55, 40, 0.08);
  --border-default:  rgba(60, 55, 40, 0.14);
  --border-strong:   rgba(60, 55, 40, 0.24);
  --border-brand:    rgba(232, 160, 32, 0.50);

  /* Text */
  --text-primary:    #131108;   /* headings, strong body */
  --text-secondary:  #47443E;   /* body, descriptions */
  --text-tertiary:   #7E7A71;   /* captions, placeholders */
  --text-disabled:   #BCB8AE;
  --text-inverse:    #FFFFFF;
  --text-brand:      #C8841A;   /* amber on light bg */
  --text-link:       #C8841A;
  --text-link-hover: #A06813;

  /* Component specifics */
  --nav-bg:          rgba(248, 247, 245, 0.92);
  --nav-border:      rgba(60, 55, 40, 0.10);
  --card-bg:         #FFFFFF;
  --card-border:     rgba(60, 55, 40, 0.10);
  --card-shadow:     0 2px 8px -2px rgba(0, 0, 0, 0.07),
                     0 1px 3px -1px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.12),
                       0 3px 8px -2px rgba(0, 0, 0, 0.08);

  --input-bg:        #FFFFFF;
  --input-border:    rgba(60, 55, 40, 0.20);
  --input-border-focus: #E8A020;
  --input-ring:      rgba(232, 160, 32, 0.30);

  --code-bg:         #F0EEE9;
  --code-border:     rgba(60, 55, 40, 0.10);

  /* Badge / tag */
  --tag-bg:          rgba(232, 160, 32, 0.12);
  --tag-text:        #A06813;
  --tag-border:      rgba(232, 160, 32, 0.25);

  /* Section dividers */
  --divider:         rgba(60, 55, 40, 0.08);

  /* Scrollbar */
  --scrollbar-track: #F0EEE9;
  --scrollbar-thumb: #BCB8AE;
}

/* ─── DARK THEME ──────────────────────────────────────────────────────────── */
.dark,
.theme-dark {
  color-scheme: dark;

  /* Backgrounds — warm-dark, not cold blue-gray */
  --bg-page:       #0D1008;    /* deepest bg */
  --bg-surface:    #131108;    /* cards, panels */
  --bg-elevated:   #1A1812;    /* elevated surfaces */
  --bg-sunken:     #0A0D06;    /* inputs, code areas */
  --bg-overlay:    rgba(0, 0, 0, 0.65);

  /* Borders */
  --border-subtle:   rgba(255, 248, 220, 0.06);
  --border-default:  rgba(255, 248, 220, 0.10);
  --border-strong:   rgba(255, 248, 220, 0.18);
  --border-brand:    rgba(232, 160, 32, 0.40);

  /* Text */
  --text-primary:    #F5F3EE;   /* primary text */
  --text-secondary:  #BCB8AE;   /* secondary */
  --text-tertiary:   #7E7A71;   /* muted */
  --text-disabled:   #47443E;
  --text-inverse:    #0D1008;
  --text-brand:      #F7B92C;   /* amber on dark bg (brighter) */
  --text-link:       #F7B92C;
  --text-link-hover: #FACF5A;

  /* Component specifics */
  --nav-bg:          rgba(13, 16, 8, 0.92);
  --nav-border:      rgba(255, 248, 220, 0.08);
  --card-bg:         #131108;
  --card-border:     rgba(255, 248, 220, 0.08);
  --card-shadow:     0 2px 8px -2px rgba(0, 0, 0, 0.40),
                     0 1px 3px -1px rgba(0, 0, 0, 0.30);
  --card-shadow-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.60),
                       0 0 20px rgba(232, 160, 32, 0.10);

  --input-bg:        #0A0D06;
  --input-border:    rgba(255, 248, 220, 0.14);
  --input-border-focus: #E8A020;
  --input-ring:      rgba(232, 160, 32, 0.25);

  --code-bg:         #0A0D06;
  --code-border:     rgba(255, 248, 220, 0.08);

  /* Badge / tag */
  --tag-bg:          rgba(232, 160, 32, 0.15);
  --tag-text:        #F7B92C;
  --tag-border:      rgba(232, 160, 32, 0.30);

  /* Section dividers */
  --divider:         rgba(255, 248, 220, 0.06);

  /* Scrollbar */
  --scrollbar-track: #0A0D06;
  --scrollbar-thumb: #47443E;
}

/* ─── Base Styles ────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.625;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    tab-size: 4;
  }

  body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    transition:
      background-color var(--duration-normal) var(--ease-default),
      color var(--duration-normal) var(--ease-default);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: var(--tracking-heading);
  }

  h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-display); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl);  }
  h5 { font-size: var(--text-lg);  }
  h6 { font-size: var(--text-base); }

  /* Links */
  a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }
  a:hover {
    color: var(--text-link-hover);
  }

  /* Code */
  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
    line-height: 1.7;
  }

  code {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.375rem;
    color: var(--text-brand);
  }

  pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    overflow-x: auto;
    tab-size: 2;
  }

  pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
  }

  /* Images */
  img, video, svg {
    display: block;
    max-width: 100%;
  }

  /* Forms */
  input, textarea, select {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition:
      border-color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--input-ring);
  }

  /* Selection */
  ::selection {
    background-color: rgba(232, 160, 32, 0.25);
    color: var(--text-primary);
  }

  /* Scrollbar (webkit) */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* HR / Divider */
  hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: 2rem 0;
  }

  /* Lists */
  ul, ol { padding-left: 1.5em; }

  /* Blockquote */
  blockquote {
    border-left: 3px solid var(--color-brand-primary);
    padding: 0.5rem 0 0.5rem 1.25rem;
    color: var(--text-secondary);
    font-style: italic;
  }
}

/* ─── Component Layer ────────────────────────────────────────────────────── */
@layer components {

  /* Container */
  .container-content {
    width: 100%;
    max-width: var(--space-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  @media (min-width: 640px) {
    .container-content { padding-left: 1.5rem; padding-right: 1.5rem; }
  }
  @media (min-width: 1024px) {
    .container-content { padding-left: 2rem; padding-right: 2rem; }
  }
  @media (min-width: 1280px) {
    .container-content { padding-left: 2.5rem; padding-right: 2.5rem; }
  }

  /* Section spacing */
  .section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
  .section-sm { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); }
  .section-lg { padding-top: var(--space-section-lg); padding-bottom: var(--space-section-lg); }

  /* ─── BUTTONS ─── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default),
      transform 100ms var(--ease-default);
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: scale(0.98); }
  .btn:disabled, .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Primary */
  .btn-primary {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #0D1008;  /* always dark text on amber */
  }
  .btn-primary:hover {
    background-color: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary-hover);
    color: #0D1008;
  }
  .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.40);
  }

  /* Secondary / Outline */
  .btn-secondary {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-primary);
  }
  .btn-secondary:hover {
    background-color: var(--bg-sunken);
    border-color: var(--border-strong);
    color: var(--text-primary);
  }

  /* Ghost */
  .btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
  }
  .btn-ghost:hover {
    background-color: var(--bg-sunken);
    color: var(--text-primary);
  }

  /* Sizes */
  .btn-sm { padding: 0.375rem 0.875rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
  .btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-base); border-radius: var(--radius-lg); }
  .btn-xl { padding: 1.125rem 2.25rem; font-size: var(--text-lg); border-radius: var(--radius-lg); }

  /* Icon button */
  .btn-icon {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
  }
  .btn-icon:hover {
    background-color: var(--bg-sunken);
    color: var(--text-primary);
  }

  /* ─── CARDS ─── */

  .card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition:
      box-shadow var(--duration-normal) var(--ease-default),
      border-color var(--duration-normal) var(--ease-default),
      transform var(--duration-normal) var(--ease-default);
  }

  .card-hover:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--border-brand);
    transform: translateY(-2px);
  }

  .card-body { padding: 1.5rem; }
  .card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  .card-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-sunken);
  }

  /* ─── NAVIGATION ─── */

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    height: 64px;
    display: flex;
    align-items: center;
  }

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .nav-link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    transition:
      color var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }
  .nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-sunken);
  }
  .nav-link.active {
    color: var(--text-brand);
    background-color: var(--tag-bg);
  }

  /* ─── BADGES / TAGS ─── */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    border: 1px solid;
    line-height: 1;
    white-space: nowrap;
  }

  .badge-brand {
    background-color: var(--tag-bg);
    color: var(--tag-text);
    border-color: var(--tag-border);
  }

  .badge-neutral {
    background-color: var(--bg-sunken);
    color: var(--text-secondary);
    border-color: var(--border-default);
  }

  .badge-success {
    background-color: rgba(22, 163, 100, 0.12);
    color: #16A364;
    border-color: rgba(22, 163, 100, 0.25);
  }

  .badge-warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.25);
  }

  .badge-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
    border-color: rgba(239, 68, 68, 0.25);
  }

  /* ─── SECTION HEADER ─── */

  .section-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-brand);
    margin-bottom: 0.75rem;
  }

  .section-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    letter-spacing: var(--tracking-heading);
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  .section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 56ch;
    line-height: 1.7;
  }

  /* ─── TECH TAG (developer skills) ─── */

  .tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-family: var(--font-mono);
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-sm);
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    color: var(--text-secondary);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);
  }
  .tech-tag:hover {
    background-color: var(--tag-bg);
    border-color: var(--border-brand);
    color: var(--tag-text);
  }

  /* ─── STAT BLOCK ─── */

  .stat-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .stat-value {
    font-size: var(--text-4xl);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
    line-height: 1;
  }
  .stat-value-brand {
    color: var(--text-brand);
  }
  .stat-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-weight: 400;
  }

  /* ─── CODE BLOCK (syntax-highlighted) ─── */

  .code-window {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }

  .code-window-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--code-border);
    background-color: var(--bg-elevated);
  }

  .code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .code-dot-red    { background-color: #FF5F57; }
  .code-dot-yellow { background-color: #FFBD2E; }
  .code-dot-green  { background-color: #28C840; }

  .code-filename {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-left: 0.5rem;
  }

  .code-body {
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-x: auto;
  }

  /* ─── DIVIDER WITH LABEL ─── */

  .divider-labeled {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
  }
  .divider-labeled::before,
  .divider-labeled::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--divider);
  }
  .divider-labeled span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  /* ─── GRID HELPERS ─── */

  .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* ─── HERO GRADIENT ACCENT ─── */

  .hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 160, 32, 0.08) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(1px);
  }
}

/* ─── Utility Layer ──────────────────────────────────────────────────────── */
@layer utilities {

  /* Text with brand gradient (amber) */
  .text-gradient-brand {
    background: linear-gradient(135deg, #F7B92C 0%, #E8A020 50%, #C8841A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Subtle animated underline for links */
  .link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--duration-normal) var(--ease-default);
  }
  .link-underline:hover { background-size: 100% 1px; }

  /* Mono label (for section overlines, etc.) */
  .label-mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  /* Brand accent line (left border on cards/quotes) */
  .accent-line {
    border-left: 2px solid var(--color-brand-primary);
    padding-left: 1rem;
  }

  /* Truncate text single line */
  .truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Line clamp */
  .clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Visually hidden (accessible) */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Focus trap helper */
  .focus-brand:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
  }

  /* Transition presets */
  .transition-colors-fast {
    transition:
      color var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default);
  }

  /* No text select */
  .no-select { user-select: none; }

  /* Antialiased */
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar hidden (but scrollable) */
  .scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-hidden::-webkit-scrollbar { display: none; }
}