/* ==========================================================================
   Ly — design system v2 (Leonardo Yukio)
   Fonte: Marca/Ly v2 — Protótipos.pdf (destaque azul, out/2026)
   Reutilizável: copie este arquivo para qualquer projeto e use as classes
   .ly-btn, .ly-pill, .ly-card, .ly-input, .ly-mark e os tokens --ly-*.
   Tema: segue o sistema; force com <html data-theme="light|dark">.
   Fontes (no <head>):
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Cormorant+Garamond:ital,wght@1,600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* Cores — tema claro */
  --ly-bg: #f2f1ee;
  --ly-surface: #ffffff;
  --ly-title: #1a1614;
  --ly-text: #4a4541;
  --ly-muted: #6e6862;
  --ly-border: #e4e1dc;
  --ly-accent: #2447c6;
  --ly-accent-hover: #1c389e;
  --ly-accent-soft: #e4e9fa;
  --ly-on-accent: #ffffff;
  --ly-hover: #f7f6f3;
  --ly-contrast: #1a1614;     /* bloco de destaque (máx. 1 por página) */
  --ly-on-contrast: #f5f2ee;

  /* Status */
  --ly-draft-bg: #ecebe8;   --ly-draft-fg: #4a4541;
  --ly-new-bg: #e4e9fa;     --ly-new-fg: #2447c6;
  --ly-ok-bg: #e2efe5;      --ly-ok-fg: #2f7a4b;
  --ly-warn-bg: #f3ead6;    --ly-warn-fg: #8a6212;
  --ly-danger-bg: #f8e1e1;  --ly-danger-fg: #b4343a;
  --ly-positive: #2f8a55;

  /* Tipografia */
  --ly-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ly-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --ly-serif: 'Cormorant Garamond', Garamond, Georgia, serif; /* só no monograma */
  --ly-display: 64px;   /* Display */
  --ly-h2: 40px;
  --ly-h3: 22px;
  --ly-body: 16px;      /* line-height 1.7 */
  --ly-caption: 13px;

  /* Forma */
  --ly-radius: 16px;
  --ly-radius-sm: 10px;
  --ly-shadow: none;                                   /* plano: sem sombra em repouso */
  --ly-shadow-hover: 0 8px 24px rgba(26, 22, 20, .1);   /* só no hover de clicáveis */
  --ly-shadow-lg: 0 20px 50px rgba(26, 22, 20, .18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ly-bg: #0f0d0c; --ly-surface: #181513; --ly-title: #f5f2ee; --ly-text: #cfc8c0;
    --ly-muted: #9c948b; --ly-border: #2a2623; --ly-accent: #7d9bff; --ly-accent-hover: #9ab2ff; --ly-accent-soft: #1a2447;
    --ly-on-accent: #0b1433; --ly-hover: #1f1b18;
    --ly-contrast: #f5f2ee; --ly-on-contrast: #1a1614;
    --ly-draft-bg: #24211f; --ly-draft-fg: #cfc8c0;
    --ly-new-bg: #1a2447;   --ly-new-fg: #7d9bff;
    --ly-ok-bg: #18291f;    --ly-ok-fg: #6fcf8f;
    --ly-warn-bg: #2e2614;  --ly-warn-fg: #e8b94e;
    --ly-danger-bg: #33191b; --ly-danger-fg: #f07a80;
    --ly-positive: #5fcf8a;
    --ly-shadow: none; --ly-shadow-hover: 0 8px 24px rgba(0, 0, 0, .5); --ly-shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ly-bg: #0f0d0c; --ly-surface: #181513; --ly-title: #f5f2ee; --ly-text: #cfc8c0;
  --ly-muted: #9c948b; --ly-border: #2a2623; --ly-accent: #7d9bff; --ly-accent-hover: #9ab2ff; --ly-accent-soft: #1a2447;
  --ly-on-accent: #0b1433; --ly-hover: #1f1b18;
    --ly-contrast: #f5f2ee; --ly-on-contrast: #1a1614;
  --ly-draft-bg: #24211f; --ly-draft-fg: #cfc8c0;
  --ly-new-bg: #1a2447;   --ly-new-fg: #7d9bff;
  --ly-ok-bg: #18291f;    --ly-ok-fg: #6fcf8f;
  --ly-warn-bg: #2e2614;  --ly-warn-fg: #e8b94e;
  --ly-danger-bg: #33191b; --ly-danger-fg: #f07a80;
  --ly-positive: #5fcf8a;
  --ly-shadow: none; --ly-shadow-hover: 0 8px 24px rgba(0, 0, 0, .5); --ly-shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Marca: "Ly." ---------- */
.ly-mark { display: inline-flex; align-items: baseline; font-family: var(--ly-serif); font-style: italic; font-weight: 600; color: var(--ly-title); line-height: 1; }
.ly-mark::after { content: ''; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--ly-accent); }

