/* =============================================================
   DESIGN TOKENS — the only place a design value is defined.
   Every stylesheet and every view consumes these; none redefines them.
   Plan: docs/plans/2026-10-11-una-sola-voz/step-01-tokens.md
   ============================================================= */
:root {
    /* ---- Brand: identity only. Pink is warmth, never an action. ---- */
    --brand-primary: #00a29a;
    --brand-primary-dark: #007d77;
    --brand-primary-light: #e7fbf7;
    --brand-accent: #E8A0AC;
    --brand-accent-glow: rgba(232, 160, 172, 0.22);

    /* ---- Action: what a finger can press. White text on it passes 4.5:1. ---- */
    --action: #007d77;
    --action-hover: #00655f;
    --action-text: #ffffff;
    --action-ring: rgba(0, 162, 154, 0.35);

    /* ---- Text ---- */
    --text-primary: #2D3748;
    --text-secondary: #4a5568;
    --text-muted: #5e6b80;
    --text-inverse: #ffffff;

    /* ---- Surfaces ---- */
    --bg-page: #f6f8fa;
    --bg-card: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-input: #F7FAFC;
    --bg-scrim: rgba(17, 24, 39, 0.45);
    --border-default: #E2E8F0;
    --border-light: #edf1f6;
    --border-strong: #cbd5e1;

    /* ---- States: one tone per meaning (fg on its own bg passes 4.5:1) ---- */
    --ok-fg: #1f7a4f;      --ok-bg: #e6f6ed;      --ok-border: #b7e2c8;
    --wait-fg: #8a5a0b;    --wait-bg: #fff7e7;    --wait-border: #f5dfa8;
    --fail-fg: #b3303f;    --fail-bg: #fdebec;    --fail-border: #f2c0c6;
    --lock-fg: #475569;    --lock-bg: #f1f5f9;    --lock-border: #e2e8f0;
    --info-fg: #2d5fb5;    --info-bg: #e9f0ff;    --info-border: #c7d7f5;
    --ok: var(--ok-fg);
    --danger-solid: #b3303f;
    --danger-solid-hover: #96202e;

    /* ---- Type ---- */
    --font-heading: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;

    /* ---- Space ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* ---- Shape ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* ---- Depth ---- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.18);

    /* ---- Motion ---- */
    --mov: 140ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Touch and layers ---- */
    --tap: 48px;
    --control-h: 44px;   /* fields and buttons; becomes --tap on phones and touch screens */
    --control-fs: 14px;  /* 16px on phones so focusing a field never zooms the page */
    --bar-h: 64px;
    --z-nav: 1000;
    --z-sheet: 3000;
    --z-toast: 4000;
    --sab: env(safe-area-inset-bottom, 0px);

    /* =========================================================
       LEGACY ALIASES — do not use in new code.
       Older screens and the Filemón Office reader ask for these
       names; each one points at a canonical token above.
       ========================================================= */
    --vd-agua: var(--action);
    --vd-menta: #6ee7b7;
    --tx-fuerte: var(--text-primary);
    --tx-normal: var(--text-primary);
    --tx-suave: var(--text-muted);
    --tx-rotulo: var(--text-secondary);
    --tx-invertido: var(--text-inverse);
    --border-main: var(--border-default);
    --borde-control: var(--border-strong);
    --bg-card-subtle: var(--bg-subtle);
    --bg-main: var(--bg-page);
    --bg-light-gray: var(--bg-subtle);
    --border-gray: var(--border-default);
    --border-focus: var(--brand-primary);
    --text-main: var(--text-primary);
    --slate-text: var(--text-secondary);
    --slate-muted: var(--text-muted);
    --primary: var(--action);
    --success: var(--ok-fg);
    --danger: var(--fail-fg);
    --danger-text: var(--fail-fg);
    --danger-bg: var(--fail-bg);
    --danger-border: var(--fail-border);
    --warning: var(--wait-fg);
    --warning-text: var(--wait-fg);
    --warning-bg: var(--wait-bg);
    --warning-border: var(--wait-border);
    --transit-text: var(--info-fg);
    --transit-bg: var(--info-bg);
    --transit-border: var(--info-border);
    --color-success: #7FB8A6;
    --color-success-glow: rgba(127, 184, 166, 0.15);
    --color-warning: #E5A87B;
    --color-warning-bg: var(--wait-bg);
    --color-danger: #D66F7C;
    --color-danger-bg: var(--fail-bg);
    --color-info: #4185d8;
    --muted: var(--text-muted);
    --fo-zoom: 1;
}

/* Phones and touch screens: every control is a full thumb target. */
@media (max-width: 767px), (pointer: coarse) {
    :root {
        --control-h: 48px;
        --control-fs: 16px;
    }
}