/* ─────────────────────────────────────────────────────────────────────────
 * colors.css — rmorenodotcom color system
 *
 * The brand is monochromatic: matte black + warm cream do ~85% of every
 * surface. Four matte category accents (coordinated S 38–60%, L 46–52%) carry
 * the rest — one per service family. The wordmark NEVER takes a category color;
 * only "the dot" rotates color by context.
 *
 * Layer 1 = primitives · Layer 2 = semantic aliases · dark surface overrides.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Layer 1 · Primitives ───────────────────────────────────────────── */

  /* Ink — blacks. Pure for body text; matte for large surfaces. */
  --ink: #0a0a0a;          /* pure — body text, max legibility */
  --ink-surface: #141414;  /* matte black — hero, footer, big dark fields */
  --ink-2: #222222;        /* matte secondary depth, dividers on dark */

  /* Paper — warm creams. */
  --paper: #f5f4ef;
  --paper-warm: #ebe9e2;
  --paper-warm-2: #efece4;
  --invert: #f5f4ef;       /* text/marks on dark surfaces */

  /* Neutrals */
  --mute: #6e6e6e;         /* secondary text */
  --mute-2: #a8a8a8;       /* tertiary text, captions on dark */
  --line: #e0ddd5;         /* hairline borders */
  --line-2: #d4d1c8;       /* stronger borders */

  /* Category accents — the four service families. */
  --cat-azure: hsl(212, 44%, 49%);   /* #477AB3 — Web */
  --cat-verde: hsl(95, 38%, 46%);    /* #618E48 — E-commerce */
  --cat-sienna: hsl(14, 44%, 51%);   /* #BA6849 — Brand (the house accent) */
  --cat-yellow: hsl(50, 60%, 52%);   /* #D2B440 — Recurring */

  --error: #d83a2c;

  /* ── Layer 2 · Semantic aliases ─────────────────────────────────────── */
  --text-primary: var(--ink);
  --text-mute: var(--mute);
  --text-invert: var(--invert);
  --text-mute-dark: var(--mute-2);

  --surface-paper: var(--paper);
  --surface-paper-alt: var(--paper-warm);
  --surface-paper-warm: var(--paper-warm-2);
  --surface-ink: var(--ink-surface);
  --surface-ink-depth: var(--ink-2);
  --surface-ink-pure: var(--ink);

  --border-default: var(--line);
  --border-strong: var(--line-2);
  --border-dark: var(--mute-2);

  --accent-web: var(--cat-azure);
  --accent-ecommerce: var(--cat-verde);
  --accent-brand: var(--cat-sienna);
  --accent-recurring: var(--cat-yellow);

  /* ── Layer 3 · Semantic STATE colors ────────────────────────────────────
   * The four category accents pull double duty as interaction states. Each
   * state ships four coordinated tokens so it reads correctly anywhere:
   *   --state-X         solid fill (buttons, dots, bars)
   *   --state-X-on      text/icon that sits ON the solid fill
   *   --state-X-soft    faint tint background (badges, banners, rows)
   *   --state-X-soft-fg legible text/icon ON the soft tint
   * Soft pairs are theme-aware — re-declared under [data-theme='dark'].
   *
   *   confirm  verde   → success, "confirmado", go
   *   process  yellow  → in progress, "en proceso", pending action
   *   waiting  azure   → waiting / info, "esperando confirmación"
   *   accent   sienna  → the house CTA / highlight (one per view)
   *   danger   error   → destructive / failed
   *   neutral  ink     → default, low-emphasis action
   * NOTE yellow is light — its `-on` is INK, never paper.                     */
  --state-confirm: var(--cat-verde);
  --state-confirm-on: var(--paper);
  --state-confirm-soft: color-mix(in srgb, var(--cat-verde) 13%, var(--surface));
  --state-confirm-soft-fg: color-mix(in srgb, var(--cat-verde) 68%, var(--ink));

  --state-process: var(--cat-yellow);
  --state-process-on: var(--ink);
  --state-process-soft: color-mix(in srgb, var(--cat-yellow) 16%, var(--surface));
  --state-process-soft-fg: color-mix(in srgb, var(--cat-yellow) 62%, var(--ink));

  --state-waiting: var(--cat-azure);
  --state-waiting-on: var(--paper);
  --state-waiting-soft: color-mix(in srgb, var(--cat-azure) 13%, var(--surface));
  --state-waiting-soft-fg: color-mix(in srgb, var(--cat-azure) 70%, var(--ink));

  --state-accent: var(--cat-sienna);
  --state-accent-on: var(--paper);
  --state-accent-soft: color-mix(in srgb, var(--cat-sienna) 13%, var(--surface));
  --state-accent-soft-fg: color-mix(in srgb, var(--cat-sienna) 70%, var(--ink));

  --state-danger: var(--error);
  --state-danger-on: var(--paper);
  --state-danger-soft: color-mix(in srgb, var(--error) 12%, var(--surface));
  --state-danger-soft-fg: color-mix(in srgb, var(--error) 66%, var(--ink));

  --state-neutral: var(--fg);
  --state-neutral-on: var(--bg);
  --state-neutral-soft: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --state-neutral-soft-fg: var(--ink);

  /* ── Active surface aliases — flip in dark mode below ───────────────── */
  --bg: var(--paper);
  --fg: var(--ink);
  --surface: var(--paper);
  --surface-alt: var(--paper-warm);

  /* Elevation ramp — body → card → raised. Distinct in BOTH themes so panels
   * never melt into the page. Pair each with --line for the hairline edge.  */
  --surface-page: var(--paper);      /* the body / full-bleed sections      */
  --surface-card: #ffffff;           /* lifted card on warm body            */
  --surface-raised: #ffffff;         /* popovers, menus (add shadow)        */
  --surface-sunken: var(--paper-warm);/* wells, inset fields                */

  /* Dynamic cursor-adaptive accent (set per-section by JS in the product). */
  --cursor-color: var(--ink);
}

