/* =============================================================================
   DESIGN SYSTEM — COMPILED CSS PREVIEW
   preview/css/ds-preview.css

   Purpose:
     Self-contained CSS equivalent of the compiled SCSS output.
     Used exclusively by the preview/playground system.
     Mirrors the @layer architecture from SCSS exactly.

   Layer priority (lowest → highest):
     tokens < base < utilities < components < themes < adapters
   ============================================================================= */

/* --------------------------------------------------------------------------
   @layer order — MUST be declared first
   -------------------------------------------------------------------------- */
@layer tokens, base, utilities, components, themes, adapters;

/* ============================================================================
   LAYER: tokens
   ============================================================================ */
@layer tokens {

  :root {

    /* ── Primitives: Neutral scale ─────────────────────────────────────── */
    --primitive-color-neutral-0:    #ffffff;
    --primitive-color-neutral-50:   #f8f9fa;
    --primitive-color-neutral-100:  #f1f3f5;
    --primitive-color-neutral-200:  #e9ecef;
    --primitive-color-neutral-300:  #dee2e6;
    --primitive-color-neutral-400:  #ced4da;
    --primitive-color-neutral-500:  #adb5bd;
    --primitive-color-neutral-600:  #868e96;
    --primitive-color-neutral-700:  #495057;
    --primitive-color-neutral-800:  #343a40;
    --primitive-color-neutral-900:  #212529;
    --primitive-color-neutral-1000: #000000;

    /* ── Primitives: Blue scale ─────────────────────────────────────────── */
    --primitive-color-blue-50:  #e7f5ff;
    --primitive-color-blue-100: #d0ebff;
    --primitive-color-blue-200: #a5d8ff;
    --primitive-color-blue-300: #74c0fc;
    --primitive-color-blue-400: #4dabf7;
    --primitive-color-blue-500: #339af0;
    --primitive-color-blue-600: #228be6;
    --primitive-color-blue-700: #1c7ed6;
    --primitive-color-blue-800: #1971c2;
    --primitive-color-blue-900: #1864ab;

    /* ── Primitives: Green scale ─────────────────────────────────────────── */
    --primitive-color-green-50:  #ebfbee;
    --primitive-color-green-100: #d3f9d8;
    --primitive-color-green-200: #b2f2bb;
    --primitive-color-green-300: #8ce99a;
    --primitive-color-green-400: #69db7c;
    --primitive-color-green-500: #51cf66;
    --primitive-color-green-600: #40c057;
    --primitive-color-green-700: #37b24d;
    --primitive-color-green-800: #2f9e44;
    --primitive-color-green-900: #2b8a3e;

    /* ── Primitives: Yellow scale ─────────────────────────────────────────── */
    --primitive-color-yellow-50:  #fff9db;
    --primitive-color-yellow-100: #fff3bf;
    --primitive-color-yellow-200: #ffec99;
    --primitive-color-yellow-300: #ffe066;
    --primitive-color-yellow-400: #ffd43b;
    --primitive-color-yellow-500: #fcc419;
    --primitive-color-yellow-600: #fab005;
    --primitive-color-yellow-700: #f59f00;
    --primitive-color-yellow-800: #f08c00;
    --primitive-color-yellow-900: #e67700;

    /* ── Primitives: Red scale ─────────────────────────────────────────── */
    --primitive-color-red-50:  #fff5f5;
    --primitive-color-red-100: #ffe3e3;
    --primitive-color-red-200: #ffc9c9;
    --primitive-color-red-300: #ffa8a8;
    --primitive-color-red-400: #ff8787;
    --primitive-color-red-500: #ff6b6b;
    --primitive-color-red-600: #fa5252;
    --primitive-color-red-700: #f03e3e;
    --primitive-color-red-800: #e03131;
    --primitive-color-red-900: #c92a2a;

    /* ── Primitives: Spacing (4px base) ────────────────────────────────── */
    --primitive-spacing-0:   0rem;
    --primitive-spacing-1:   0.25rem;
    --primitive-spacing-2:   0.5rem;
    --primitive-spacing-3:   0.75rem;
    --primitive-spacing-4:   1rem;
    --primitive-spacing-5:   1.25rem;
    --primitive-spacing-6:   1.5rem;
    --primitive-spacing-7:   1.75rem;
    --primitive-spacing-8:   2rem;
    --primitive-spacing-10:  2.5rem;
    --primitive-spacing-12:  3rem;
    --primitive-spacing-16:  4rem;
    --primitive-spacing-20:  5rem;
    --primitive-spacing-24:  6rem;

    /* ── Primitives: Border radius ──────────────────────────────────────── */
    --primitive-radius-none: 0rem;
    --primitive-radius-xs:   0.125rem;
    --primitive-radius-sm:   0.25rem;
    --primitive-radius-md:   0.375rem;
    --primitive-radius-lg:   0.5rem;
    --primitive-radius-xl:   0.75rem;
    --primitive-radius-2xl:  1rem;
    --primitive-radius-3xl:  1.5rem;
    --primitive-radius-full: 9999px;

    /* ── Primitives: Typography — font families ─────────────────────────── */
    --primitive-font-family-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --primitive-font-family-serif: 'Georgia', 'Times New Roman', Times, serif;
    --primitive-font-family-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* ── Primitives: Typography — font sizes ────────────────────────────── */
    --primitive-font-size-2xs: 0.625rem;
    --primitive-font-size-xs:  0.75rem;
    --primitive-font-size-sm:  0.875rem;
    --primitive-font-size-md:  1rem;
    --primitive-font-size-lg:  1.125rem;
    --primitive-font-size-xl:  1.25rem;
    --primitive-font-size-2xl: 1.5rem;
    --primitive-font-size-3xl: 1.875rem;
    --primitive-font-size-4xl: 2.25rem;
    --primitive-font-size-5xl: 3rem;

    /* ── Primitives: Typography — font weights ──────────────────────────── */
    --primitive-font-weight-thin:       100;
    --primitive-font-weight-extralight: 200;
    --primitive-font-weight-light:      300;
    --primitive-font-weight-regular:    400;
    --primitive-font-weight-medium:     500;
    --primitive-font-weight-semibold:   600;
    --primitive-font-weight-bold:       700;
    --primitive-font-weight-extrabold:  800;
    --primitive-font-weight-black:      900;

    /* ── Primitives: Typography — line heights ──────────────────────────── */
    --primitive-line-height-none:    1;
    --primitive-line-height-tight:   1.25;
    --primitive-line-height-snug:    1.375;
    --primitive-line-height-normal:  1.5;
    --primitive-line-height-relaxed: 1.625;
    --primitive-line-height-loose:   2;

    /* ── Primitives: Typography — letter spacing ────────────────────────── */
    --primitive-letter-spacing-tighter: -0.05em;
    --primitive-letter-spacing-tight:   -0.025em;
    --primitive-letter-spacing-normal:   0em;
    --primitive-letter-spacing-wide:     0.025em;
    --primitive-letter-spacing-wider:    0.05em;
    --primitive-letter-spacing-widest:   0.1em;

    /* ── Semantic: Brand colors ─────────────────────────────────────────── */
    --semantic-color-brand-default:      var(--primitive-color-blue-600);
    --semantic-color-brand-hover:        var(--primitive-color-blue-700);
    --semantic-color-brand-active:       var(--primitive-color-blue-800);
    --semantic-color-brand-subtle:       var(--primitive-color-blue-50);
    --semantic-color-brand-contrast:     var(--primitive-color-neutral-0);
    --semantic-color-brand-tonal-bg:     var(--primitive-color-blue-50);
    --semantic-color-brand-tonal-hover:  var(--primitive-color-blue-100);
    --semantic-color-brand-tonal-active: var(--primitive-color-blue-200);

    /* ── Semantic: Surface colors ───────────────────────────────────────── */
    --semantic-color-surface-base:    var(--primitive-color-neutral-0);
    --semantic-color-surface-raised:  var(--primitive-color-neutral-50);
    --semantic-color-surface-overlay: var(--primitive-color-neutral-100);
    --semantic-color-surface-sunken:  var(--primitive-color-neutral-200);
    --semantic-color-surface-inverse: var(--primitive-color-neutral-900);

    /* ── Semantic: Text colors ──────────────────────────────────────────── */
    --semantic-color-text-default:  var(--primitive-color-neutral-900);
    --semantic-color-text-subtle:   var(--primitive-color-neutral-600);
    --semantic-color-text-disabled: var(--primitive-color-neutral-400);
    --semantic-color-text-inverse:  var(--primitive-color-neutral-0);
    --semantic-color-text-brand:    var(--primitive-color-blue-600);
    --semantic-color-text-on-brand: var(--primitive-color-neutral-0);

    /* ── Semantic: Border colors ────────────────────────────────────────── */
    --semantic-color-border-default: var(--primitive-color-neutral-300);
    --semantic-color-border-strong:  var(--primitive-color-neutral-500);
    --semantic-color-border-focus:   var(--primitive-color-blue-500);
    --semantic-color-border-brand:   var(--primitive-color-blue-600);

    /* ── Semantic: Feedback — success ───────────────────────────────────── */
    --semantic-color-feedback-success-default: var(--primitive-color-green-600);
    --semantic-color-feedback-success-subtle:  var(--primitive-color-green-50);
    --semantic-color-feedback-success-text:    var(--primitive-color-green-800);

    /* ── Semantic: Feedback — warning ───────────────────────────────────── */
    --semantic-color-feedback-warning-default: var(--primitive-color-yellow-500);
    --semantic-color-feedback-warning-subtle:  var(--primitive-color-yellow-50);
    --semantic-color-feedback-warning-text:    var(--primitive-color-yellow-900);

    /* ── Semantic: Feedback — danger ────────────────────────────────────── */
    --semantic-color-feedback-danger-default:  var(--primitive-color-red-600);
    --semantic-color-feedback-danger-hover:    var(--primitive-color-red-700);
    --semantic-color-feedback-danger-active:   var(--primitive-color-red-800);
    --semantic-color-feedback-danger-subtle:   var(--primitive-color-red-50);
    --semantic-color-feedback-danger-text:     var(--primitive-color-red-800);
    --semantic-color-feedback-danger-contrast: var(--primitive-color-neutral-0);

    /* ── Semantic: Interactive states ───────────────────────────────────── */
    --semantic-color-interactive-default:  var(--primitive-color-blue-600);
    --semantic-color-interactive-hover:    var(--primitive-color-blue-700);
    --semantic-color-interactive-active:   var(--primitive-color-blue-800);
    --semantic-color-interactive-focus:    var(--primitive-color-blue-400);
    --semantic-color-interactive-disabled: var(--primitive-color-neutral-300);

    /* ── Semantic: Spacing ──────────────────────────────────────────────── */
    --semantic-spacing-layout-xs:  var(--primitive-spacing-4);
    --semantic-spacing-layout-sm:  var(--primitive-spacing-6);
    --semantic-spacing-layout-md:  var(--primitive-spacing-8);
    --semantic-spacing-layout-lg:  var(--primitive-spacing-12);
    --semantic-spacing-layout-xl:  var(--primitive-spacing-16);
    --semantic-spacing-layout-2xl: var(--primitive-spacing-24);

    --semantic-spacing-component-2xs: var(--primitive-spacing-1);
    --semantic-spacing-component-xs:  var(--primitive-spacing-2);
    --semantic-spacing-component-sm:  var(--primitive-spacing-3);
    --semantic-spacing-component-md:  var(--primitive-spacing-4);
    --semantic-spacing-component-lg:  var(--primitive-spacing-6);
    --semantic-spacing-component-xl:  var(--primitive-spacing-8);

    --semantic-spacing-inline-xs: var(--primitive-spacing-1);
    --semantic-spacing-inline-sm: var(--primitive-spacing-2);
    --semantic-spacing-inline-md: var(--primitive-spacing-3);
    --semantic-spacing-inline-lg: var(--primitive-spacing-4);

    --semantic-spacing-stack-xs: var(--primitive-spacing-2);
    --semantic-spacing-stack-sm: var(--primitive-spacing-4);
    --semantic-spacing-stack-md: var(--primitive-spacing-6);
    --semantic-spacing-stack-lg: var(--primitive-spacing-8);
    --semantic-spacing-stack-xl: var(--primitive-spacing-12);

    /* ── Semantic: Typography ───────────────────────────────────────────── */
    --semantic-font-family-body:    var(--primitive-font-family-sans);
    --semantic-font-family-heading: var(--primitive-font-family-sans);
    --semantic-font-family-code:    var(--primitive-font-family-mono);
    --semantic-font-family-ui:      var(--primitive-font-family-sans);

    --semantic-font-size-body-sm: var(--primitive-font-size-sm);
    --semantic-font-size-body-md: var(--primitive-font-size-md);
    --semantic-font-size-body-lg: var(--primitive-font-size-lg);

    --semantic-font-size-heading-xs:  var(--primitive-font-size-lg);
    --semantic-font-size-heading-sm:  var(--primitive-font-size-xl);
    --semantic-font-size-heading-md:  var(--primitive-font-size-2xl);
    --semantic-font-size-heading-lg:  var(--primitive-font-size-3xl);
    --semantic-font-size-heading-xl:  var(--primitive-font-size-4xl);
    --semantic-font-size-heading-2xl: var(--primitive-font-size-5xl);

    --semantic-font-size-ui-xs: var(--primitive-font-size-2xs);
    --semantic-font-size-ui-sm: var(--primitive-font-size-xs);
    --semantic-font-size-ui-md: var(--primitive-font-size-sm);
    --semantic-font-size-ui-lg: var(--primitive-font-size-md);

    --semantic-font-weight-body:     var(--primitive-font-weight-regular);
    --semantic-font-weight-emphasis: var(--primitive-font-weight-medium);
    --semantic-font-weight-strong:   var(--primitive-font-weight-semibold);
    --semantic-font-weight-heading:  var(--primitive-font-weight-bold);
    --semantic-font-weight-ui:       var(--primitive-font-weight-medium);
    --semantic-font-weight-label:    var(--primitive-font-weight-semibold);

    --semantic-line-height-body:    var(--primitive-line-height-normal);
    --semantic-line-height-heading: var(--primitive-line-height-tight);
    --semantic-line-height-ui:      var(--primitive-line-height-snug);
    --semantic-line-height-code:    var(--primitive-line-height-relaxed);

    --semantic-letter-spacing-body:    var(--primitive-letter-spacing-normal);
    --semantic-letter-spacing-heading: var(--primitive-letter-spacing-tight);
    --semantic-letter-spacing-ui:      var(--primitive-letter-spacing-normal);
    --semantic-letter-spacing-caps:    var(--primitive-letter-spacing-wider);
  }
}

