/* ============================================================
   d'dark closet — camada pronta pra páginas HTML
   Um único link aplica o padrão inteiro da marca:
     <link rel="stylesheet" href="design-system/ddark.css">
   Tokens (cores, fontes, espaçamentos) vêm de styles.css.
   Componentes espelham os de components/*.jsx, em classes dd-*.
   ============================================================ */
@import url('styles.css');

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:var(--text-brand);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-soft)}
a:hover{color:var(--action-primary-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--sand-100);color:var(--terracotta-700)}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--font-serif);color:var(--text-primary);line-height:var(--lh-snug)}
h1{font-weight:var(--fw-light);font-size:clamp(34px,6vw,var(--fs-h1))}
h2{font-weight:var(--fw-regular);font-size:clamp(26px,4.4vw,var(--fs-h2))}
h3{font-weight:var(--fw-regular);font-size:var(--fs-h3)}
p{margin:0}

.dd-display{font:var(--fw-light) clamp(40px,8vw,var(--fs-display))/var(--lh-tight) var(--font-serif);letter-spacing:var(--ls-tagline)}
/* Tagline da marca: minúscula, serifada leve, termina com ponto. */
.dd-tagline{font:var(--fw-light) clamp(30px,5.5vw,var(--fs-h1))/var(--lh-snug) var(--font-serif);letter-spacing:var(--ls-tagline);text-transform:lowercase}
.dd-lead{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-secondary)}
.dd-small{font-size:var(--fs-small)}
.dd-caption{font-size:var(--fs-caption);color:var(--text-muted)}
/* Rótulo largo (estilo CLOSET): Lexend Exa, caixa alta, espaçado. */
.dd-label{font:var(--fw-medium) var(--fs-label)/1 var(--font-wide);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary)}
/* Ênfase pela cor, nunca pelo peso. */
.dd-em{color:var(--text-brand);font-style:normal}
.dd-muted{color:var(--text-muted)}

/* ---------- Layout ---------- */
.dd-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:600px){.dd-container{padding-inline:var(--space-4)}}
.dd-section{padding-block:var(--space-9)}
@media (max-width:600px){.dd-section{padding-block:var(--space-8)}}
.dd-center{text-align:center}
.dd-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.dd-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.dd-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.dd-split{display:grid;grid-template-columns:1fr 1fr;min-height:70vh}
@media (max-width:800px){.dd-split{grid-template-columns:1fr;min-height:0}}

/* Superfícies (pares aprovados de fundo/texto) */
.dd-on-page{background:var(--surface-page);color:var(--text-primary)}
.dd-on-raised{background:var(--surface-raised);color:var(--text-primary)}
.dd-on-sand{background:var(--surface-sand);color:var(--text-brand)}
.dd-on-brand{background:var(--surface-brand);color:var(--text-on-brand)}
.dd-on-mauve{background:var(--surface-mauve);color:var(--text-on-mauve)}
.dd-on-ink{background:var(--surface-inverse);color:var(--sand-100)}
.dd-on-brand :is(h1,h2,h3,h4),.dd-on-mauve :is(h1,h2,h3,h4),.dd-on-ink :is(h1,h2,h3,h4),.dd-on-sand :is(h1,h2,h3,h4){color:inherit}
.dd-on-brand .dd-label{color:var(--sand-100)}
.dd-on-mauve .dd-label,.dd-on-ink .dd-label{color:var(--linen-50)}

/* ---------- Marca: logo recolorível (máscara) ---------- */
.dd-logo{display:inline-block;width:200px;background:var(--text-brand);
  -webkit-mask:url('assets/logo/ddark-closet-wordmark.png') center/contain no-repeat;
          mask:url('assets/logo/ddark-closet-wordmark.png') center/contain no-repeat;
  aspect-ratio:2412/572}
.dd-logo--wordmark{aspect-ratio:2412/420;
  -webkit-mask-image:url('assets/logo/ddark-wordmark.png');mask-image:url('assets/logo/ddark-wordmark.png')}
/* O PNG do monograma traz uma lasca da letra seguinte na borda direita: recorta em 548px dos 560. */
.dd-logo--monogram{width:64px;aspect-ratio:548/420;
  -webkit-mask-image:url('assets/logo/ddark-monogram.png');mask-image:url('assets/logo/ddark-monogram.png');
  -webkit-mask-size:auto 100%;mask-size:auto 100%;-webkit-mask-position:left center;mask-position:left center}
.dd-on-brand .dd-logo,.dd-on-mauve .dd-logo{background:var(--sand-200)}
.dd-on-ink .dd-logo{background:var(--sand-100)}
.dd-on-sand .dd-logo{background:var(--mauve-500)}
.dd-logo--ghost{opacity:.15}

