/**
 * NA-Kit UI — CSS Cascade Layers
 *
 * Defines explicit layer ordering so that na-kit component styles,
 * user overrides, and utility classes have predictable specificity.
 *
 * Usage:
 *   Import this file BEFORE any other na-kit styles to ensure the
 *   layer order is established first.
 *
 * Layer order (lowest → highest priority):
 *   reset → tokens → base → components → patterns → utilities → overrides
 *
 * @example HTML
 *   <link rel="stylesheet" href="na-kit/layers.css">
 *   <link rel="stylesheet" href="na-kit/index.css">
 *   <link rel="stylesheet" href="your-app.css">
 */

/* ── Establish explicit cascade layer order ── */
@layer reset, tokens, base, components, patterns, utilities, overrides;

/* ── Reset Layer ──────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  #root, #__next { isolation: isolate; }
}

/* ── Tokens Layer ─────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Primitive palette */
    --color-indigo-50:  #eef2ff; --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe; --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8; --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3; --color-indigo-900: #312e81;

    --color-violet-400: #a78bfa; --color-violet-500: #8b5cf6;
    --color-violet-600: #7c3aed;

    --color-green-400: #34d399; --color-green-500: #10b981;
    --color-green-600: #059669;

    --color-amber-400: #fbbf24; --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;

    --color-red-400: #f87171; --color-red-500: #ef4444;
    --color-red-600: #dc2626;

    --color-blue-400: #60a5fa; --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;

    --color-cyan-400: #22d3ee; --color-cyan-500: #06b6d4;

    --color-rose-400: #fb7185; --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;

    --color-slate-50:  #f8fafc; --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8; --color-slate-500: #64748b;
    --color-slate-600: #475569; --color-slate-700: #334155;
    --color-slate-800: #1e293b; --color-slate-900: #0f172a;

    /* Spacing scale */
    --space-px: 1px;
    --space-0:   0;
    --space-0-5: 2px;
    --space-1:   4px;
    --space-1-5: 6px;
    --space-2:   8px;
    --space-2-5: 10px;
    --space-3:   12px;
    --space-3-5: 14px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-9:   36px;
    --space-10:  40px;
    --space-11:  44px;
    --space-12:  48px;
    --space-14:  56px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-28:  112px;
    --space-32:  128px;
    --space-36:  144px;
    --space-40:  160px;
    --space-48:  192px;
    --space-56:  224px;
    --space-64:  256px;
    --space-72:  288px;
    --space-80:  320px;
    --space-96:  384px;

    /* Typography scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  4.5rem;
    --text-8xl:  6rem;
    --text-9xl:  8rem;

    /* Border radius */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-base: 4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* Z-index scale */
    --z-0:       0;
    --z-10:      10;
    --z-20:      20;
    --z-30:      30;
    --z-40:      40;
    --z-50:      50;
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-overlay:  1040;
    --z-modal:    1050;
    --z-popover:  1060;
    --z-toast:    1070;
    --z-tooltip:  1080;
    --z-fab:      1090;
    --z-tour:     9998;
    --z-max:      9999;

    /* Shadow scale */
    --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);
    --shadow-none: 0 0 #0000;

    /* Transition durations */
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --duration-slower: 700ms;

    /* Font families */
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono:  ui-monospace, SFMono-Regular, 'Cascadia Code', 'Consolas', monospace;
  }
}

