/* ============================================================
   Praxiom Design Tokens — Graphite & Brass
   Source of truth: docs/branding/praxiom-shell-spec.html
   ============================================================ */

:root,
:root[data-theme="light"] {
    /* --- Graphite (neutral scale, warm undertone) ---
       Pulido 2026-07-14 (refs dock.cool / allgoodstudio): la escala vira de gris azulado
       a gris PIEDRA calido y el lienzo baja a tono papel — las tarjetas blancas flotan
       sobre el fondo en vez de fundirse. Tinta casi negra calida para display. */
    --color-graphite-900: #191713;
    --color-graphite-800: #211E18;
    --color-graphite-700: #38342C;
    --color-graphite-600: #615C50;
    --color-graphite-500: #7E7869;
    --color-carbon: #46423A;   /* gris carbon para badges (entre graphite-700 y -600); fijo, no cambia en dark */
    --color-graphite-400: #BAB4A7;
    --color-graphite-300: #DCD7CC;
    --color-graphite-200: #E6E2D8;
    --color-graphite-100: #EFECE4;
    --color-graphite-50:  #F5F3ED;

    /* --- Brass (accent scale) --- */
    --color-brass-700: #7A5F37;
    --color-brass-600: #B08D57;
    --color-brass-500: #C9A876;
    --color-brass-400: #DDC299;
    --color-brass-300: #EFDFC4;

    /* --- Semantic --- */
    --color-success: #2E7D5B;
    --color-warning: #B8741B;
    --color-error:   #9B2D2D;
    --color-error-soft: #F7EAEA;  /* tinte suave de --color-error (fondos de confirmacion/errores destructivos) */
    --color-info:    #2C5F8D;
    --color-info-soft: #DCE8F5;   /* tinte suave de --color-info (fondos de chips/avisos informativos) */

    /* --- Surfaces --- */
    --surface-primary: #ffffff;
    --surface-secondary: var(--color-graphite-50);
    --surface-elevated: #ffffff;
    --border-default: var(--color-graphite-200);
    --border-subtle: var(--color-graphite-300);
    --text-primary: var(--color-graphite-800);
    --text-heading: var(--color-graphite-900);
    --text-secondary: var(--color-graphite-600);
    --text-muted: var(--color-graphite-500);
    --text-on-dark: #ffffff;

    /* --- Typography --- */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    --font-icon:  "Material Symbols Rounded";
    --serif-display-tracking: -0.02em;   /* tracking unico para numeros hero serif (74h 24m, dia del calendario) */

    /* --- Wordmark (activo de marca, bloqueado) --- */
    --wordmark-family:   var(--font-sans);
    --wordmark-weight:   600;
    --wordmark-tracking: -0.025em;

    /* --- Shadows --- (calidas y mas difusas: la tarjeta flota, no "pesa") */
    --shadow-sm: 0 2px 6px rgba(33, 28, 18, .07),
                 0 1px 2px rgba(33, 28, 18, .04);
    --shadow-md: 0 10px 24px rgba(33, 28, 18, .10),
                 0 4px 8px rgba(33, 28, 18, .05);
    --shadow-lg: 0 20px 48px rgba(33, 28, 18, .14),
                 0 8px 16px rgba(33, 28, 18, .06);

    /* --- Border radius --- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  12px;
    --radius-pill: 999px;

    /* --- Motion vocabulary --- */
    /* Curvas de easing */
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);   /* firma de la casa: entradas y expansiones */
    --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);     /* movimientos bidireccionales (hover, toggles) */
    --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1); /* overshoot minimo: SOLO micro-feedback de tap/exito */
    --ease-out:       var(--ease-out-quint);            /* alias: vuelve real el token que solo vivia por su fallback (CmdK/TimerModal) */
    /* Escala de duraciones */
    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 240ms;
    --dur-4: 320ms;
    --dur-5: 480ms;

    /* --- Transitions (compat) — ahora con curva estandar --- */
    --transition-fast: var(--dur-1) var(--ease-standard);
    --transition-med:  var(--dur-2) var(--ease-standard);

    /* --- Accessibility --- */
    --focus-ring: 0 0 0 3px rgba(176, 141, 87, 0.3);

    /* --- Sidebar / Shell --- */
    --sidebar-width-expanded: 176px;
    --sidebar-width-collapsed: 67px;
    --sidebar-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-bg: var(--color-graphite-50);
    --sidebar-border: var(--color-graphite-200);
    --nav-item-active-bg: #FFFFFF;
    --nav-item-active-accent: var(--color-brass-600);
    --main-bar-height: 56px;
    --main-canvas-max-width: 1080px;
    --main-canvas-padding: 20px 56px 48px;
    --popover-min-width: 220px;
    --dropdown-z-index: 10;

    /* --- Bootstrap overrides --- */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-graphite-800);
    --bs-body-bg: var(--color-graphite-50);
}

