/* ==========================================================================
   PRM — Design tokens (Andrés Parra y Cía)
   Fuente de verdad de la identidad visual. Lo consumen el back-office (Django)
   y la app móvil (React + Vite). Estilo: Clientify (limpio/moderno, dark-mode).
   Ver docs/prm-sistema-diseno.md y el styleguide publicado.

   Acento único: VERDE. El amarillo de marca no se usa en la UI (decisión 09/2026).

   Tipografías (servidas desde PRM: backend/static/css/fuentes.css):
     Archivo (títulos) · IBM Plex Sans (cuerpo) · IBM Plex Mono (datos)
   ========================================================================== */

:root {
  /* ---- Marca (colores crudos, no usar directo en componentes) ---- */
  --prm-green: #367c2b;   /* PANTONE 364 C */
  --prm-gray: #e5e6e6;    /* PANTONE 427 C */
  --prm-black: #000000;   /* Process Black */
  --prm-yellow: #ffdc00;  /* PANTONE 109 C — color de marca, sin uso en la UI */

  /* rampa de verde */
  --green-50:  #eef5ea;
  --green-100: #dfeed9;
  --green-500: #4a9a3d;
  --green-600: #2e6b25;
  --green-700: #24571d;

  /* ---- Roles semánticos (light) — usar estos en los componentes ---- */
  --ground:        #f5f7f3;
  --surface:       #ffffff;
  --surface-2:     #eef1ea;
  --border:        #e5e6e6;
  --border-strong: #d3d6cf;

  --ink:        #161a12;
  --ink-muted:  #5b6153;
  --ink-faint:  #8b9182;

  --primary:      #367c2b;
  --primary-600:  #2e6b25;
  --primary-700:  #24571d;
  --primary-tint: #dfeed9;
  --primary-tint-2:#eef5ea;
  --on-primary:   #ffffff;

  /* acento = verde (mismo rol, nombre estable para componentes) */
  --accent:      #367c2b;
  --accent-600:  #2e6b25;
  --accent-tint: #dfeed9;
  --on-accent:   #ffffff;

  /* estado (solo para estado, no como acento) */
  --success: #2f7d27; --success-bg: #e2f0dc;
  --warning: #9a5b0a; --warning-bg: #fbe8cc;   /* ámbar-naranja, no amarillo */
  --danger:  #bd3a29; --danger-bg:  #f7e1dc;
  --info:    #2b6d8c; --info-bg:    #dcecf2;

  --focus: #367c2b;   /* anillo de foco verde */

  /* ---- Tipografía ---- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Radios y sombras ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22, 26, 18, .07);
  --shadow: 0 1px 2px rgba(22, 26, 18, .06), 0 6px 18px rgba(22, 26, 18, .06);
}

/* ---- Dark: por preferencia del sistema (si no hay tema explícito) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0e120c; --surface: #161b13; --surface-2: #1f251b;
    --border: #2a3226; --border-strong: #3b4535;
    --ink: #e8eae3; --ink-muted: #a4aa9b; --ink-faint: #727a6a;
    --primary: #5cb14a; --primary-600: #4a9c3b; --primary-700: #3d8531;
    --primary-tint: #1e3618; --primary-tint-2: #16240f; --on-primary: #0b1108;
    --accent: #5cb14a; --accent-600: #4a9c3b; --accent-tint: #1e3618; --on-accent: #0b1108;
    --success: #5cb14a; --success-bg: #183213;
    --warning: #e6a13a; --warning-bg: #35240d;
    --danger: #e8715f; --danger-bg: #3a1912;
    --info: #69b3d4; --info-bg: #0f2c38;
    --focus: #5cb14a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .4);
  }
}

/* ---- Dark: por elección explícita (toggle) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e120c; --surface: #161b13; --surface-2: #1f251b;
  --border: #2a3226; --border-strong: #3b4535;
  --ink: #e8eae3; --ink-muted: #a4aa9b; --ink-faint: #727a6a;
  --primary: #5cb14a; --primary-600: #4a9c3b; --primary-700: #3d8531;
  --primary-tint: #1e3618; --primary-tint-2: #16240f; --on-primary: #0b1108;
  --accent: #5cb14a; --accent-600: #4a9c3b; --accent-tint: #1e3618; --on-accent: #0b1108;
  --success: #5cb14a; --success-bg: #183213;
  --warning: #e6a13a; --warning-bg: #35240d;
  --danger: #e8715f; --danger-bg: #3a1912;
  --info: #69b3d4; --info-bg: #0f2c38;
  --focus: #5cb14a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px rgba(0, 0, 0, .4);
}