/* Paperfish Design System v2.1 — Make Music Records */
/* Identidade fiel ao spec estrutural (design-systems/paperfish-design-system-v2.1.md) */
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  [data-ds="paperfish"] {
    /* Constantes entre claro/escuro — Yellow já tem contraste 12.4:1 pareado com texto preto */
    --paperfish-primary:      oklch(88.2% 0.192 100.3); /* Yellow */
    --paperfish-primary-dim:  oklch(75.9% 0.192 100.3); /* Yellow, -10L */
    --ds-primary:     var(--paperfish-primary);
    --ds-primary-dim: var(--paperfish-primary-dim);
    /* Yellow como fill exige texto preto por cima (spec: contraste 12.4:1) */
    --ds-on-primary: oklch(7.8% 0 0);
    --ds-font-display: 'Big Shoulders Display', sans-serif;
    --ds-font-body:    'Space Grotesk', sans-serif;
    --ds-font-mono:    'Space Grotesk', sans-serif; /* slot de label/nav — Paperfish usa a mesma família em bold */
  }

  [data-ds="paperfish"][data-theme="dark"] {
    color-scheme: dark;
    --paperfish-bg:         oklch(7.8%  0     0);      /* Black */
    --paperfish-card-bg:    oklch(13.2% 0     0);       /* Dark */
    --paperfish-border:     oklch(30%   0.010 89);      /* derivado — família Paper/Cream */
    --paperfish-text:       oklch(93.2% 0.011 89.4);    /* Cream */
    --paperfish-text-muted: oklch(57.8% 0     0);       /* Gray Mid */
    --paperfish-accent:     oklch(88.2% 0.192 100.3);   /* Yellow — spec: "Yellow é o único acento" */
    --ds-bg: var(--paperfish-bg); --ds-card-bg: var(--paperfish-card-bg);
    --ds-border: var(--paperfish-border); --ds-text: var(--paperfish-text);
    --ds-text-muted: var(--paperfish-text-muted); --ds-accent: var(--paperfish-accent);
    --ds-primary-text: var(--paperfish-primary); /* Yellow sobre Black: legível */
  }

  [data-ds="paperfish"][data-theme="light"],
  [data-ds="paperfish"][data-theme="ice"] {
    color-scheme: light;
    --paperfish-bg:         oklch(90.8% 0.014 89.1);    /* Paper */
    --paperfish-card-bg:    oklch(83.4% 0.012 88.2);    /* Paper Dark */
    --paperfish-border:     oklch(79.8% 0.009 88.7);    /* Gray Light */
    --paperfish-text:       oklch(7.8%  0     0);       /* Black */
    --paperfish-text-muted: oklch(46.2% 0     0);       /* Gray Mid A11y */
    --paperfish-accent:     oklch(88.2% 0.192 100.3);   /* Yellow — nunca como texto sobre paper/cream (spec proíbe), só como fill/borda */
    --ds-bg: var(--paperfish-bg); --ds-card-bg: var(--paperfish-card-bg);
    --ds-border: var(--paperfish-border); --ds-text: var(--paperfish-text);
    --ds-text-muted: var(--paperfish-text-muted); --ds-accent: var(--paperfish-accent);
    --ds-primary-text: oklch(46% 0.140 100.3); /* derivado — spec proíbe Yellow como texto sobre paper/cream */
  }

  body[data-ds="paperfish"] {
    background-color: var(--paperfish-bg);
    color: var(--paperfish-text);
  }
}

/* Tipografia Paperfish */
.paperfish-display {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paperfish-body {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

.paperfish-mono {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Padrão de card — moldura fina, cantos quadrados, sem sombra (design-systems/paperfish-design-system-v2.1.html,
   .el-card-ui: "bg #1E1E1E · border 1px #2E2E2E · border-radius 0 · padding 20px · no shadow"; Proibições #2:
   "nunca usar box-shadow em cards") */
[data-ds="paperfish"][data-theme="dark"] .ds-card {
  background: oklch(15.4% 0 0);  /* Surface 2 #1E1E1E — valor exato do spec */
  border: 1px solid oklch(20% 0 0); /* aprox. #2E2E2E — spec não fornece oklch exato para este token */
}

[data-ds="paperfish"][data-theme="light"] .ds-card,
[data-ds="paperfish"][data-theme="ice"] .ds-card {
  /* Spec não documenta um card claro — deriva dos tokens gerais de superfície/borda claros */
  background: var(--ds-card-bg);
  border: 1px solid var(--ds-border);
}

[data-ds="paperfish"] .ds-card {
  border-radius: 0;
  box-shadow: none;
}

/* ── FASE 1.5: card-poster e componentes estruturais ─────────────────
   Linguagem dos posters Paperfish (spec §03 Starburst, §09 Divider/end-bar):
   end-bar amarela no rodapé (3px, 6px no hover — "end-bar de poster") e
   starburst ✸ no canto. Decoração automática em qualquer .ds-card. */
[data-ds="paperfish"] .ds-card {
  position: relative;
  overflow: hidden;
}

[data-ds="paperfish"] .ds-card::after {
  content: '' / '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ds-primary);
  transition: height .15s;
}

[data-ds="paperfish"] .ds-card:hover::after { height: 6px; }

[data-ds="paperfish"] .ds-card::before {
  content: '✸' / '';
  position: absolute;
  top: 10px; right: 12px;
  color: var(--ds-primary);
  font-size: 1rem;
  line-height: 1;
}

/* Contrato de componentes (aditivo): título display, meta/label, régua */
[data-ds="paperfish"] .ds-card-title {
  font-family: var(--ds-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-ds="paperfish"] .ds-card-meta {
  font-family: var(--ds-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ds-primary-text);
}

[data-ds="paperfish"] .ds-rule {
  height: 3px;
  background: var(--ds-primary);
  border: 0;
}

/* Botão Primário (spec §10): fill Yellow, texto preto, Big Shoulders 900 uppercase */
[data-ds="paperfish"] .ds-btn-primary {
  background: var(--ds-primary);
  color: var(--ds-on-primary);
  border: none;
  border-radius: 0;
  font-family: var(--ds-font-display);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-ds="paperfish"] .ds-btn-primary:hover { filter: brightness(1.08); }
[data-ds="paperfish"] .ds-btn-primary:disabled { opacity: .4; cursor: not-allowed; filter: none; }