/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS  ·  RENTi
   Light theme is default (:root = light).
   Dark is opt-in via [data-theme="dark"].

   Paleta de marca tomada de la landing (app-renti-web), que a su vez sale
   de "RENTi-Landing page.pdf":
     teal  #009e9b · navy (ink) #081929 · texto #52606c
     línea #e4ecef · menta #effaf8

══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY TOKENS
   --font-base  → texto corrido, labels, títulos
   --font-mono  → botones, badges, código, elementos UI tabulares
══════════════════════════════════════════════════════════════════════ */
:root {
  --font-base: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   MOTION TOKENS  ·  easing curves + durations
   Shared by touch.css, and any component that transitions.
   Theme-invariant: motion doesn't change between light and dark.
══════════════════════════════════════════════════════════════════════ */
:root {
  /* Easing curves */
  --ease-ios:    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* standard iOS */
  --ease-snap:   cubic-bezier(0.20, 0.00, 0.00, 1.00); /* quick settle */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* bounce/overshoot */
  --ease-out:    cubic-bezier(0.00, 0.00, 0.20, 1.00); /* material decel */

  /* Durations */
  --dur-instant:  80ms;
  --dur-fast:    160ms;
  --dur-normal:  260ms;
  --dur-slow:    380ms;
  --dur-modal:   320ms;

  /* Touch */
  --touch-target: 44px; /* iOS HIG min; Android recommends 48px */
}

/* ── Theme-invariant ───────────────────────────────────────────────── */
:root {
  /* Text sitting on an accent fill (success/danger buttons, active tabs).
     Dark ink in BOTH themes: light fills those buttons with pastels and dark
     fills them with neons — both are light surfaces, so both want dark ink.
     --txt-pure would flip to white on dark and vanish against the neon. */
  --txt-on-accent: #081929;

  /* Texto sobre un relleno de tinta saturada (--clr-X, no --clr-X-soft):
     botones sólidos como .fb. Ahí el fondo es oscuro-medio en light y el
     par correcto es blanco — --txt-on-accent daría 3.1:1, bajo el mínimo. */
  --txt-on-ink: #ffffff;

  /* Pressed state on a neutral control. Unlike --surf-hover this must read
     as "deeper" than --surf-raised in whichever direction the theme runs. */
  --surf-pressed: rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] {
  --surf-pressed: rgba(255, 255, 255, 0.18);
}

/* ══ LIGHT (default) ═══════════════════════════════════════════════════ */
:root,
[data-theme="light"] {

  /* ── Brand (RENTi) ─────────────────────────────────────────────────
     Antes la marca reutilizaba --clr-danger (rosado), así que errores y
     marca eran el mismo color. Ahora la marca tiene su propio grupo:
       --brand         teal de la landing: puntos, barras, bordes, brillos.
                       Solo 3.3:1 sobre blanco → nunca para texto chico.
       --brand-strong  texto en teal y rellenos con texto blanco (5.2:1).
       --brand-soft    relleno pastel, se combina con --txt-on-accent.
       --brand-fill    relleno sólido de botón, con --txt-on-brand.      */
  --brand:          #009e9b;
  --brand-strong:   #007a77;
  --brand-soft:     #b3e8e6;
  --brand-fill:     #007a77;
  --txt-on-brand:   #ffffff;
  --brand-12: rgba(0, 158, 155, 0.12);
  --brand-25: rgba(0, 158, 155, 0.25);
  --brand-40: rgba(0, 158, 155, 0.40);
  --brand-50: rgba(0, 158, 155, 0.50);

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --surf-void:     #f4f8f8;                   /* page backdrop */
  --surf-base:     #ffffff;
  --surf-app:      #effaf8;
  --surf-glass:    rgba(255, 255, 255, 0.93); /* floating panels */
  --surf-glass-hi: rgba(255, 255, 255, 0.97); /* mobile sidebar */
  --surf-popup:    rgba(255, 255, 255, 0.82); /* translucent popup */
  --surf-track:    #e4ecef;                   /* progress / bar tracks */
  --surf-sub:      rgba(8, 25, 41, 0.03);     /* faint card tint */
  --surf-hover:    rgba(8, 25, 41, 0.06);     /* hover state */
  --surf-raised:   rgba(8, 25, 41, 0.10);     /* active / pressed */

  /* ── Borders ───────────────────────────────────────────────────────── */
  --bdr-strong:  #d6e2e6;
  --bdr-default: #c3d1d6;                     /* inputs, scrollbars */
  --bdr-faint:   rgba(8, 25, 41, 0.06);       /* dividers, sec-title */
  --bdr-mid:     rgba(8, 25, 41, 0.10);
  --bdr-light:   rgba(8, 25, 41, 0.12);       /* tab group, sidebar */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --txt-pure:  #081929;
  --txt-hi:    #081929;
  --txt-sec:   rgba(8, 25, 41, 0.72);
  --txt-ter:   rgba(8, 25, 41, 0.56);
  --txt-dim:   rgba(8, 25, 41, 0.50);
  --txt-muted: rgba(8, 25, 41, 0.44);
  --txt-faint: rgba(8, 25, 41, 0.36);
  --txt-label: #52606c;
  --txt-sub:   #6b7884;

  /* ── Status / Data colors ──────────────────────────────────────────
     Pastel scheme. Each semantic color is a PAIR, because these tokens are
     used both as `color:` on text and as `background:` on solid fills, and
     one value cannot serve both: a pastel light enough to read as pastel
     sits near 11:1 against dark ink but only ~1.5:1 against white, so text
     painted with it disappears.

       --clr-X       ink — text, icons, borders. Muted but deep enough to
                     clear 4.5:1 on --surf-app (verified, not eyeballed).
       --clr-X-soft  pastel fill — solid backgrounds, paired with --txt-hi.

     The -NN alpha variants stay keyed to the ink hue: they render as tints
     over the surface, which is already the pastel end of the same hue.
     Son semánticos (escenarios y estados), no de marca: se mantienen.     */
  --clr-success:      #26694d;
  --clr-success-soft: #a8e6c4;
  --clr-success-05: rgba(38, 105, 77, 0.05);
  --clr-success-12: rgba(38, 105, 77, 0.12);
  --clr-success-20: rgba(38, 105, 77, 0.20);
  --clr-success-25: rgba(38, 105, 77, 0.25);
  --clr-success-30: rgba(38, 105, 77, 0.30);
  --clr-success-50: rgba(38, 105, 77, 0.50);

  --clr-info:      #3a6ea8;
  --clr-info-soft: #b6d3f2;
  --clr-info-12: rgba(58, 110, 168, 0.12);
  --clr-info-25: rgba(58, 110, 168, 0.25);
  --clr-info-40: rgba(58, 110, 168, 0.40);

  --clr-danger:      #b0455c;
  --clr-danger-soft: #f5c2cb;
  --clr-danger-12: rgba(176, 69, 92, 0.12);
  --clr-danger-25: rgba(176, 69, 92, 0.25);
  --clr-danger-40: rgba(176, 69, 92, 0.40);

  --clr-warn:      #855c26;
  --clr-warn-soft: #f7dcb4;
  --clr-neutral:      #52606c;
  --clr-neutral-soft: #d6e2e6;


  /* ── Semantic status pairs ─────────────────────────────────────────── */
  --status-ok-bg:   #e8f6ec;
  --status-ok-fg:   #1a7f37;
  --status-ok-bdr:  #b8e0c2;
  --status-bad-bg:  #fdeced;
  --status-bad-fg:  #6b7884;
  --status-bad-bdr: #f0c4c8;
}

/* ══ DARK — tema activo de la interfaz ═════════════════════════════════
   Colores medidos del mockup de la app en la landing
   (app-renti-web/public/images/renti/app-mockup.webp). Layout.astro lo
   activa con <html data-theme="dark">. Solo afecta la interfaz: el mapa
   usa el estilo claro positron, que no depende del tema. */
[data-theme="dark"] {

  /* ── Brand (RENTi) ─────────────────────────────────────────────────
       --brand         cyan del mockup (radio activo, barras): 11:1 sobre panel
       --brand-strong  texto en acento → el mismo cyan
       --brand-soft    relleno claro con --txt-on-accent (navy) encima
       --brand-fill    relleno sólido con texto blanco: pestaña activa del
                       mockup (#00737c, 5.6:1 con blanco)                  */
  --brand:          #00e9e4;
  --brand-strong:   #00e9e4;
  --brand-soft:     #00e9e4;
  --brand-fill:     #00737c;
  --txt-on-brand:   #ffffff;
  --brand-12: rgba(0, 233, 228, 0.12);
  --brand-25: rgba(0, 233, 228, 0.25);
  --brand-40: rgba(0, 233, 228, 0.40);
  --brand-50: rgba(0, 233, 228, 0.50);

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --surf-void:     #071523;                   /* barra lateral del mockup */
  --surf-base:     #0c2233;                   /* paneles */
  --surf-app:      #081929;                   /* fondo de la app */
  --surf-glass:    rgba(12, 34, 51, 0.94);    /* paneles flotantes */
  --surf-glass-hi: rgba(12, 34, 51, 0.98);    /* mobile sidebar */
  --surf-popup:    rgba(8, 25, 41, 0.82);     /* popups / tooltips */
  --surf-track:    #284660;                   /* pista de las barras */
  --surf-sub:      rgba(255, 255, 255, 0.04); /* faint card tint */
  --surf-hover:    rgba(255, 255, 255, 0.07); /* hover state */
  --surf-raised:   rgba(255, 255, 255, 0.10); /* buscador ≈ #172f42 sobre panel */

  /* ── Borders ───────────────────────────────────────────────────────── */
  --bdr-strong:  #17324a;
  --bdr-default: #284660;                     /* inputs, scrollbars */
  --bdr-faint:   rgba(255, 255, 255, 0.06);   /* dividers, sec-title */
  --bdr-mid:     rgba(255, 255, 255, 0.08);
  --bdr-light:   rgba(255, 255, 255, 0.10);   /* tab group, sidebar */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --txt-pure:  #ffffff;
  --txt-hi:    #e6f0fc;                       /* títulos del mockup */
  --txt-sec:   #a5aebf;                       /* etiquetas del mockup */
  --txt-ter:   #8796a8;
  --txt-dim:   #70879d;                       /* placeholder del mockup */
  --txt-muted: #5f768c;
  --txt-faint: #3d546a;                       /* chevrons del mockup */
  --txt-label: #a5aebf;
  --txt-sub:   #70879d;

  /* ── Status / Data colors ──────────────────────────────────────────
     Info y success toman el azul y la menta de las barras del mockup.
     Danger y warn no aparecen ahí: se conservan.                       */
  --clr-success:      #99f8df;
  --clr-success-soft: #99f8df;
  --clr-success-05: rgba(153, 248, 223, 0.05);
  --clr-success-12: rgba(153, 248, 223, 0.12);
  --clr-success-20: rgba(153, 248, 223, 0.20);
  --clr-success-25: rgba(153, 248, 223, 0.25);
  --clr-success-30: rgba(153, 248, 223, 0.30);
  --clr-success-50: rgba(153, 248, 223, 0.50);

  --clr-info:      #79c7fa;
  --clr-info-soft: #79c7fa;
  --clr-info-12: rgba(121, 199, 250, 0.12);
  --clr-info-25: rgba(121, 199, 250, 0.25);
  --clr-info-40: rgba(121, 199, 250, 0.40);

  --clr-danger:      #ff3d6b;
  --clr-danger-soft: #ff3d6b;
  --clr-danger-12: rgba(255, 61, 107, 0.12);
  --clr-danger-25: rgba(255, 61, 107, 0.25);
  --clr-danger-40: rgba(255, 61, 107, 0.40);

  --clr-warn:      #ff8c50;
  --clr-warn-soft: #ff8c50;
  --clr-neutral:      #8796a8;
  --clr-neutral-soft: #8796a8;


  /* ── Semantic status pairs ─────────────────────────────────────────── */
  --status-ok-bg:   rgba(153, 248, 223, 0.10);
  --status-ok-fg:   #99f8df;
  --status-ok-bdr:  rgba(153, 248, 223, 0.30);
  --status-bad-bg:  rgba(255, 61, 107, 0.10);
  --status-bad-fg:  #8796a8;
  --status-bad-bdr: rgba(255, 61, 107, 0.30);
}