/* ==========================================================================
   Atalaya · tokens de diseño · v2.0 (octubre 2026)
   Fuente: Manual de identidad v2.0, cap. 08.

   Tres capas:
     1. --brand-*            paleta de marca (no usar directamente en componentes)
     2. --verde-*, --neutro-* escalas OKLCH de interfaz
     3. --color-*, --action-*, --chart-*  tokens semánticos (los que usa el producto)

   Uso:
     <link rel="stylesheet" href="fonts/fonts.css">
     <link rel="stylesheet" href="tokens/tokens.css">
   Modo oscuro: <html data-theme="dark">, o clase .theme-auto en <html>
   para seguir la preferencia del sistema.
   Regla: el código de producto nunca usa un #hex ni px sueltos; usa tokens.
   ========================================================================== */

:root {
  /* ---------- 1. Paleta de marca ---------- */
  --brand-monte:    #113A27; /* firma, logotipo, superficies de marca */
  --brand-pinar:    #136E3E; /* acción: botones, enlaces, selección */
  --brand-blanco:   #FFFFFF; /* fondo de todo */
  --brand-brote:    #30A359; /* solo datos y gráficos, nunca texto */
  --brand-liquen:   #C1ECCC; /* rellenos e ilustración */
  --brand-almenara: #E76432; /* aviso; como mucho el 1 % */
  --brand-almenara-texto: #B53F1D; /* Almenara apta para texto (5,7:1) */
  --brand-niebla:   #F6F8F7; /* superficie */
  --brand-piedra:   #E4E7E5; /* borde */
  --brand-grafito:  #636965; /* texto secundario */
  --brand-tinta:    #161B18; /* texto */

  /* ---------- 2. Escalas ---------- */
  --verde-50:  #F0FBF3;
  --verde-100: #E0F7E4;
  --verde-200: #C1ECCC; /* Liquen */
  --verde-300: #99DBAC;
  --verde-400: #66C483;
  --verde-500: #30A359; /* Brote */
  --verde-600: #1D8949;
  --verde-700: #136E3E; /* Pinar */
  --verde-800: #0F5432;
  --verde-900: #113A27; /* Monte */
  --verde-950: #082417;

  --neutro-0:   #FFFFFF;
  --neutro-25:  #FBFCFB;
  --neutro-50:  #F6F8F7; /* Niebla */
  --neutro-100: #EFF2F0;
  --neutro-200: #E4E7E5; /* Piedra */
  --neutro-300: #D3D7D4;
  --neutro-400: #A7ACA9;
  --neutro-500: #828884;
  --neutro-600: #636965; /* Grafito */
  --neutro-700: #494F4B;
  --neutro-800: #2C322F;
  --neutro-900: #161B18; /* Tinta */
  --neutro-950: #0C110E;

  /* ---------- 3. Semánticos · tema claro (por defecto) ---------- */
  --color-background:      var(--brand-blanco);
  --color-surface:         var(--brand-blanco);
  --color-surface-muted:   var(--neutro-50);
  --color-surface-sunken:  var(--neutro-100);
  --color-surface-inverse: var(--brand-monte);

  --color-text:          var(--brand-tinta);
  --color-text-muted:    var(--brand-grafito);
  --color-text-subtle:   var(--neutro-500);
  --color-text-inverse:  var(--brand-blanco);
  --color-link:          var(--brand-pinar);
  --color-brand:         var(--brand-monte);

  --action-primary-bg:         var(--brand-pinar);
  --action-primary-bg-hover:   var(--verde-800);
  --action-primary-bg-active:  var(--verde-900);
  --action-primary-text:       var(--brand-blanco);
  --action-secondary-bg:       var(--brand-blanco);
  --action-secondary-bg-hover: var(--neutro-50);
  --action-secondary-border:   var(--neutro-200);
  --action-secondary-text:     var(--brand-tinta);
  --action-selected-bg:        var(--verde-50);
  --action-disabled-bg:        var(--neutro-100);
  --action-disabled-text:      var(--neutro-400);

  --color-success:    #136E3E; --color-success-bg: var(--verde-50);  --color-success-border: var(--verde-200);
  --color-warning:    #975D04; --color-warning-bg: #FEF4E2;           --color-warning-border: #F5D9A6;
  --color-danger:     #BA3630; --color-danger-bg:  #FDEEEC;           --color-danger-border:  #F6C4BE;
  --color-info:       #286CAB; --color-info-bg:    #EBF4FD;           --color-info-border:    #BFD9F2;
  --color-alert:      #B53F1D; --color-alert-bg:   #FDF0EA;           --color-alert-border:   #F6CDB9;
  --color-alert-dot:  var(--brand-almenara);

  --color-border:        var(--neutro-200);
  --color-border-hover:  var(--neutro-300);
  --color-border-strong: var(--neutro-400);
  --border-default:      1px solid var(--color-border);

  --chart-1:      var(--brand-brote);   /* dato principal */
  --chart-2:      var(--verde-300);     /* comparación */
  --chart-3:      var(--neutro-400);    /* tercera serie (máx. 3) */
  --chart-empty:  var(--neutro-100);
  --chart-grid:   var(--neutro-200);
  --chart-today:  var(--brand-pinar);
  --chart-alert:  var(--brand-almenara);
  /* Canales del calendario */
  --channel-direct:  var(--brand-pinar);
  --channel-booking: #2C6CAB;
  --channel-airbnb:  var(--verde-400);
  --channel-other:   var(--neutro-400);
  --channel-block:   var(--neutro-200);

  /* ---------- Tipografía ---------- */
  --font-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-display: 4rem;      --leading-display: 1.0;  --tracking-display: -0.035em;
  --text-h1: 2.75rem;        --leading-h1: 1.05;      --tracking-h1: -0.03em;
  --text-h2: 2rem;           --leading-h2: 1.12;      --tracking-h2: -0.025em;
  --text-h3: 1.375rem;       --leading-h3: 1.25;      --tracking-h3: -0.015em;
  --text-h4: 1.125rem;       --leading-h4: 1.35;      --tracking-h4: -0.01em;
  --text-metric: 2.5rem;     --leading-metric: 1.0;   --tracking-metric: -0.035em;
  --text-lead: 1.125rem;     --leading-lead: 1.55;    --tracking-lead: -0.005em;
  --text-body: 1rem;         --leading-body: 1.55;    --tracking-body: 0;
  --text-small: 0.875rem;    --leading-small: 1.45;   --tracking-small: -0.005em;
  --text-label: 0.75rem;     --leading-label: 1.3;    --tracking-label: 0.06em;
  --text-caption: 0.75rem;   --leading-caption: 1.4;  --tracking-caption: 0;

  --weight-display: 600; --weight-h1: 600; --weight-h2: 600; --weight-h3: 600; --weight-h4: 600;
  --weight-metric: 600; --weight-lead: 400; --weight-body: 400; --weight-small: 500;
  --weight-label: 400; --weight-caption: 400;

  --measure: 75ch; /* máximo de caracteres por línea */

  /* ---------- Espacio (base 4, ritmo 8) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --grid-columns: 12;
  --grid-gutter: 1.5rem; /* 24 px */
  --grid-margin: calc(100% / 12);

  /* ---------- Forma ---------- */
  --radius-none: 0;
  --radius-xs: 4px;    /* insignias */
  --radius-sm: 6px;    /* etiquetas */
  --radius-md: 10px;   /* botones y campos */
  --radius-lg: 14px;   /* tarjetas */
  --radius-xl: 20px;   /* paneles y ventanas */
  --radius-2xl: 28px;  /* hojas modales */
  --radius-pill: 999px;/* avatares */
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);

  --control-height-sm: 2rem;    /* 32 */
  --control-height-md: 2.5rem;  /* 40 */
  --control-height-lg: 3rem;    /* 48 */
  --touch-target: 44px;         /* área mínima en móvil */

  /* Sombras bajas, difusas y tintadas con Tinta (22, 27, 24); nunca negras */
  --shadow-xs:    0 1px 2px rgb(22 27 24 / 0.05);
  --shadow-sm:    0 1px 3px rgb(22 27 24 / 0.06), 0 1px 2px rgb(22 27 24 / 0.04);
  --shadow-card:  0 1px 2px rgb(22 27 24 / 0.04), 0 4px 12px rgb(22 27 24 / 0.05);
  --shadow-pop:   0 4px 8px rgb(22 27 24 / 0.05), 0 12px 32px rgb(22 27 24 / 0.10);
  --shadow-modal: 0 8px 16px rgb(22 27 24 / 0.06), 0 24px 64px rgb(22 27 24 / 0.16);

  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--action-primary-bg);

  /* ---------- Movimiento ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Marca ---------- */
  --brand-angle: 33.69deg;   /* pendiente 2:3 del símbolo */
  --brand-angle-hill: 18.43deg; /* colinas en ilustración */

  color-scheme: light;
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"] {
  --color-background:      #0C110E;
  --color-surface:         #131916;
  --color-surface-muted:   #1C221F;
  --color-surface-sunken:  #080C0A;
  --color-surface-inverse: #FFFFFF;

  --color-text:         #EEF1EF;
  --color-text-muted:   #ACB3AF;
  --color-text-subtle:  #868D89;
  --color-text-inverse: #0C110E;
  --color-link:         #72CF8E;
  --color-brand:        #FFFFFF;

  --action-primary-bg:         #72CF8E;
  --action-primary-bg-hover:   #93DCA8;
  --action-primary-bg-active:  #B4E8C2;
  --action-primary-text:       #082417;
  --action-secondary-bg:       #131916;
  --action-secondary-bg-hover: #1C221F;
  --action-secondary-border:   #2A2F2C;
  --action-secondary-text:     #EEF1EF;
  --action-selected-bg:        #17301F;
  --action-disabled-bg:        #1C221F;
  --action-disabled-text:      #4E5551;

  --color-success: #72CF8E; --color-success-bg: #12271A; --color-success-border: #1F4A2E;
  --color-warning: #E9C27A; --color-warning-bg: #2A2112; --color-warning-border: #4D3B18;
  --color-danger:  #F39A90; --color-danger-bg:  #2D1715; --color-danger-border:  #5A2923;
  --color-info:    #8EC0EE; --color-info-bg:    #14212E; --color-info-border:    #24405C;
  --color-alert:   #F4A27F; --color-alert-bg:   #2D1A12; --color-alert-border:   #5A3020;

  --color-border:        #2A2F2C;
  --color-border-hover:  #3A403C;
  --color-border-strong: #4E5551;

  --chart-1:     #30A359;
  --chart-2:     #1F4A2E;
  --chart-empty: #202724;
  --chart-grid:  #2A2F2C;
  --chart-today: #72CF8E;

  --shadow-card:  0 1px 2px rgb(0 0 0 / 0.30), 0 4px 12px rgb(0 0 0 / 0.25);
  --shadow-pop:   0 4px 8px rgb(0 0 0 / 0.30), 0 12px 32px rgb(0 0 0 / 0.40);
  --shadow-modal: 0 8px 16px rgb(0 0 0 / 0.35), 0 24px 64px rgb(0 0 0 / 0.50);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto:not([data-theme="light"]) {
    --color-background: #0C110E; --color-surface: #131916; --color-surface-muted: #1C221F;
    --color-surface-sunken: #080C0A; --color-surface-inverse: #FFFFFF;
    --color-text: #EEF1EF; --color-text-muted: #ACB3AF; --color-text-subtle: #868D89;
    --color-text-inverse: #0C110E; --color-link: #72CF8E; --color-brand: #FFFFFF;
    --action-primary-bg: #72CF8E; --action-primary-bg-hover: #93DCA8; --action-primary-bg-active: #B4E8C2;
    --action-primary-text: #082417; --action-secondary-bg: #131916; --action-secondary-bg-hover: #1C221F;
    --action-secondary-border: #2A2F2C; --action-secondary-text: #EEF1EF; --action-selected-bg: #17301F;
    --action-disabled-bg: #1C221F; --action-disabled-text: #4E5551;
    --color-success: #72CF8E; --color-success-bg: #12271A; --color-success-border: #1F4A2E;
    --color-warning: #E9C27A; --color-warning-bg: #2A2112; --color-warning-border: #4D3B18;
    --color-danger: #F39A90; --color-danger-bg: #2D1715; --color-danger-border: #5A2923;
    --color-info: #8EC0EE; --color-info-bg: #14212E; --color-info-border: #24405C;
    --color-alert: #F4A27F; --color-alert-bg: #2D1A12; --color-alert-border: #5A3020;
    --color-border: #2A2F2C; --color-border-hover: #3A403C; --color-border-strong: #4E5551;
    --chart-1: #30A359; --chart-2: #1F4A2E; --chart-empty: #202724; --chart-grid: #2A2F2C; --chart-today: #72CF8E;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 12px rgb(0 0 0 / 0.25);
    --shadow-pop: 0 4px 8px rgb(0 0 0 / 0.30), 0 12px 32px rgb(0 0 0 / 0.40);
    --shadow-modal: 0 8px 16px rgb(0 0 0 / 0.35), 0 24px 64px rgb(0 0 0 / 0.50);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}