/* ---------- Marca: padrões (sempre tom sobre tom) ---------- */
.dd-pattern{position:relative;background-position:center}
.dd-pattern--zebra-sand{background:var(--stone-300) url('assets/patterns/zebra-sand.png') center/cover no-repeat}
.dd-pattern--zebra-linen{background:var(--mauve-400) url('assets/patterns/zebra-linen.png') center/cover no-repeat}
.dd-pattern--zebra-terracotta{background:var(--terracotta-700) url('assets/patterns/zebra-terracotta.png') center/cover no-repeat}
.dd-pattern--zebra-mauve{background:var(--linen-100) url('assets/patterns/zebra-mauve.png') center/cover no-repeat}
.dd-pattern--monogram-sand{background:var(--terracotta-500) url('assets/patterns/monogram-sand.png') 0 0/180px repeat}
.dd-pattern--monogram-linen{background:var(--mauve-500) url('assets/patterns/monogram-linen.png') 0 0/180px repeat}
.dd-pattern--monogram-terracotta{background:var(--linen-100) url('assets/patterns/monogram-terracotta.png') 0 0/180px repeat}
.dd-pattern--monogram-mauve{background:var(--terracotta-600) url('assets/patterns/monogram-mauve.png') 0 0/180px repeat}

/* Ornamento ◆ (o apóstrofo do logo) */
.dd-diamond{display:inline-block;width:8px;height:8px;background:currentColor;transform:rotate(45deg);vertical-align:middle}
.dd-divider{display:flex;align-items:center;gap:var(--space-4);color:var(--terracotta-300)}
.dd-divider::before,.dd-divider::after{content:"";flex:1;height:1px;background:var(--border-subtle)}

/* ---------- Ícone (Lucide, linha fina, usar com moderação) ---------- */
/* <span class="dd-icon" style="--icon:url('https://unpkg.com/lucide-static@0.460.0/icons/heart.svg')"></span> */
.dd-icon{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.dd-icon--16{width:16px;height:16px}.dd-icon--24{width:24px;height:24px}

/* ---------- Botões (pílula, Lexend Exa caixa alta) ---------- */
.dd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:fit-content;
  height:44px;padding:0 24px;border:1px solid var(--action-primary);border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--text-on-brand);
  font:var(--fw-medium) 11px/1 var(--font-wide);letter-spacing:var(--ls-label);text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft)}
.dd-btn:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--text-on-brand)}
.dd-btn:active{transform:scale(.98)}
.dd-btn:disabled,.dd-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.dd-btn--secondary{background:var(--action-secondary);border-color:var(--action-secondary);color:var(--linen-50)}
.dd-btn--secondary:hover{background:var(--action-secondary-hover);border-color:var(--action-secondary-hover);color:var(--linen-50)}
.dd-btn--outline{background:transparent;color:var(--text-brand);border-color:var(--terracotta-500)}
.dd-btn--outline:hover{background:rgba(140,58,32,.08);color:var(--text-brand);border-color:var(--terracotta-500)}
.dd-btn--ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.dd-btn--ghost:hover{background:rgba(46,39,36,.06);color:var(--text-primary);border-color:transparent}
/* Pra usar sobre fundo terracota */
.dd-btn--sand{background:var(--sand-100);color:var(--terracotta-500);border-color:var(--sand-100)}
.dd-btn--sand:hover{background:var(--sand-200);color:var(--terracotta-500);border-color:var(--sand-200)}
.dd-btn--sm{height:34px;padding:0 16px;font-size:10px}
.dd-btn--lg{height:54px;padding:0 32px;font-size:12px}
.dd-btn--full{width:100%}

.dd-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--text-primary);cursor:pointer;transition:background var(--dur-fast) var(--ease-soft)}
.dd-icon-btn:hover{background:rgba(46,39,36,.07)}
.dd-icon-btn--outline{color:var(--text-brand);border-color:var(--border-strong)}
.dd-icon-btn--outline:hover{background:rgba(140,58,32,.07)}
.dd-icon-btn--primary{background:var(--action-primary);color:var(--text-on-brand);border-color:var(--action-primary)}
.dd-icon-btn--primary:hover{background:var(--action-primary-hover)}

/* ---------- Tag e Badge ---------- */
.dd-tag{display:inline-flex;width:fit-content;align-items:center;gap:6px;height:24px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--sand-100);color:var(--terracotta-500);
  font:var(--fw-medium) 10px/1 var(--font-wide);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.dd-tag--terracotta{background:var(--terracotta-500);color:var(--sand-200)}
.dd-tag--mauve{background:var(--mauve-400);color:var(--linen-50)}
.dd-tag--ink{background:var(--ink-900);color:var(--sand-100)}
.dd-tag--outline{background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}

.dd-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--terracotta-500);color:var(--sand-200);font:var(--fw-bold) 10px/1 var(--font-sans)}
.dd-badge--ink{background:var(--ink-900)}
.dd-badge--dot{min-width:0;width:8px;height:8px;padding:0;border-radius:50%}

/* ---------- Card (papel quadrado, sem borda) ---------- */
.dd-card{background:var(--surface-raised);color:var(--text-primary);padding:var(--space-5);border-radius:var(--radius-none);box-shadow:var(--shadow-paper)}
.dd-card--flat{box-shadow:none;border:1px solid var(--border-subtle)}
.dd-card--linen{background:var(--linen-50)}
.dd-card--sand{background:var(--surface-sand)}
.dd-card--terracotta{background:var(--surface-brand);color:var(--text-on-brand)}
.dd-card--mauve{background:var(--surface-mauve);color:var(--text-on-mauve)}
.dd-card--terracotta :is(h1,h2,h3,h4),.dd-card--mauve :is(h1,h2,h3,h4){color:inherit}
.dd-card--lift{transition:box-shadow var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft)}
.dd-card--lift:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}

