/* ── Shoelace → Desapegos design token bridge ────────────────────────────── */
/* Maps --sl-* variables to the Desapegos warm peachy palette.               */
/* Load this BEFORE desapegos_ds.css so Shoelace components inherit tokens.  */

:root {

  /* ── Primary: warm peach / coral ─────────────────────────────────────── */
  --sl-color-primary-50:  #fff1ea;
  --sl-color-primary-100: #ffe0d0;
  --sl-color-primary-200: #ffc9b0;
  --sl-color-primary-300: #ffb5a7;
  --sl-color-primary-400: #fb9a85;
  --sl-color-primary-500: #ef7e66;
  --sl-color-primary-600: #d46148;
  --sl-color-primary-700: #a84a35;
  --sl-color-primary-800: #7a3325;
  --sl-color-primary-900: #531e14;
  --sl-color-primary-950: #2d0a07;

  /* ── Neutral: cream → cocoa ───────────────────────────────────────────── */
  --sl-color-neutral-0:    #ffffff;
  --sl-color-neutral-50:   #fffaf5;
  --sl-color-neutral-100:  #fff4ec;
  --sl-color-neutral-200:  #fde9dc;
  --sl-color-neutral-300:  #f4dac7;
  --sl-color-neutral-400:  #c9ae9e;
  --sl-color-neutral-500:  #9c7a6a;
  --sl-color-neutral-600:  #6b4a3e;
  --sl-color-neutral-700:  #5b3826;
  --sl-color-neutral-800:  #3d2418;
  --sl-color-neutral-900:  #2a150f;
  --sl-color-neutral-950:  #1a0c08;
  --sl-color-neutral-1000: #000000;

  /* ── Success: sage ────────────────────────────────────────────────────── */
  --sl-color-success-50:  #f0f7ed;
  --sl-color-success-100: #e3ebde;
  --sl-color-success-200: #c8d9bf;
  --sl-color-success-300: #b7cbab;
  --sl-color-success-400: #96b388;
  --sl-color-success-500: #7a9968;
  --sl-color-success-600: #618052;
  --sl-color-success-700: #4f6b41;
  --sl-color-success-800: #3b5030;
  --sl-color-success-900: #283722;
  --sl-color-success-950: #162012;

  /* ── Warning: butter ──────────────────────────────────────────────────── */
  --sl-color-warning-50:  #fffaeb;
  --sl-color-warning-100: #fdf0cc;
  --sl-color-warning-200: #fbe199;
  --sl-color-warning-300: #f5d68a;
  --sl-color-warning-400: #edc05c;
  --sl-color-warning-500: #d9a635;
  --sl-color-warning-600: #b8882a;
  --sl-color-warning-700: #8f6a1a;
  --sl-color-warning-800: #664d10;
  --sl-color-warning-900: #42300a;
  --sl-color-warning-950: #221804;

  /* ── Danger: clay ────────────────────────────────────────────────────── */
  --sl-color-danger-50:  #fef4f0;
  --sl-color-danger-100: #fbdcd0;
  --sl-color-danger-200: #f5b8a0;
  --sl-color-danger-300: #e89a85;
  --sl-color-danger-400: #d97460;
  --sl-color-danger-500: #c45a3f;
  --sl-color-danger-600: #a44532;
  --sl-color-danger-700: #843622;
  --sl-color-danger-800: #602614;
  --sl-color-danger-900: #3d170b;
  --sl-color-danger-950: #1f0b05;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --sl-font-sans:  'Nunito', system-ui, sans-serif;
  --sl-font-serif: 'Fraunces', 'Georgia', serif;
  --sl-font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --sl-font-size-2x-small: 10px;
  --sl-font-size-x-small:  12px;
  --sl-font-size-small:    14px;
  --sl-font-size-medium:   16px;
  --sl-font-size-large:    18px;
  --sl-font-size-x-large:  20px;
  --sl-font-size-2x-large: 24px;
  --sl-font-size-3x-large: 30px;
  --sl-font-size-4x-large: 36px;

  --sl-font-weight-light:    300;
  --sl-font-weight-normal:   400;
  --sl-font-weight-semibold: 600;
  --sl-font-weight-bold:     700;

  --sl-letter-spacing-denser:  -0.03em;
  --sl-letter-spacing-dense:   -0.015em;
  --sl-letter-spacing-normal:  0em;
  --sl-letter-spacing-loose:   0.075em;
  --sl-letter-spacing-looser:  0.1em;

  --sl-line-height-denser:  1;
  --sl-line-height-dense:   1.2;
  --sl-line-height-normal:  1.55;
  --sl-line-height-loose:   1.75;
  --sl-line-height-looser:  2;

  /* ── Border radius ───────────────────────────────────────────────────── */
  --sl-border-radius-small:   6px;
  --sl-border-radius-medium:  8px;
  --sl-border-radius-large:   12px;
  --sl-border-radius-x-large: 16px;
  --sl-border-radius-circle:  50%;
  --sl-border-radius-pill:    999px;

  /* ── Shadows (warm cocoa-tinted) ─────────────────────────────────────── */
  --sl-shadow-x-small: 0 1px 0 rgba(107, 74, 62, 0.06);
  --sl-shadow-small:   0 1px 2px rgba(107, 74, 62, 0.08), 0 1px 3px rgba(107, 74, 62, 0.05);
  --sl-shadow-medium:  0 2px 6px rgba(107, 74, 62, 0.08), 0 8px 20px rgba(107, 74, 62, 0.06);
  --sl-shadow-large:   0 6px 16px rgba(107, 74, 62, 0.10), 0 20px 40px rgba(107, 74, 62, 0.08);
  --sl-shadow-x-large: 0 8px 24px rgba(107, 74, 62, 0.12), 0 24px 48px rgba(107, 74, 62, 0.10);

  /* ── Focus ring ──────────────────────────────────────────────────────── */
  --sl-focus-ring-color:  rgba(255, 181, 167, 0.65);
  --sl-focus-ring-style:  solid;
  --sl-focus-ring-width:  3px;
  --sl-focus-ring-offset: 1px;
  --sl-focus-ring:        var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --sl-transition-x-fast: 80ms;
  --sl-transition-fast:   140ms;
  --sl-transition-medium: 220ms;
  --sl-transition-slow:   380ms;
  --sl-transition-x-slow: 600ms;

  --sl-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --sl-ease-out:       cubic-bezier(0.22, 0.9, 0.36, 1);
  --sl-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --sl-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Overlay & panel ─────────────────────────────────────────────────── */
  --sl-overlay-background-color: rgba(61, 36, 24, 0.5);
  --sl-panel-background-color:   #ffffff;
  --sl-panel-border-color:       rgba(107, 74, 62, 0.12);
  --sl-panel-border-width:       1px;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --sl-z-index-drawer:   700;
  --sl-z-index-dialog:   800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast:    950;
  --sl-z-index-tooltip:  1000;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sl-spacing-3x-small: 2px;
  --sl-spacing-2x-small: 4px;
  --sl-spacing-x-small:  8px;
  --sl-spacing-small:    12px;
  --sl-spacing-medium:   16px;
  --sl-spacing-large:    20px;
  --sl-spacing-x-large:  24px;
  --sl-spacing-2x-large: 32px;
  --sl-spacing-3x-large: 40px;
  --sl-spacing-4x-large: 48px;

  /* ── Input ───────────────────────────────────────────────────────────── */
  --sl-input-height-small:  30px;
  --sl-input-height-medium: 40px;
  --sl-input-height-large:  50px;

  --sl-input-background-color:          #ffffff;
  --sl-input-background-color-hover:    #ffffff;
  --sl-input-background-color-focus:    #ffffff;
  --sl-input-background-color-disabled: #fff4ec;

  --sl-input-border-color:          #f4dac7;
  --sl-input-border-color-hover:    #fb9a85;
  --sl-input-border-color-focus:    #fb9a85;
  --sl-input-border-color-disabled: #f4dac7;
  --sl-input-border-width:          1px;

  --sl-input-border-radius-small:  6px;
  --sl-input-border-radius-medium: 8px;
  --sl-input-border-radius-large:  12px;

  --sl-input-font-family: 'Nunito', system-ui, sans-serif;
  --sl-input-font-weight: 500;
  --sl-input-font-size-small:  12px;
  --sl-input-font-size-medium: 14px;
  --sl-input-font-size-large:  16px;

  --sl-input-color:              #3d2418;
  --sl-input-color-hover:        #3d2418;
  --sl-input-color-focus:        #3d2418;
  --sl-input-color-disabled:     #9c7a6a;
  --sl-input-placeholder-color:  #9c7a6a;

  --sl-input-icon-color:         #9c7a6a;
  --sl-input-icon-color-hover:   #3d2418;
  --sl-input-icon-color-focus:   #ef7e66;

  --sl-input-filled-background-color:       #fff4ec;
  --sl-input-filled-background-color-hover: #fde9dc;
  --sl-input-filled-background-color-focus: #fff4ec;

  --sl-input-focus-ring-color: rgba(255, 181, 167, 0.65);
  --sl-input-focus-ring-offset: 0;

  /* ── Button ──────────────────────────────────────────────────────────── */
  --sl-button-font-family: 'Nunito', system-ui, sans-serif;
  --sl-button-font-size-small:  12px;
  --sl-button-font-size-medium: 14px;
  --sl-button-font-size-large:  16px;
  --sl-button-font-weight: 700;

  /* ── Tooltip ─────────────────────────────────────────────────────────── */
  --sl-tooltip-border-radius:       6px;
  --sl-tooltip-background-color:    #3d2418;
  --sl-tooltip-color:               #fff4ec;
  --sl-tooltip-font-family:         'Nunito', system-ui, sans-serif;
  --sl-tooltip-font-weight:         600;
  --sl-tooltip-font-size:           12px;
  --sl-tooltip-line-height:         1.4;
  --sl-tooltip-padding:             4px 10px;
  --sl-tooltip-arrow-size:          6px;

}

/* ── Rose theme override ─────────────────────────────────────────────────── */
/* Activate with <html data-theme="rose"> or <body data-theme="rose">        */

[data-theme="rose"] {

  /* Primary: dusty rose / cool pink */
  --sl-color-primary-50:  #fff1f2;
  --sl-color-primary-100: #ffe4e6;
  --sl-color-primary-200: #fecdd3;
  --sl-color-primary-300: #fda4af;
  --sl-color-primary-400: #fb7185;
  --sl-color-primary-500: #f43f5e;
  --sl-color-primary-600: #e11d48;
  --sl-color-primary-700: #be123c;
  --sl-color-primary-800: #9f1239;
  --sl-color-primary-900: #881337;
  --sl-color-primary-950: #4c0519;

  /* Desapegos semantic primary → rose */
  --primary:       #fda4af;
  --primary-ink:   #be123c;
  --primary-hover: #fb7185;
  --primary-press: #f43f5e;

  /* Input accent */
  --sl-input-border-color-hover: #fb7185;
  --sl-input-border-color-focus: #fb7185;
  --sl-input-focus-ring-color:   rgba(253, 164, 175, 0.65);
  --sl-focus-ring-color:         rgba(253, 164, 175, 0.65);
}