/* ============================================================================
   LAYER: base
   ============================================================================ */
@layer base {

  :root {
    font-size: 100%;
    color-scheme: light;

    --base-focus-ring-width:  2px;
    --base-focus-ring-offset: 2px;
    --base-focus-ring-color:  var(--semantic-color-border-focus);

    --base-transition-duration-fast:   120ms;
    --base-transition-duration-normal: 200ms;
    --base-transition-duration-slow:   350ms;
    --base-transition-easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --base-transition-easing-in:       cubic-bezier(0.4, 0, 1, 1);
    --base-transition-easing-out:      cubic-bezier(0, 0, 0.2, 1);

    --base-z-index-below:   -1;
    --base-z-index-base:     0;
    --base-z-index-raised:   10;
    --base-z-index-dropdown: 100;
    --base-z-index-sticky:   200;
    --base-z-index-overlay:  300;
    --base-z-index-modal:    400;
    --base-z-index-toast:    500;
  }

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family:  var(--semantic-font-family-body);
    font-size:    var(--semantic-font-size-body-md);
    font-weight:  var(--semantic-font-weight-body);
    line-height:  var(--semantic-line-height-body);
    color:        var(--semantic-color-text-default);
    background:   var(--semantic-color-surface-base);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--semantic-font-family-heading);
    font-weight: var(--semantic-font-weight-heading);
    line-height: var(--semantic-line-height-heading);
    color:       var(--semantic-color-text-default);
  }

  a { color: var(--semantic-color-text-brand); text-decoration: underline; }
  a:hover { color: var(--semantic-color-brand-hover); }

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

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: none; cursor: pointer; }

  p { line-height: var(--semantic-line-height-body); }

  ul, ol { list-style: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

/* ============================================================================
   LAYER: components — Button
   ============================================================================ */
@layer components {

  /* ── Button variables ─────────────────────────────────────────────────── */
  :root {
    --component-button-border-width:    1px;
    --component-button-border-style:    solid;
    --component-button-border-radius:   var(--primitive-radius-md);
    --component-button-line-height:     1;
    --component-button-letter-spacing:  var(--semantic-letter-spacing-ui);

    --component-button-focus-ring-width:  var(--base-focus-ring-width);
    --component-button-focus-ring-offset: var(--base-focus-ring-offset);
    --component-button-focus-ring-color:  var(--base-focus-ring-color);

    --component-button-transition-duration: var(--base-transition-duration-fast);
    --component-button-transition-easing:   var(--base-transition-easing-default);

    /* variant: primary */
    --component-button-primary-bg:              var(--semantic-color-brand-default);
    --component-button-primary-bg-hover:        var(--semantic-color-brand-hover);
    --component-button-primary-bg-active:       var(--semantic-color-brand-active);
    --component-button-primary-bg-disabled:     var(--semantic-color-interactive-disabled);
    --component-button-primary-color:           var(--semantic-color-brand-contrast);
    --component-button-primary-color-disabled:  var(--semantic-color-text-disabled);
    --component-button-primary-border-color:    transparent;

    /* variant: secondary */
    --component-button-secondary-bg:                    transparent;
    --component-button-secondary-bg-hover:              var(--semantic-color-surface-raised);
    --component-button-secondary-bg-active:             var(--semantic-color-surface-overlay);
    --component-button-secondary-bg-disabled:           transparent;
    --component-button-secondary-color:                 var(--semantic-color-text-brand);
    --component-button-secondary-color-disabled:        var(--semantic-color-text-disabled);
    --component-button-secondary-border-color:          var(--semantic-color-border-brand);
    --component-button-secondary-border-color-hover:    var(--semantic-color-brand-hover);
    --component-button-secondary-border-color-disabled: var(--semantic-color-interactive-disabled);

    /* variant: tertiary */
    --component-button-tertiary-bg:             var(--semantic-color-brand-tonal-bg);
    --component-button-tertiary-bg-hover:       var(--semantic-color-brand-tonal-hover);
    --component-button-tertiary-bg-active:      var(--semantic-color-brand-tonal-active);
    --component-button-tertiary-bg-disabled:    var(--semantic-color-interactive-disabled);
    --component-button-tertiary-color:          var(--semantic-color-text-brand);
    --component-button-tertiary-color-disabled: var(--semantic-color-text-disabled);
    --component-button-tertiary-border-color:   transparent;

    /* variant: ghost */
    --component-button-ghost-bg:             transparent;
    --component-button-ghost-bg-hover:       var(--semantic-color-surface-raised);
    --component-button-ghost-bg-active:      var(--semantic-color-surface-overlay);
    --component-button-ghost-bg-disabled:    transparent;
    --component-button-ghost-color:          var(--semantic-color-text-default);
    --component-button-ghost-color-disabled: var(--semantic-color-text-disabled);
    --component-button-ghost-border-color:   transparent;

    /* variant: danger */
    --component-button-danger-bg:             var(--semantic-color-feedback-danger-default);
    --component-button-danger-bg-hover:       var(--semantic-color-feedback-danger-hover);
    --component-button-danger-bg-active:      var(--semantic-color-feedback-danger-active);
    --component-button-danger-bg-disabled:    var(--semantic-color-interactive-disabled);
    --component-button-danger-color:          var(--semantic-color-feedback-danger-contrast);
    --component-button-danger-color-disabled: var(--semantic-color-text-disabled);
    --component-button-danger-border-color:   transparent;

    /* size: sm */
    --component-button-sm-padding-block:  var(--semantic-spacing-component-xs);
    --component-button-sm-padding-inline: var(--semantic-spacing-component-sm);
    --component-button-sm-font-size:      var(--semantic-font-size-ui-sm);
    --component-button-sm-font-weight:    var(--semantic-font-weight-label);
    --component-button-sm-gap:            var(--semantic-spacing-inline-xs);
    --component-button-sm-min-height:     var(--primitive-spacing-8);

    /* size: md */
    --component-button-md-padding-block:  var(--semantic-spacing-component-sm);
    --component-button-md-padding-inline: var(--semantic-spacing-component-md);
    --component-button-md-font-size:      var(--semantic-font-size-ui-md);
    --component-button-md-font-weight:    var(--semantic-font-weight-label);
    --component-button-md-gap:            var(--semantic-spacing-inline-sm);
    --component-button-md-min-height:     var(--primitive-spacing-10);

    /* size: lg */
    --component-button-lg-padding-block:  var(--semantic-spacing-component-md);
    --component-button-lg-padding-inline: var(--semantic-spacing-component-lg);
    --component-button-lg-font-size:      var(--semantic-font-size-ui-lg);
    --component-button-lg-font-weight:    var(--semantic-font-weight-label);
    --component-button-lg-gap:            var(--semantic-spacing-inline-sm);
    --component-button-lg-min-height:     var(--primitive-spacing-12);
  }

  /* ── Button structural styles ─────────────────────────────────────────── */
  .ds-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--component-button-md-gap);
    padding-block:   var(--component-button-md-padding-block);
    padding-inline:  var(--component-button-md-padding-inline);
    min-height:      var(--component-button-md-min-height);
    font-size:       var(--component-button-md-font-size);
    font-weight:     var(--component-button-md-font-weight);
    line-height:     var(--component-button-line-height);
    letter-spacing:  var(--component-button-letter-spacing);
    white-space:     nowrap;
    text-decoration: none;
    vertical-align:  middle;
    border-width:    var(--component-button-border-width);
    border-style:    var(--component-button-border-style);
    border-radius:   var(--component-button-border-radius);
    cursor:          pointer;
    user-select:     none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--component-button-transition-duration) var(--component-button-transition-easing),
      border-color     var(--component-button-transition-duration) var(--component-button-transition-easing),
      color            var(--component-button-transition-duration) var(--component-button-transition-easing),
      box-shadow       var(--component-button-transition-duration) var(--component-button-transition-easing),
      opacity          var(--component-button-transition-duration) var(--component-button-transition-easing);
  }

  .ds-btn:focus-visible {
    outline:        var(--component-button-focus-ring-width) solid var(--component-button-focus-ring-color);
    outline-offset: var(--component-button-focus-ring-offset);
  }

  /* Variants */
  .ds-btn--primary  { background: var(--component-button-primary-bg);   color: var(--component-button-primary-color);   border-color: var(--component-button-primary-border-color); }
  .ds-btn--secondary{ background: var(--component-button-secondary-bg); color: var(--component-button-secondary-color); border-color: var(--component-button-secondary-border-color); }
  .ds-btn--tertiary { background: var(--component-button-tertiary-bg);  color: var(--component-button-tertiary-color);  border-color: var(--component-button-tertiary-border-color); }
  .ds-btn--ghost    { background: var(--component-button-ghost-bg);     color: var(--component-button-ghost-color);     border-color: var(--component-button-ghost-border-color); }
  .ds-btn--danger   { background: var(--component-button-danger-bg);    color: var(--component-button-danger-color);    border-color: var(--component-button-danger-border-color); }

  /* Hover/active states */
  .ds-btn--primary:hover:not(:disabled):not(.ds-btn--disabled)   { background: var(--component-button-primary-bg-hover); }
  .ds-btn--primary:active:not(:disabled):not(.ds-btn--disabled)  { background: var(--component-button-primary-bg-active); }
  .ds-btn--secondary:hover:not(:disabled):not(.ds-btn--disabled) { background: var(--component-button-secondary-bg-hover); border-color: var(--component-button-secondary-border-color-hover); }
  .ds-btn--secondary:active:not(:disabled):not(.ds-btn--disabled){ background: var(--component-button-secondary-bg-active); border-color: var(--component-button-secondary-border-color-hover); }
  .ds-btn--tertiary:hover:not(:disabled):not(.ds-btn--disabled)  { background: var(--component-button-tertiary-bg-hover); }
  .ds-btn--tertiary:active:not(:disabled):not(.ds-btn--disabled) { background: var(--component-button-tertiary-bg-active); }
  .ds-btn--ghost:hover:not(:disabled):not(.ds-btn--disabled)     { background: var(--component-button-ghost-bg-hover); }
  .ds-btn--ghost:active:not(:disabled):not(.ds-btn--disabled)    { background: var(--component-button-ghost-bg-active); }
  .ds-btn--danger:hover:not(:disabled):not(.ds-btn--disabled)    { background: var(--component-button-danger-bg-hover); }
  .ds-btn--danger:active:not(:disabled):not(.ds-btn--disabled)   { background: var(--component-button-danger-bg-active); }

  /* Disabled states */
  .ds-btn--primary:disabled,  .ds-btn--primary.ds-btn--disabled  { background: var(--component-button-primary-bg-disabled);   color: var(--component-button-primary-color-disabled); }
  .ds-btn--secondary:disabled,.ds-btn--secondary.ds-btn--disabled{ background: var(--component-button-secondary-bg-disabled); color: var(--component-button-secondary-color-disabled); border-color: var(--component-button-secondary-border-color-disabled); }
  .ds-btn--tertiary:disabled, .ds-btn--tertiary.ds-btn--disabled  { background: var(--component-button-tertiary-bg-disabled);  color: var(--component-button-tertiary-color-disabled); }
  .ds-btn--ghost:disabled,    .ds-btn--ghost.ds-btn--disabled    { background: var(--component-button-ghost-bg-disabled);     color: var(--component-button-ghost-color-disabled); }
  .ds-btn--danger:disabled,   .ds-btn--danger.ds-btn--disabled   { background: var(--component-button-danger-bg-disabled);    color: var(--component-button-danger-color-disabled); }

  /* Sizes */
  .ds-btn--sm { padding-block: var(--component-button-sm-padding-block); padding-inline: var(--component-button-sm-padding-inline); font-size: var(--component-button-sm-font-size); font-weight: var(--component-button-sm-font-weight); gap: var(--component-button-sm-gap); min-height: var(--component-button-sm-min-height); }
  .ds-btn--md { padding-block: var(--component-button-md-padding-block); padding-inline: var(--component-button-md-padding-inline); font-size: var(--component-button-md-font-size); font-weight: var(--component-button-md-font-weight); gap: var(--component-button-md-gap); min-height: var(--component-button-md-min-height); }
  .ds-btn--lg { padding-block: var(--component-button-lg-padding-block); padding-inline: var(--component-button-lg-padding-inline); font-size: var(--component-button-lg-font-size); font-weight: var(--component-button-lg-font-weight); gap: var(--component-button-lg-gap); min-height: var(--component-button-lg-min-height); }

  /* State modifiers */
  .ds-btn:disabled,
  .ds-btn--disabled   { cursor: not-allowed; opacity: 0.6; pointer-events: none; }
  .ds-btn--loading    { cursor: wait; pointer-events: none; opacity: 0.8; position: relative; }
  .ds-btn--full-width { width: 100%; }

  .ds-btn--icon-only { padding-inline: var(--component-button-md-padding-block); }
  .ds-btn--icon-only.ds-btn--sm { padding-inline: var(--component-button-sm-padding-block); }
  .ds-btn--icon-only.ds-btn--lg { padding-inline: var(--component-button-lg-padding-block); }

  /* Elements */
  .ds-btn__icon    { display: inline-flex; align-items: center; flex-shrink: 0; width: 1em; height: 1em; }
  .ds-btn__label   { transition: opacity var(--component-button-transition-duration) var(--component-button-transition-easing); }
  .ds-btn--loading .ds-btn__label { opacity: 0; }
  .ds-btn__spinner { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex-shrink: 0; }
  .ds-btn--loading .ds-btn__spinner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }
  .ds-btn__spinner::before {
    content: '';
    display: block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: ds-spin 0.65s linear infinite;
  }

  @keyframes ds-spin { to { transform: rotate(360deg); } }
}