/* ---------- Formulários ---------- */
.dd-field{display:flex;flex-direction:column;gap:var(--space-2)}
.dd-field > span:first-child,.dd-field-label{font:var(--fw-medium) 10px/1 var(--font-wide);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.dd-input,.dd-select{width:100%;height:46px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface-raised);color:var(--text-primary);font:var(--fw-regular) 15px/1 var(--font-sans);outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
textarea.dd-input{height:auto;min-height:120px;padding:12px 14px;line-height:var(--lh-body);resize:vertical}
.dd-input:focus,.dd-select:focus{border-color:var(--terracotta-500);box-shadow:0 0 0 3px rgba(181,100,74,.18)}
.dd-input:disabled,.dd-select:disabled{background:var(--linen-100);opacity:.6}
.dd-input[aria-invalid="true"]{border-color:var(--danger-500)}
.dd-hint{font:var(--fw-regular) 12px/1.3 var(--font-sans);color:var(--text-muted)}
.dd-hint--error{color:var(--danger-500)}
.dd-select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%236B605D' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

.dd-check,.dd-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:var(--fw-regular) 15px/1.2 var(--font-sans);color:var(--text-primary)}
.dd-check input,.dd-radio input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:18px;height:18px;
  border:1.5px solid var(--border-strong);background:var(--surface-raised);display:grid;place-items:center;cursor:pointer;
  transition:all var(--dur-fast)}
.dd-check input{border-radius:var(--radius-sm)}
.dd-check input:checked{background:var(--terracotta-500);border-color:var(--terracotta-500)}
.dd-check input:checked::after{content:"";width:5px;height:9px;border-right:1.5px solid var(--sand-200);border-bottom:1.5px solid var(--sand-200);transform:translateY(-1px) rotate(45deg)}
.dd-radio input{border-radius:50%}
.dd-radio input:checked{border-color:var(--terracotta-500)}
.dd-radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--terracotta-500)}

.dd-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:var(--fw-regular) 15px/1.2 var(--font-sans);color:var(--text-primary)}
.dd-switch input{appearance:none;-webkit-appearance:none;margin:0;flex:none;position:relative;width:40px;height:22px;border-radius:var(--radius-pill);
  background:var(--stone-300);cursor:pointer;transition:background var(--dur-base) var(--ease-soft)}
.dd-switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--linen-50);transition:left var(--dur-base) var(--ease-soft)}
.dd-switch input:checked{background:var(--terracotta-500)}
.dd-switch input:checked::after{left:21px}

/* ---------- Abas ---------- */
.dd-tabs{display:flex;gap:28px;border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.dd-tab{background:none;border:0;padding:0 0 12px;margin-bottom:-1px;border-bottom:1.5px solid transparent;color:var(--text-secondary);
  font:var(--fw-medium) 11px/1 var(--font-wide);letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:color var(--dur-fast)}
.dd-tab:hover{color:var(--text-brand)}
.dd-tab[aria-selected="true"],.dd-tab.is-active{color:var(--text-brand);border-bottom-color:var(--terracotta-500)}

/* ---------- Diálogo, Toast, Tooltip ---------- */
.dd-scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:var(--space-5);z-index:1000}
.dd-dialog{position:relative;width:440px;max-width:100%;background:var(--linen-50);box-shadow:var(--shadow-overlay);padding:var(--space-6);border:0}
.dd-dialog::backdrop{background:var(--scrim)}
.dd-dialog h3{margin:0 0 12px;font:var(--fw-light) 26px/1.2 var(--font-serif);color:var(--text-brand)}
.dd-dialog p{font:var(--fw-regular) 15px/1.55 var(--font-sans);color:var(--text-secondary)}
.dd-dialog__actions{display:flex;gap:12px;justify-content:flex-end;margin-top:var(--space-5)}

.dd-toast{display:flex;align-items:center;gap:var(--space-4);min-width:280px;max-width:420px;padding:14px 18px;border-radius:var(--radius-md);
  background:var(--ink-900);color:var(--linen-50);box-shadow:var(--shadow-lift);font:var(--fw-regular) 14px/1.4 var(--font-sans)}
.dd-toast--brand{background:var(--terracotta-500)}
.dd-toast--success{background:var(--success-500)}
.dd-toast--danger{background:var(--danger-500)}

.dd-tooltip{position:relative;display:inline-flex}
.dd-tooltip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;
  padding:7px 10px;background:var(--ink-900);color:var(--sand-100);border-radius:var(--radius-sm);font:var(--fw-regular) 12px/1 var(--font-sans);
  pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-soft);z-index:10}
.dd-tooltip:hover::after,.dd-tooltip:focus-within::after{opacity:1}

/* ---------- Movimento suave ---------- */
.dd-fade-up{animation:dd-fade-up var(--dur-slow) var(--ease-soft) both}
@keyframes dd-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}}