/* ============================================================
   COMPONENT LAYER
   Buttons, Cards, Badges, Forms, Alerts, Layout primitives
   All consume tokens from ds.css — never hardcode.
   ============================================================ */

@layer components {

  /* ===== LAYOUT PRIMITIVES ===== */
  .ds-container {
    width: 100%;
    max-width: var(--container-base);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
  .ds-container--narrow { max-width: var(--container-narrow); }
  .ds-container--wide   { max-width: var(--container-wide); }

  .ds-stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }
  .ds-stack--xs > * + * { margin-top: var(--sp-1); }
  .ds-stack--sm > * + * { margin-top: var(--sp-2); }
  .ds-stack--md > * + * { margin-top: var(--sp-4); }
  .ds-stack--lg > * + * { margin-top: var(--sp-6); }
  .ds-stack--xl > * + * { margin-top: var(--sp-8); }

  .ds-cluster {
    display: flex; flex-wrap: wrap;
    gap: var(--cluster-gap, var(--sp-3));
    align-items: var(--cluster-align, center);
  }
  .ds-cluster--sm { --cluster-gap: var(--sp-2); }
  .ds-cluster--lg { --cluster-gap: var(--sp-5); }

  .ds-grid {
    display: grid;
    gap: var(--grid-gap, var(--sp-5));
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 280px), 1fr));
  }
  .ds-grid--cards { --grid-min: 320px; --grid-gap: var(--sp-5); }
  .ds-grid--tight { --grid-gap: var(--sp-3); }

  .ds-section {
    padding-block: var(--section-pad-y, var(--sp-9));
  }
  .ds-section--tight { --section-pad-y: var(--sp-7); }
  .ds-section--snug  { --section-pad-y: var(--sp-6); }

  /* ===== BUTTONS ===== */
  .ds-btn {
    --btn-bg:        transparent;
    --btn-fg:        var(--text-strong);
    --btn-border:    transparent;
    --btn-bg-hover:  transparent;
    --btn-fg-hover:  var(--text-strong);
    --btn-shadow:    none;
    --btn-pad-y:     var(--sp-3);
    --btn-pad-x:     var(--sp-5);
    --btn-fs:        var(--fs-base);
    --btn-fw:        var(--fw-semibold);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--ff-sans);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1.5px solid var(--btn-border);
    border-radius: var(--radius-md);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
    user-select: none;
  }

  .ds-btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
    border-color: var(--btn-border-hover, var(--btn-border));
  }
  .ds-btn:active { transform: translateY(1px); }
  .ds-btn:disabled, .ds-btn[aria-disabled="true"] {
    opacity: 0.5; pointer-events: none; cursor: not-allowed;
  }

  /* Variants */
  .ds-btn--primary {
    --btn-bg:       var(--brand-primary);
    --btn-fg:       var(--brand-primary-fg);
    --btn-border:   var(--brand-primary);
    --btn-bg-hover: var(--brand-primary-hover);
    --btn-fg-hover: var(--brand-primary-fg);
    --btn-border-hover: var(--brand-primary-hover);
    --btn-shadow:   var(--shadow-sm);
  }
  .ds-btn--primary:hover { box-shadow: var(--shadow-md); }

  .ds-btn--secondary {
    --btn-bg:       var(--bg-surface);
    --btn-fg:       var(--text-strong);
    --btn-border:   var(--border-default);
    --btn-bg-hover: var(--bg-muted);
    --btn-border-hover: var(--border-strong);
  }

  .ds-btn--ghost {
    --btn-bg:       transparent;
    --btn-fg:       var(--text-strong);
    --btn-border:   transparent;
    --btn-bg-hover: var(--bg-muted);
  }

  .ds-btn--danger {
    --btn-bg:       var(--danger-bg);
    --btn-fg:       var(--danger-fg);
    --btn-border:   var(--danger-border);
    --btn-bg-hover: var(--danger-fg);
    --btn-fg-hover: var(--neutral-0);
    --btn-border-hover: var(--danger-fg);
  }

  /* Sizes */
  .ds-btn--xs { --btn-pad-y: 4px;  --btn-pad-x: var(--sp-3); --btn-fs: var(--fs-xs); }
  .ds-btn--sm { --btn-pad-y: 8px;  --btn-pad-x: var(--sp-4); --btn-fs: var(--fs-sm); }
  .ds-btn--lg { --btn-pad-y: 14px; --btn-pad-x: var(--sp-6); --btn-fs: var(--fs-md); }
  .ds-btn--xl { --btn-pad-y: 18px; --btn-pad-x: var(--sp-7); --btn-fs: var(--fs-lg); }

  .ds-btn--block { display: flex; width: 100%; }

  /* ===== CARDS ===== */
  .ds-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    display: flex; flex-direction: column;
  }
  .ds-card--hoverable:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .ds-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-muted); }
  .ds-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .ds-card--hoverable:hover .ds-card__media img { transform: scale(1.04); }
  .ds-card__body  { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
  .ds-card__title { font-family: var(--ff-display); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); }
  .ds-card__meta  { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .ds-card__footer{ padding: var(--sp-3) var(--sp-5) var(--sp-5); display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }

  /* ===== BADGES / PILLS ===== */
  .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px var(--sp-2);
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-default);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .ds-badge--success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }
  .ds-badge--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; }
  .ds-badge--danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: transparent; }
  .ds-badge--info    { background: var(--info-bg);    color: var(--info-fg);    border-color: transparent; }
  .ds-badge--brand   { background: var(--green-100);  color: var(--green-800);  border-color: transparent; }

  /* ===== FORM CONTROLS ===== */
  .ds-field { display: flex; flex-direction: column; gap: 6px; }
  .ds-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .ds-field__hint  { font-size: var(--fs-xs); color: var(--text-muted); }
  .ds-field__error { font-size: var(--fs-xs); color: var(--danger-fg); }

  .ds-input, .ds-textarea, .ds-select {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color: var(--border-strong); }
  .ds-input:focus, .ds-textarea:focus, .ds-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
  }
  .ds-textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }

  /* ===== ALERTS ===== */
  .ds-alert {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-muted);
    color: var(--text-default);
    align-items: flex-start;
    line-height: var(--lh-relaxed);
  }
  .ds-alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
  .ds-alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
  .ds-alert--danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg); }
  .ds-alert--info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-fg); }
  .ds-alert__title  { font-weight: var(--fw-semibold); margin-bottom: 2px; }

  /* ===== TABLES ===== */
  .ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  .ds-table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-muted);
  }
  .ds-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-default);
  }
  .ds-table tr:hover td { background: var(--bg-muted); }

  /* ===== LINK ===== */
  .ds-link {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--text-link) 30%, transparent);
    transition: color var(--dur-base) var(--ease-out),
                text-decoration-color var(--dur-base) var(--ease-out);
  }
  .ds-link:hover {
    color: var(--text-link-hover);
    text-decoration-color: var(--text-link-hover);
  }
}

/* ===== UTILITIES ===== */
@layer utilities {
  .ds-mt-0 { margin-top: 0 !important; }
  .ds-mt-1 { margin-top: var(--sp-1) !important; }
  .ds-mt-2 { margin-top: var(--sp-2) !important; }
  .ds-mt-3 { margin-top: var(--sp-3) !important; }
  .ds-mt-4 { margin-top: var(--sp-4) !important; }
  .ds-mt-5 { margin-top: var(--sp-5) !important; }
  .ds-mt-6 { margin-top: var(--sp-6) !important; }
  .ds-mt-7 { margin-top: var(--sp-7) !important; }

  .ds-text-center { text-align: center; }
  .ds-text-left   { text-align: left; }
  .ds-text-right  { text-align: right; }

  .ds-flex-center { display: flex; align-items: center; justify-content: center; }
  .ds-w-full      { width: 100%; }
  .ds-max-prose   { max-width: 65ch; }

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