/* ============================================================================
   LAYER: components — Card
   ============================================================================ */
@layer components {

  /* ── Card variables ───────────────────────────────────────────────────── */
  :root {
    --component-card-border-width:  1px;
    --component-card-border-style:  solid;
    --component-card-border-radius: var(--primitive-radius-lg);
    --component-card-border-color:  var(--semantic-color-border-default);

    --component-card-bg:         var(--semantic-color-surface-base);
    --component-card-bg-raised:  var(--semantic-color-surface-raised);
    --component-card-bg-sunken:  var(--semantic-color-surface-sunken);

    --component-card-shadow-none: none;
    --component-card-shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --component-card-shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --component-card-shadow-lg:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
    --component-card-shadow:      var(--component-card-shadow-sm);

    --component-card-focus-ring-width:  var(--base-focus-ring-width);
    --component-card-focus-ring-offset: var(--base-focus-ring-offset);
    --component-card-focus-ring-color:  var(--base-focus-ring-color);

    --component-card-transition-duration: var(--base-transition-duration-normal);
    --component-card-transition-easing:   var(--base-transition-easing-default);

    --component-card-header-padding-block:  var(--semantic-spacing-component-md);
    --component-card-header-padding-inline: var(--semantic-spacing-component-lg);
    --component-card-header-border-color:   var(--semantic-color-border-default);
    --component-card-header-title-font-size:   var(--semantic-font-size-heading-sm);
    --component-card-header-title-font-weight: var(--semantic-font-weight-heading);
    --component-card-header-title-color:       var(--semantic-color-text-default);
    --component-card-header-subtitle-font-size: var(--semantic-font-size-ui-sm);
    --component-card-header-subtitle-color:     var(--semantic-color-text-subtle);

    --component-card-body-padding-block:  var(--semantic-spacing-component-md);
    --component-card-body-padding-inline: var(--semantic-spacing-component-lg);
    --component-card-body-font-size:      var(--semantic-font-size-body-md);
    --component-card-body-color:          var(--semantic-color-text-default);
    --component-card-body-gap:            var(--semantic-spacing-stack-sm);

    --component-card-footer-padding-block:  var(--semantic-spacing-component-sm);
    --component-card-footer-padding-inline: var(--semantic-spacing-component-lg);
    --component-card-footer-bg:             var(--semantic-color-surface-raised);
    --component-card-footer-border-color:   var(--semantic-color-border-default);
    --component-card-footer-gap:            var(--semantic-spacing-inline-sm);

    --component-card-media-aspect-ratio: 16 / 9;
    --component-card-media-bg:           var(--semantic-color-surface-overlay);
  }

  /* ── Card structural styles ───────────────────────────────────────────── */
  .ds-card {
    display:        flex;
    flex-direction: column;
    position:       relative;
    border-width:   var(--component-card-border-width);
    border-style:   var(--component-card-border-style);
    border-color:   var(--component-card-border-color);
    border-radius:  var(--component-card-border-radius);
    overflow:       hidden;
    background:     var(--component-card-bg);
    box-shadow:     var(--component-card-shadow);
    transition:
      box-shadow       var(--component-card-transition-duration) var(--component-card-transition-easing),
      border-color     var(--component-card-transition-duration) var(--component-card-transition-easing),
      background-color var(--component-card-transition-duration) var(--component-card-transition-easing);
  }

  .ds-card[data-variant="default"]  { background: var(--component-card-bg);        box-shadow: var(--component-card-shadow-sm); }
  .ds-card[data-variant="raised"]   { background: var(--component-card-bg-raised);  box-shadow: var(--component-card-shadow-md); }
  .ds-card[data-variant="flat"]     { background: var(--component-card-bg);         box-shadow: var(--component-card-shadow-none); border-color: var(--component-card-border-color); }
  .ds-card[data-variant="sunken"]   { background: var(--component-card-bg-sunken);  box-shadow: var(--component-card-shadow-none); }

  .ds-card[data-interactive="true"] { cursor: pointer; }
  .ds-card[data-interactive="true"]:hover  { box-shadow: var(--component-card-shadow-md); border-color: var(--component-card-focus-ring-color); }
  .ds-card[data-interactive="true"]:active { box-shadow: var(--component-card-shadow-sm); }
  .ds-card[data-interactive="true"]:focus-visible { outline: var(--component-card-focus-ring-width) solid var(--component-card-focus-ring-color); outline-offset: var(--component-card-focus-ring-offset); }

  .ds-card[data-orientation="horizontal"] { flex-direction: row; }
  .ds-card[data-orientation="horizontal"] .ds-card__media { flex-shrink: 0; width: 30%; aspect-ratio: auto; }
  .ds-card[data-orientation="horizontal"] .ds-card__body  { flex: 1; }

  .ds-card__media {
    aspect-ratio: var(--component-card-media-aspect-ratio);
    background:   var(--component-card-media-bg);
    overflow:     hidden;
    flex-shrink:  0;
  }
  .ds-card__media img,
  .ds-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

  .ds-card__header {
    display:        flex;
    flex-direction: column;
    gap:            var(--semantic-spacing-stack-xs);
    padding-block:  var(--component-card-header-padding-block);
    padding-inline: var(--component-card-header-padding-inline);
    border-bottom:  var(--component-card-border-width) var(--component-card-border-style) var(--component-card-header-border-color);
  }
  .ds-card__header:last-child { border-bottom: none; }

  .ds-card__title    { font-size: var(--component-card-header-title-font-size); font-weight: var(--component-card-header-title-font-weight); color: var(--component-card-header-title-color); line-height: var(--semantic-line-height-heading); }
  .ds-card__subtitle { font-size: var(--component-card-header-subtitle-font-size); color: var(--component-card-header-subtitle-color); line-height: var(--semantic-line-height-ui); }

  .ds-card__body {
    display:        flex;
    flex-direction: column;
    gap:            var(--component-card-body-gap);
    padding-block:  var(--component-card-body-padding-block);
    padding-inline: var(--component-card-body-padding-inline);
    flex:           1;
    font-size:      var(--component-card-body-font-size);
    color:          var(--component-card-body-color);
    line-height:    var(--semantic-line-height-body);
  }

  .ds-card__footer {
    display:         flex;
    align-items:     center;
    gap:             var(--component-card-footer-gap);
    padding-block:   var(--component-card-footer-padding-block);
    padding-inline:  var(--component-card-footer-padding-inline);
    background:      var(--component-card-footer-bg);
    border-top:      var(--component-card-border-width) var(--component-card-border-style) var(--component-card-footer-border-color);
    justify-content: flex-end;
  }
  .ds-card__footer[data-align="start"]        { justify-content: flex-start; }
  .ds-card__footer[data-align="center"]       { justify-content: center; }
  .ds-card__footer[data-align="space-between"]{ justify-content: space-between; }
}

