/* ==========================================================================
   Colaboremos 2.0 — Design tokens
   El color codifica el lado del marketplace:
     verde  = negocio (quien necesita)
     coral  = creador (quien construye)
     girasol = piloto (el encuentro entre ambos)
   ========================================================================== */

:root {
  color-scheme: light;

  /* Superficies */
  --paper: #f7f5ef;
  --surface: #ffffff;
  --surface-2: #f1eee6;
  --surface-3: #e8e4d8;

  /* Texto */
  --ink: #16201c;
  --ink-2: #33403a;
  --muted: #5b6761;
  --subtle: #67726c;

  /* Líneas */
  --line: #e3ded2;
  --line-strong: #c9c2b2;

  /* Lados del marketplace */
  --negocio: #0f6b4f;
  --negocio-ink: #0b5a42;
  --negocio-soft: #e2f0e9;
  --creador: #c4513a;
  --creador-ink: #a13f29;
  --creador-soft: #f9e5de;
  --piloto: #f2b53a;
  --piloto-ink: #6f4a00;
  --piloto-soft: #fcefd0;

  /* Estados */
  --ok: #1d7a4c;
  --ok-soft: #e1f1e8;
  --pending: #8a5800;
  --pending-soft: #fbefd6;
  --danger: #b3261e;

  /* Botones */
  --btn-bg: #16201c;
  --btn-fg: #ffffff;
  --btn-hover: #2c3934;
  --btn-primary-bg: #0f6b4f;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #0b5a42;
  --btn-creador-bg: #a13f29;
  --btn-creador-hover: #8a3321;
  --btn-creador-fg: #ffffff;
  --focus: #0f6b4f;

  /* Logos de soluciones (tono por solución vía --h) */
  --logo-s: 38%;
  --logo-l: 32%;

  /* Elevación */
  --shadow-1: 0 1px 2px rgb(22 32 28 / .06), 0 0 0 1px rgb(22 32 28 / .02);
  --shadow-2: 0 12px 30px -14px rgb(22 32 28 / .25);
  --shadow-3: 0 30px 70px -28px rgb(22 32 28 / .38);

  /* Forma */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-full: 999px;

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --max: 1200px;
  --header-h: 64px;
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1412;
    --surface: #161d1a;
    --surface-2: #1d2521;
    --surface-3: #25302b;
    --ink: #edf1ee;
    --ink-2: #cdd6d1;
    --muted: #a0ada7;
    --subtle: #7f8c86;
    --line: #2a3430;
    --line-strong: #3b4742;
    --negocio: #5cc59c;
    --negocio-ink: #82d8b5;
    --negocio-soft: #15302a;
    --creador: #ef8d73;
    --creador-ink: #f5a893;
    --creador-soft: #3a221c;
    --piloto: #f2b53a;
    --piloto-ink: #f6cf78;
    --piloto-soft: #33290f;
    --ok: #6fd09f;
    --ok-soft: #173024;
    --pending: #f0c060;
    --pending-soft: #33290f;
    --danger: #ff8a80;
    --btn-bg: #edf1ee;
    --btn-fg: #0f1412;
    --btn-hover: #d3dcd7;
    --btn-primary-bg: #5cc59c;
    --btn-primary-fg: #07130e;
    --btn-primary-hover: #82d8b5;
    --btn-creador-bg: #ef8d73;
    --btn-creador-hover: #f5a893;
    --btn-creador-fg: #1c0d08;
    --focus: #82d8b5;
    --logo-s: 40%;
    --logo-l: 42%;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 12px 30px -14px rgb(0 0 0 / .6);
    --shadow-3: 0 30px 70px -28px rgb(0 0 0 / .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1412;
  --surface: #161d1a;
  --surface-2: #1d2521;
  --surface-3: #25302b;
  --ink: #edf1ee;
  --ink-2: #cdd6d1;
  --muted: #a0ada7;
  --subtle: #7f8c86;
  --line: #2a3430;
  --line-strong: #3b4742;
  --negocio: #5cc59c;
  --negocio-ink: #82d8b5;
  --negocio-soft: #15302a;
  --creador: #ef8d73;
  --creador-ink: #f5a893;
  --creador-soft: #3a221c;
  --piloto: #f2b53a;
  --piloto-ink: #f6cf78;
  --piloto-soft: #33290f;
  --ok: #6fd09f;
  --ok-soft: #173024;
  --pending: #f0c060;
  --pending-soft: #33290f;
  --danger: #ff8a80;
  --btn-bg: #edf1ee;
  --btn-fg: #0f1412;
  --btn-hover: #d3dcd7;
  --btn-primary-bg: #5cc59c;
  --btn-primary-fg: #07130e;
  --btn-primary-hover: #82d8b5;
  --btn-creador-bg: #ef8d73;
  --btn-creador-hover: #f5a893;
  --btn-creador-fg: #1c0d08;
  --focus: #82d8b5;
  --logo-s: 40%;
  --logo-l: 42%;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 12px 30px -14px rgb(0 0 0 / .6);
  --shadow-3: 0 30px 70px -28px rgb(0 0 0 / .7);
}