/* Assinatura inline (sistemas): "Ly. Leonardo Yukio" */
.ly-signature { display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 8px; font: 400 13px/1 var(--ly-font); color: var(--ly-muted); text-decoration: none; transition: color .15s; }
.ly-signature:hover { color: var(--ly-title); }
.ly-signature .ly-mark { font-size: 18px; }
.ly-signature strong { font-weight: 500; color: var(--ly-title); }

/* ---------- Botões (pílula) ---------- */
.ly-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--ly-font); padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--ly-title); background: transparent; color: var(--ly-title);
  cursor: pointer; transition: background .15s, transform .1s, opacity .15s; white-space: nowrap;
}
.ly-btn:hover { background: var(--ly-hover); }
.ly-btn:active { transform: translateY(1px); }
.ly-btn:disabled { opacity: .45; cursor: not-allowed; }
.ly-btn.primary { background: var(--ly-accent); border-color: var(--ly-accent); color: var(--ly-on-accent); }
.ly-btn.primary:hover { background: var(--ly-accent-hover); border-color: var(--ly-accent-hover); }
.ly-btn.ghost { border-color: transparent; }
.ly-btn.danger { border-color: var(--ly-border); color: var(--ly-danger-fg); }
.ly-btn.sm { padding: 8px 14px; font-size: 13px; }
.ly-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Status (pílula com bolinha) ---------- */
.ly-pill {
  display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--ly-font);
  padding: 5px 10px; border-radius: 999px; background: var(--ly-draft-bg); color: var(--ly-draft-fg); white-space: nowrap;
}
.ly-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ly-pill.plain::before { display: none; }
.ly-pill.new { background: var(--ly-new-bg); color: var(--ly-new-fg); }
.ly-pill.ok { background: var(--ly-ok-bg); color: var(--ly-ok-fg); }
.ly-pill.warn { background: var(--ly-warn-bg); color: var(--ly-warn-fg); }
.ly-pill.danger { background: var(--ly-danger-bg); color: var(--ly-danger-fg); }

/* ---------- Card ---------- */
.ly-card { background: var(--ly-surface); border: 1px solid var(--ly-border); border-radius: var(--ly-radius); }
a.ly-card:hover, button.ly-card:hover { box-shadow: var(--ly-shadow-hover); }

/* ---------- Inputs ---------- */
.ly-input {
  font: 400 15px/1.4 var(--ly-font); color: var(--ly-title); background: var(--ly-surface);
  border: 1px solid var(--ly-border); border-radius: 12px; padding: 11px 14px; width: 100%; transition: border-color .15s;
}
.ly-input::placeholder { color: var(--ly-muted); }
.ly-input:focus { outline: none; border-color: var(--ly-accent); box-shadow: 0 0 0 3px var(--ly-accent-soft); }
.ly-input.invalid { border-color: var(--ly-danger-fg); }
.ly-help { font-size: var(--ly-caption); color: var(--ly-muted); margin-top: 6px; }
.ly-help.error { color: var(--ly-danger-fg); }
.ly-mono { font-family: var(--ly-mono); font-size: 13px; }

:focus-visible { outline: 2px solid var(--ly-accent); outline-offset: 2px; }
::selection { background: var(--ly-accent-soft); }