/* ============================================================================
   LAYER: components — Badge (Phase 7 — new component)
   ============================================================================ */
@layer components {

  /* ── Badge variables ──────────────────────────────────────────────────── */
  :root {
    --component-badge-border-width:   1px;
    --component-badge-border-style:   solid;
    --component-badge-border-radius:  var(--primitive-radius-full);
    --component-badge-font-weight:    var(--semantic-font-weight-label);
    --component-badge-letter-spacing: var(--semantic-letter-spacing-caps);
    --component-badge-line-height:    1;

    /* size: sm */
    --component-badge-sm-font-size:      var(--semantic-font-size-ui-xs);
    --component-badge-sm-padding-block:  var(--semantic-spacing-component-2xs);
    --component-badge-sm-padding-inline: var(--semantic-spacing-component-xs);
    --component-badge-sm-min-height:     var(--primitive-spacing-5);
    --component-badge-sm-dot-size:       6px;

    /* size: md */
    --component-badge-md-font-size:      var(--semantic-font-size-ui-sm);
    --component-badge-md-padding-block:  var(--semantic-spacing-component-2xs);
    --component-badge-md-padding-inline: var(--semantic-spacing-component-sm);
    --component-badge-md-min-height:     var(--primitive-spacing-6);
    --component-badge-md-dot-size:       8px;

    /* variant: success */
    --component-badge-success-bg:              var(--semantic-color-feedback-success-default);
    --component-badge-success-color:           var(--semantic-color-brand-contrast);
    --component-badge-success-border:          transparent;
    --component-badge-success-subtle-bg:       var(--semantic-color-feedback-success-subtle);
    --component-badge-success-subtle-color:    var(--semantic-color-feedback-success-text);
    --component-badge-success-subtle-border:   var(--semantic-color-feedback-success-default);

    /* variant: warning */
    --component-badge-warning-bg:              var(--semantic-color-feedback-warning-default);
    --component-badge-warning-color:           var(--semantic-color-feedback-warning-text);
    --component-badge-warning-border:          transparent;
    --component-badge-warning-subtle-bg:       var(--semantic-color-feedback-warning-subtle);
    --component-badge-warning-subtle-color:    var(--semantic-color-feedback-warning-text);
    --component-badge-warning-subtle-border:   var(--semantic-color-feedback-warning-default);

    /* variant: danger */
    --component-badge-danger-bg:               var(--semantic-color-feedback-danger-default);
    --component-badge-danger-color:            var(--semantic-color-feedback-danger-contrast);
    --component-badge-danger-border:           transparent;
    --component-badge-danger-subtle-bg:        var(--semantic-color-feedback-danger-subtle);
    --component-badge-danger-subtle-color:     var(--semantic-color-feedback-danger-text);
    --component-badge-danger-subtle-border:    var(--semantic-color-feedback-danger-default);

    /* variant: info */
    --component-badge-info-bg:                 var(--semantic-color-interactive-default);
    --component-badge-info-color:              var(--semantic-color-brand-contrast);
    --component-badge-info-border:             transparent;
    --component-badge-info-subtle-bg:          var(--semantic-color-brand-subtle);
    --component-badge-info-subtle-color:       var(--semantic-color-text-brand);
    --component-badge-info-subtle-border:      var(--semantic-color-interactive-default);

    /* variant: neutral */
    --component-badge-neutral-bg:              var(--semantic-color-surface-overlay);
    --component-badge-neutral-color:           var(--semantic-color-text-subtle);
    --component-badge-neutral-border:          var(--semantic-color-border-default);
    --component-badge-neutral-subtle-bg:       var(--semantic-color-surface-raised);
    --component-badge-neutral-subtle-color:    var(--semantic-color-text-default);
    --component-badge-neutral-subtle-border:   var(--semantic-color-border-default);
  }

  /* ── Badge structural styles ──────────────────────────────────────────── */
  .ds-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding-block:   var(--component-badge-md-padding-block);
    padding-inline:  var(--component-badge-md-padding-inline);
    min-height:      var(--component-badge-md-min-height);
    font-size:       var(--component-badge-md-font-size);
    font-weight:     var(--component-badge-font-weight);
    line-height:     var(--component-badge-line-height);
    letter-spacing:  var(--component-badge-letter-spacing);
    white-space:     nowrap;
    text-transform:  uppercase;
    border-width:    var(--component-badge-border-width);
    border-style:    var(--component-badge-border-style);
    border-radius:   var(--component-badge-border-radius);
    vertical-align:  middle;
    /* default: neutral */
    background:      var(--component-badge-neutral-bg);
    color:           var(--component-badge-neutral-color);
    border-color:    var(--component-badge-neutral-border);
  }

  /* Sizes */
  .ds-badge--sm { padding-block: var(--component-badge-sm-padding-block); padding-inline: var(--component-badge-sm-padding-inline); min-height: var(--component-badge-sm-min-height); font-size: var(--component-badge-sm-font-size); }
  .ds-badge--md { padding-block: var(--component-badge-md-padding-block); padding-inline: var(--component-badge-md-padding-inline); min-height: var(--component-badge-md-min-height); font-size: var(--component-badge-md-font-size); }

  /* Variants — filled */
  .ds-badge--success { background: var(--component-badge-success-bg); color: var(--component-badge-success-color); border-color: var(--component-badge-success-border); }
  .ds-badge--warning { background: var(--component-badge-warning-bg); color: var(--component-badge-warning-color); border-color: var(--component-badge-warning-border); }
  .ds-badge--danger  { background: var(--component-badge-danger-bg);  color: var(--component-badge-danger-color);  border-color: var(--component-badge-danger-border); }
  .ds-badge--info    { background: var(--component-badge-info-bg);    color: var(--component-badge-info-color);    border-color: var(--component-badge-info-border); }
  .ds-badge--neutral { background: var(--component-badge-neutral-bg); color: var(--component-badge-neutral-color); border-color: var(--component-badge-neutral-border); }

  /* Variants — subtle */
  .ds-badge--success.ds-badge--subtle { background: var(--component-badge-success-subtle-bg); color: var(--component-badge-success-subtle-color); border-color: var(--component-badge-success-subtle-border); }
  .ds-badge--warning.ds-badge--subtle { background: var(--component-badge-warning-subtle-bg); color: var(--component-badge-warning-subtle-color); border-color: var(--component-badge-warning-subtle-border); }
  .ds-badge--danger.ds-badge--subtle  { background: var(--component-badge-danger-subtle-bg);  color: var(--component-badge-danger-subtle-color);  border-color: var(--component-badge-danger-subtle-border); }
  .ds-badge--info.ds-badge--subtle    { background: var(--component-badge-info-subtle-bg);    color: var(--component-badge-info-subtle-color);    border-color: var(--component-badge-info-subtle-border); }
  .ds-badge--neutral.ds-badge--subtle { background: var(--component-badge-neutral-subtle-bg); color: var(--component-badge-neutral-subtle-color); border-color: var(--component-badge-neutral-subtle-border); }

  /* Dot variant */
  .ds-badge--dot {
    padding:       0;
    width:         var(--component-badge-md-dot-size);
    height:        var(--component-badge-md-dot-size);
    min-height:    unset;
    border-radius: 50%;
    overflow:      hidden;
  }
  .ds-badge--dot.ds-badge--sm { width: var(--component-badge-sm-dot-size); height: var(--component-badge-sm-dot-size); }
  .ds-badge--dot .ds-badge__label {
    position:   absolute;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip:        rect(0,0,0,0);
    white-space: nowrap;
  }
}