/* ── Base Layer ────────────────────────────────────────────── */
@layer base {
  /* Applied at document root - inherited by all elements */
  body {
    font-family: var(--ui-font-family, var(--font-sans));
    color: var(--ui-text-primary, #111827);
    background-color: var(--ui-bg-primary, #fff);
  }

  /* Heading defaults */
  h1 { font-size: var(--text-3xl, 1.875rem); line-height: 1.2; font-weight: 700; }
  h2 { font-size: var(--text-2xl, 1.5rem);   line-height: 1.25; font-weight: 700; }
  h3 { font-size: var(--text-xl, 1.25rem);   line-height: 1.3; font-weight: 600; }
  h4 { font-size: var(--text-lg, 1.125rem);  line-height: 1.4; font-weight: 600; }
  h5 { font-size: var(--text-base, 1rem);    line-height: 1.5; font-weight: 600; }
  h6 { font-size: var(--text-sm, 0.875rem);  line-height: 1.5; font-weight: 600; }

  a {
    color: var(--ui-text-link, var(--color-indigo-500, #6366f1));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a:hover { color: var(--ui-text-link-hover, var(--color-indigo-600, #4f46e5)); }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    border: none;
    border-top: 1px solid var(--ui-border-color, #e5e7eb);
    margin: var(--space-6, 24px) 0;
  }

  /* Focus-visible global reset */
  :focus-visible {
    outline: 2px solid var(--ui-color-primary, #6366f1);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }
}

/* ── Components Layer ─────────────────────────────────────── */
@layer components {
  /* Placeholder: na-kit web component styles live in Shadow DOM (scoped).
     Place any light-DOM component class helpers here. */

  /* Card */
  .card {
    background: var(--ui-bg-primary, #fff);
    border: 1px solid var(--ui-border-color, #e5e7eb);
    border-radius: var(--radius-xl, 12px);
    padding: var(--space-6, 24px);
    box-shadow: var(--shadow-sm);
  }
  .card-hover { transition: box-shadow var(--duration-fast, 150ms), transform var(--duration-fast, 150ms); }
  .card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.5;
  }
  .badge-primary { background: var(--color-indigo-100, #e0e7ff); color: var(--color-indigo-700, #4338ca); }
  .badge-success { background: #d1fae5; color: #065f46; }
  .badge-warning { background: #fef3c7; color: #92400e; }
  .badge-danger  { background: #fee2e2; color: #991b1b; }
  .badge-info    { background: #dbeafe; color: #1e40af; }
  .badge-neutral { background: var(--color-slate-100, #f1f5f9); color: var(--color-slate-600, #475569); }

  /* Button base */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-lg, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter var(--duration-fast, 150ms), background var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
  }
  .btn:focus-visible { outline: 2px solid var(--ui-color-primary, #6366f1); outline-offset: 2px; }
  .btn:disabled      { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .btn-primary   { background: var(--ui-color-primary, #6366f1); color: #fff; }
  .btn-primary:hover  { filter: brightness(1.1); }
  .btn-secondary { background: var(--color-slate-100, #f1f5f9); color: var(--color-slate-700, #334155); border-color: var(--color-slate-200, #e2e8f0); }
  .btn-secondary:hover { background: var(--color-slate-200, #e2e8f0); }
  .btn-danger    { background: var(--ui-color-danger, #ef4444); color: #fff; }
  .btn-danger:hover   { filter: brightness(1.1); }
  .btn-ghost     { background: transparent; color: var(--ui-color-primary, #6366f1); }
  .btn-ghost:hover { background: var(--color-indigo-50, #eef2ff); }
  .btn-outline   { background: transparent; border-color: var(--ui-color-primary, #6366f1); color: var(--ui-color-primary, #6366f1); }
  .btn-outline:hover { background: var(--color-indigo-50, #eef2ff); }
  .btn-sm { padding: 4px 10px; font-size: var(--text-xs, 0.75rem); }
  .btn-lg { padding: 12px 24px; font-size: var(--text-base, 1rem); }
  .btn-xl { padding: 16px 32px; font-size: var(--text-lg, 1.125rem); }
  .btn-icon { padding: 8px; aspect-ratio: 1; }
  .btn-block { width: 100%; }

  /* Input */
  .input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: var(--text-sm, 0.875rem);
    background: var(--ui-bg-primary, #fff);
    border: 1.5px solid var(--ui-border-color, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    color: var(--ui-text-primary, #111827);
    transition: border-color var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms);
    outline: none;
  }
  .input:focus { border-color: var(--ui-color-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
  .input::placeholder { color: var(--ui-text-muted, #9ca3af); }
  .input:disabled { background: var(--color-slate-50, #f8fafc); opacity: 0.7; cursor: not-allowed; }
  .input-error { border-color: var(--ui-color-danger, #ef4444); }
  .input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
  .input-success { border-color: var(--ui-color-success, #10b981); }

  /* Label */
  .label {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--ui-text-primary, #111827);
    margin-bottom: 4px;
  }
  .label-required::after { content: ' *'; color: var(--ui-color-danger, #ef4444); }

  /* Helper / error text */
  .helper-text { font-size: var(--text-xs, 0.75rem); color: var(--ui-text-muted, #9ca3af); margin-top: 4px; }
  .error-text  { font-size: var(--text-xs, 0.75rem); color: var(--ui-color-danger, #ef4444); margin-top: 4px; }

  /* Chip / Tag */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    background: var(--color-slate-100, #f1f5f9);
    color: var(--color-slate-700, #334155);
    border: 1px solid var(--color-slate-200, #e2e8f0);
  }

  /* Alert */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg, 8px);
    font-size: var(--text-sm, 0.875rem);
    border: 1px solid transparent;
  }
  .alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
  .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
  .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
  .alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

  /* Table */
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.875rem); }
  .table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--ui-text-secondary, #6b7280);
    background: var(--color-slate-50, #f8fafc);
    border-bottom: 1px solid var(--ui-border-color, #e5e7eb);
    white-space: nowrap;
  }
  .table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-border-color, #e5e7eb);
    color: var(--ui-text-primary, #111827);
  }
  .table tr:last-child td { border-bottom: none; }
  .table-hover tr:hover td { background: var(--color-slate-50, #f8fafc); }
  .table-striped tr:nth-child(even) td { background: var(--color-slate-50, #f8fafc); }

  /* Avatar */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-indigo-100, #e0e7ff);
    color: var(--color-indigo-700, #4338ca);
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
  }
  .avatar-xs  { width: 24px;  height: 24px;  font-size: 10px; }
  .avatar-sm  { width: 32px;  height: 32px;  font-size: 12px; }
  .avatar-md  { width: 40px;  height: 40px;  font-size: 14px; }
  .avatar-lg  { width: 48px;  height: 48px;  font-size: 16px; }
  .avatar-xl  { width: 64px;  height: 64px;  font-size: 22px; }
  .avatar-2xl { width: 80px;  height: 80px;  font-size: 28px; }

  /* Divider */
  .divider {
    height: 1px;
    background: var(--ui-border-color, #e5e7eb);
    margin: var(--space-4, 16px) 0;
  }
  .divider-x {
    width: 1px;
    height: auto;
    background: var(--ui-border-color, #e5e7eb);
    align-self: stretch;
    margin: 0 var(--space-4, 16px);
  }
  .divider-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ui-text-muted, #9ca3af);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .divider-label::before,
  .divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ui-border-color, #e5e7eb);
  }

  /* Skeleton */
  .skeleton {
    background: linear-gradient(90deg, var(--color-slate-100, #f1f5f9) 25%, var(--color-slate-200, #e2e8f0) 50%, var(--color-slate-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md, 6px);
  }
  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .skeleton-text   { height: 1em; margin-bottom: 6px; }
  .skeleton-circle { border-radius: var(--radius-full, 9999px); }
  .skeleton-rect   { border-radius: 0; }

  /* Empty state */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 48px) var(--space-6, 24px);
    text-align: center;
    gap: var(--space-3, 12px);
  }
  .empty-state-icon { font-size: 3rem; opacity: .3; }
  .empty-state-title { font-size: var(--text-lg, 1.125rem); font-weight: 600; color: var(--ui-text-primary, #111827); }
  .empty-state-description { font-size: var(--text-sm, 0.875rem); color: var(--ui-text-secondary, #6b7280); max-width: 320px; }

  /* Stack layout helper */
  .stack   { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
  .stack-2 { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
  .stack-6 { display: flex; flex-direction: column; gap: var(--space-6, 24px); }
  .stack-8 { display: flex; flex-direction: column; gap: var(--space-8, 32px); }
  .cluster { display: flex; flex-wrap: wrap;         gap: var(--space-3, 12px); align-items: center; }
  .inline-cluster { display: inline-flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }

  /* Section */
  .section { padding: var(--space-16, 64px) 0; }
  .section-sm { padding: var(--space-8, 32px) 0; }
  .section-lg { padding: var(--space-24, 96px) 0; }
}

/* ── Patterns Layer ────────────────────────────────────────── */
@layer patterns {
  /* Login card */
  .auth-card {
    max-width: 440px;
    margin: 0 auto;
    padding: var(--space-8, 32px);
    background: var(--ui-bg-primary, #fff);
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-xl);
  }

  /* Dashboard layout */
  .dashboard-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 64px 1fr;
    min-height: 100vh;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
  }
  .dashboard-sidebar { grid-area: sidebar; }
  .dashboard-header  { grid-area: header; }
  .dashboard-main    { grid-area: main; overflow: auto; }

  @media (max-width: 768px) {
    .dashboard-layout {
      grid-template-columns: 1fr;
      grid-template-rows: 64px 1fr;
      grid-template-areas: "header" "main";
    }
    .dashboard-sidebar { display: none; }
  }

  /* Stat card */
  .stat-card {
    padding: var(--space-5, 20px) var(--space-6, 24px);
    background: var(--ui-bg-primary, #fff);
    border: 1px solid var(--ui-border-color, #e5e7eb);
    border-radius: var(--radius-xl, 12px);
  }
  .stat-label { font-size: var(--text-sm, 0.875rem); color: var(--ui-text-secondary, #6b7280); margin-bottom: 4px; }
  .stat-value { font-size: var(--text-3xl, 1.875rem); font-weight: 700; color: var(--ui-text-primary, #111827); }
  .stat-trend { font-size: var(--text-sm, 0.875rem); font-weight: 500; }
  .stat-trend-up   { color: var(--ui-color-success, #10b981); }
  .stat-trend-down { color: var(--ui-color-danger, #ef4444); }

  /* Nav item */
  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-lg, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--ui-text-secondary, #6b7280);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast, 150ms), color var(--duration-fast, 150ms);
  }
  .nav-item:hover { background: var(--color-slate-100, #f1f5f9); color: var(--ui-text-primary, #111827); }
  .nav-item-active { background: var(--color-indigo-50, #eef2ff); color: var(--ui-color-primary, #6366f1); }
  .nav-item-active:hover { background: var(--color-indigo-100, #e0e7ff); }

  /* Page header */
  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding-bottom: var(--space-6, 24px);
    border-bottom: 1px solid var(--ui-border-color, #e5e7eb);
    margin-bottom: var(--space-6, 24px);
  }
  .page-title { font-size: var(--text-2xl, 1.5rem); font-weight: 700; color: var(--ui-text-primary, #111827); }
  .page-subtitle { font-size: var(--text-sm, 0.875rem); color: var(--ui-text-secondary, #6b7280); margin-top: 2px; }

  /* Form group */
  .form-group { display: flex; flex-direction: column; gap: var(--space-1-5, 6px); }
  .form-row {
    display: grid;
    gap: var(--space-4, 16px);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Modal-like centered box */
  .dialog-box {
    background: var(--ui-bg-primary, #fff);
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-6, 24px);
    width: 100%;
  }
  .dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4, 16px); }
  .dialog-title  { font-size: var(--text-lg, 1.125rem); font-weight: 700; }
  .dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-3, 12px); margin-top: var(--space-6, 24px); padding-top: var(--space-4, 16px); border-top: 1px solid var(--ui-border-color, #e5e7eb); }

  /* Toolbar */
  .toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    background: var(--ui-bg-primary, #fff);
    border: 1px solid var(--ui-border-color, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
  }
  .toolbar-divider { width: 1px; height: 20px; background: var(--ui-border-color, #e5e7eb); margin: 0 var(--space-1, 4px); }

  /* Sidebar */
  .sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    height: 100%;
    background: var(--ui-bg-primary, #fff);
    border-right: 1px solid var(--ui-border-color, #e5e7eb);
    padding: var(--space-4, 16px);
    gap: var(--space-1, 4px);
    overflow-y: auto;
  }
  .sidebar-section { padding: var(--space-3, 12px) 0; }
  .sidebar-section + .sidebar-section { border-top: 1px solid var(--ui-border-color, #e5e7eb); }
  .sidebar-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted, #9ca3af);
    padding: var(--space-1-5, 6px) var(--space-3, 12px);
    margin-bottom: 2px;
  }
}

/* ── Utilities Layer ────────────────────────────────────────── */
@layer utilities {
  /* These repeat key utilities from utilities.css within the layer system.
     When using @layer, utilities.css should be @import-ed into this layer. */
}

/* ── Overrides Layer ───────────────────────────────────────── */
@layer overrides {
  /* Consumer app styles that must override everything else.
     Users can add their own overrides here:
     @layer overrides { .my-custom-class { ... } }
  */
}