/* TODO: dark mode — sprint futuro. Descomentar y ajustar valores.
:root[data-theme="dark"] {
    --color-graphite-900: #F2F0EA;
    --color-graphite-800: #E8E5DD;
    --color-graphite-700: #DDDFE3;
    --color-graphite-600: #B5BAC4;
    --color-graphite-500: #8B92A1;
    --color-graphite-400: #5A6072;
    --color-graphite-300: #2A3142;
    --color-graphite-200: #1E2333;
    --color-graphite-100: #1A1F2E;
    --color-graphite-50:  #14171F;

    --color-brass-700: #DDC299;
    --color-brass-600: #C9A876;
    --color-brass-500: #B08D57;
    --color-brass-400: #8B6E40;
    --color-brass-300: #6B5530;

    --surface-primary: #1A1F2E;
    --surface-secondary: #14171F;
    --surface-elevated: #232838;
    --border-default: #2A3142;
    --border-subtle: #353D50;
    --text-primary: #E8E5DD;
    --text-heading: #F2F0EA;
    --text-secondary: #B5BAC4;
    --text-muted: #8B92A1;
    --text-on-dark: #14171F;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .20),
                 0 1px 2px rgba(0, 0, 0, .15);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, .30),
                 0 4px 8px rgba(0, 0, 0, .20);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .40),
                 0 8px 16px rgba(0, 0, 0, .25);

    --focus-ring: 0 0 0 3px rgba(201, 168, 118, 0.4);

    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-graphite-800);
    --bs-body-bg: var(--color-graphite-50);
}
*/

/* ============================================================
   Animations
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fade-in-up {
    animation: fadeInUp var(--dur-4) var(--ease-out-quint) both;
}

.stagger > * {
    animation: fadeInUp var(--dur-4) var(--ease-out-quint) both;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; }
.stagger > *:nth-child(8) { animation-delay: 350ms; }

/* Sobriedad: sin movimiento si el usuario lo pidio. */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .stagger > * {
        animation: none;
    }
}

/* ============================================================
   Base selectors
   ============================================================ */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--surface-secondary);
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.025em;   /* tracking display apretado (refs dock.cool/allgood) */
    line-height: 1.12;
    color: var(--text-heading);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-brass-700);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1px;
    background: var(--color-brass-600);
    vertical-align: middle;
    margin-right: 8px;
}

.text-mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}

/* Simbolo de moneda de una sola linea (el $ del serif Newsreader es cifrao doble-raya).
   GLOBAL a proposito: el Indicador renderiza <span class="cur">$</span> dentro de varios
   componentes hijos; un .cur scoped por componente no aplicaria a los demas. */
.cur {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.92em;
}

/* Icon font — defensivo. Ambas clases reciben la fuente de iconos para que NUNCA
   se renderice el texto del ligature ("schedule", "add", "lock", "pause") en vez del
   glifo. Muchos spans usan .material-symbols-rounded (la clase oficial de Google) y
   otros usan el alias corto .msr; las hojas cargadas no garantizaban la fuente en la
   primera. 'liga' activa las ligaturas que convierten el texto en icono. */
.msr,
.material-symbols-rounded {
    font-family: var(--font-icon);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.msr {
    font-family: var(--font-icon);
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.msr.fill {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.msr.bold {
    font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;
}

/* ============================================================
   Interactive element defaults
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

input, select, textarea {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ============================================================
   Utility: visually hidden (accessible screen-reader text)
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}