/* ─── Dark mode · manual override (persists in localStorage in the app) ── */
[data-theme='dark'] {
  --bg: #121212;
  --fg: var(--paper);
  --surface: #121212;
  --surface-alt: #1e1e1e;
  --line: #2c2c2c;
  --line-2: #3a3a3a;
  --mute: #9a9a9a;
  --mute-2: #c0c0c0;
  --text-primary: var(--paper);
  --text-mute: #9a9a9a;
  --border-default: #2c2c2c;
  --border-strong: #3a3a3a;

  /* Elevation ramp · dark — each step a real luminance lift off #121212. */
  --surface-page: #121212;
  --surface-card: #1e1e1e;
  --surface-raised: #262626;
  --surface-sunken: #0c0c0c;

  /* Soft state tints re-mixed for a dark base: more accent, lighter text. */
  --state-confirm-soft: color-mix(in srgb, var(--cat-verde) 24%, var(--surface));
  --state-confirm-soft-fg: color-mix(in srgb, var(--cat-verde) 48%, var(--paper));
  --state-process-soft: color-mix(in srgb, var(--cat-yellow) 24%, var(--surface));
  --state-process-soft-fg: color-mix(in srgb, var(--cat-yellow) 60%, var(--paper));
  --state-waiting-soft: color-mix(in srgb, var(--cat-azure) 26%, var(--surface));
  --state-waiting-soft-fg: color-mix(in srgb, var(--cat-azure) 50%, var(--paper));
  --state-accent-soft: color-mix(in srgb, var(--cat-sienna) 24%, var(--surface));
  --state-accent-soft-fg: color-mix(in srgb, var(--cat-sienna) 52%, var(--paper));
  --state-danger-soft: color-mix(in srgb, var(--error) 24%, var(--surface));
  --state-danger-soft-fg: color-mix(in srgb, var(--error) 56%, var(--paper));
  --state-neutral-soft: color-mix(in srgb, var(--paper) 10%, var(--surface));
  --state-neutral-soft-fg: var(--paper);
}

/* ─── Light mode · explicit scope ────────────────────────────────────────
 * :root is light by default, but this lets a subtree force light even on a
 * dark page (e.g. side-by-side theme specimens). Mirrors the :root values
 * that the dark scope overrides. */
[data-theme='light'] {
  --bg: var(--paper);
  --fg: var(--ink);
  --surface: var(--paper);
  --surface-alt: var(--paper-warm);
  --line: #e0ddd5;
  --line-2: #d4d1c8;
  --mute: #6e6e6e;
  --mute-2: #a8a8a8;
  --text-primary: var(--ink);
  --text-mute: #6e6e6e;
  --border-default: #e0ddd5;
  --border-strong: #d4d1c8;

  --surface-page: var(--paper);
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--paper-warm);

  --state-confirm-soft: color-mix(in srgb, var(--cat-verde) 13%, var(--surface));
  --state-confirm-soft-fg: color-mix(in srgb, var(--cat-verde) 68%, var(--ink));
  --state-process-soft: color-mix(in srgb, var(--cat-yellow) 16%, var(--surface));
  --state-process-soft-fg: color-mix(in srgb, var(--cat-yellow) 62%, var(--ink));
  --state-waiting-soft: color-mix(in srgb, var(--cat-azure) 13%, var(--surface));
  --state-waiting-soft-fg: color-mix(in srgb, var(--cat-azure) 70%, var(--ink));
  --state-accent-soft: color-mix(in srgb, var(--cat-sienna) 13%, var(--surface));
  --state-accent-soft-fg: color-mix(in srgb, var(--cat-sienna) 70%, var(--ink));
  --state-danger-soft: color-mix(in srgb, var(--error) 12%, var(--surface));
  --state-danger-soft-fg: color-mix(in srgb, var(--error) 66%, var(--ink));
  --state-neutral-soft: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --state-neutral-soft-fg: var(--ink);
}

/* ─── Dark mode · follow the OS ─────────────────────────────────────────
 * Dark mode is driven by the [data-theme='dark'] scope above (the registered
 * contract). To ALSO follow the operating system automatically, a consuming
 * app can mirror that scope behind a media query in its OWN stylesheet, e.g.:
 *
 *   @media (prefers-color-scheme: dark) {
 *     :root:not([data-theme='light']) { ...same overrides as [data-theme='dark']... }
 *   }
 *
 * It's intentionally kept out of the token closure so every override resolves
 * to a single, registerable scope.
 * ─────────────────────────────────────────────────────────────────────── */