/* ============================================================================
   LAYER: themes — Dark theme
   ============================================================================ */
@layer themes {

  [data-theme="dark"] {
    color-scheme: dark;

    /* Neutral scale — remapped to dark palette */
    --primitive-color-neutral-0:    #0d1117;
    --primitive-color-neutral-50:   #161b22;
    --primitive-color-neutral-100:  #21262d;
    --primitive-color-neutral-200:  #30363d;
    --primitive-color-neutral-300:  #484f58;
    --primitive-color-neutral-400:  #6e7681;
    --primitive-color-neutral-500:  #8b949e;
    --primitive-color-neutral-600:  #b1bac4;
    --primitive-color-neutral-700:  #c9d1d9;
    --primitive-color-neutral-800:  #e6edf3;
    --primitive-color-neutral-900:  #f0f6fc;
    --primitive-color-neutral-1000: #ffffff;

    /* Blue — lighter for dark bg contrast */
    --primitive-color-blue-50:  #0d2137;
    --primitive-color-blue-100: #0f2f50;
    --primitive-color-blue-200: #1254a0;
    --primitive-color-blue-300: #1a6fc4;
    --primitive-color-blue-400: #4dabf7;
    --primitive-color-blue-500: #58beff;
    --primitive-color-blue-600: #79c8ff;
    --primitive-color-blue-700: #a8d8ff;
    --primitive-color-blue-800: #cce7ff;
    --primitive-color-blue-900: #e8f4ff;

    /* Green — lighter for dark bg */
    --primitive-color-green-50:  #0a2a12;
    --primitive-color-green-100: #0d3a19;
    --primitive-color-green-200: #135c28;
    --primitive-color-green-300: #1e7c38;
    --primitive-color-green-400: #2ea043;
    --primitive-color-green-500: #3fb950;
    --primitive-color-green-600: #56d364;
    --primitive-color-green-700: #7ee787;
    --primitive-color-green-800: #acf0b0;
    --primitive-color-green-900: #d2fbd6;

    /* Yellow — warmer for dark surfaces */
    --primitive-color-yellow-50:  #2d2000;
    --primitive-color-yellow-100: #3d2d00;
    --primitive-color-yellow-200: #624800;
    --primitive-color-yellow-300: #8a6500;
    --primitive-color-yellow-400: #b58200;
    --primitive-color-yellow-500: #d4a017;
    --primitive-color-yellow-600: #e8b84b;
    --primitive-color-yellow-700: #f0cc71;
    --primitive-color-yellow-800: #f5de97;
    --primitive-color-yellow-900: #faecbd;

    /* Red — brighter for dark bg */
    --primitive-color-red-50:  #3d0c0c;
    --primitive-color-red-100: #581313;
    --primitive-color-red-200: #822020;
    --primitive-color-red-300: #a83434;
    --primitive-color-red-400: #d44d4d;
    --primitive-color-red-500: #e96a6a;
    --primitive-color-red-600: #f47f7f;
    --primitive-color-red-700: #f89999;
    --primitive-color-red-800: #fcb8b8;
    --primitive-color-red-900: #fed4d4;
  }
}