/* ============================================================ ProRatto · Design Tokens — v1.0 (Junio 2026) Identidad visual de la plataforma ProRatto (Ratto Hnos · John Deere) Extraído de las apps reales (Shell, Cotizador, Toolbox, Go/No-Go). Uso: ó ============================================================ */ :root, :root[data-theme="light"] { /* ---- MARCA (primarios) ---- */ --pr-green: #367C2B; /* Verde John Deere — color primario de marca */ --pr-green-dark: #2A5F22; /* Verde oscuro — gradientes, texto sobre amarillo */ --pr-green-deep: #1F4B19; /* Verde profundo — headers intensos */ --pr-green-light: #4A9B3D; /* Verde claro — hovers, acentos suaves */ --pr-yellow: #FFDE00; /* Amarillo John Deere — acento de energía */ --pr-yellow-dark: #F0CE00; /* Amarillo oscuro — hover de acento */ --pr-gold: #D6B95C; /* Dorado — detalle premium / acento en dark */ /* ---- NEUTRALES ---- */ --pr-ink: #1A1A1A; /* Texto principal */ --pr-grey-900: #333333; --pr-grey-600: #666666; /* Texto secundario / muted */ --pr-line: #E5E5E5; /* Bordes y divisores */ --pr-bg: #F5F5F5; /* Fondo de página */ --pr-surface: #FFFFFF; /* Tarjetas / superficies */ /* ---- SEMÁNTICOS ---- */ --pr-success: #367C2B; /* OK / aprobado (verde de marca) */ --pr-warning: #B7791F; /* Atención (ámbar legible) */ --pr-danger: #C8102E; /* Error / rechazado (rojo JD) */ --pr-info: #1D5FA8; /* Informativo / enlaces */ --pr-success-bg: #E6F4EA; --pr-warning-bg: #FBF1DC; --pr-danger-bg: #FBE9EC; --pr-info-bg: #E6F1FB; /* ---- ELEVACIÓN ---- */ --pr-shadow-sm: 0 2px 8px rgba(0,0,0,.08); --pr-shadow-md: 0 4px 16px rgba(0,0,0,.12); --pr-shadow-lg: 0 8px 32px rgba(0,0,0,.16); --pr-shadow-glass: 0 20px 60px rgba(0,0,0,.50); /* ---- GRADIENTES DE FIRMA ---- */ --pr-grad-header: linear-gradient(135deg, #367C2B 0%, #2A5F22 100%); --pr-grad-deep: linear-gradient(160deg, #2A5F22 0%, #1A3818 100%); color-scheme: light; } /* ============================================================ DARK MODE Regla de marca: en oscuro, el ACENTO primario pasa de verde a DORADO. ============================================================ */ :root[data-theme="dark"] { --pr-green: #D6B95C; /* el acento de marca se vuelve dorado */ --pr-green-dark: #CBAD4F; --pr-green-deep: #B79B3F; --pr-green-light: #E6D49A; --pr-yellow: #E6C24A; /* amarillo suavizado para no encandilar */ --pr-yellow-dark: #CBA93C; --pr-gold: #D6B95C; --pr-ink: #E6EAEF; /* texto claro */ --pr-grey-900: #C2CAD3; --pr-grey-600: #9AA3AE; --pr-line: #2A2F37; /* bordes oscuros */ --pr-bg: #0F1114; /* fondo profundo */ --pr-surface: #181B20; /* tarjetas oscuras */ --pr-success: #5CC95A; --pr-warning: #E0B458; --pr-danger: #F2657A; --pr-info: #6FA8E6; /* Los fondos semánticos NO tenían par oscuro: se quedaban en el tinte claro (#E6F4EA y compañía) y el texto semántico de dark —que es claro— quedaba ilegible encima. Divergencia anotada respecto del manual v1.0, que no los define para oscuro; se resuelve del lado de la accesibilidad. Cada uno es un tinte de su color sobre la superficie oscura, verificado ≥4,5:1 contra su color de texto. */ --pr-success-bg: #17301A; --pr-warning-bg: #33291A; --pr-danger-bg: #331A20; --pr-info-bg: #16283A; --pr-shadow-sm: 0 2px 8px rgba(0,0,0,.45); --pr-shadow-md: 0 6px 20px rgba(0,0,0,.55); --pr-shadow-lg: 0 12px 40px rgba(0,0,0,.65); --pr-grad-header: linear-gradient(135deg, #1F4B19 0%, #0F1114 100%); --pr-grad-deep: linear-gradient(160deg, #1A3818 0%, #0B0D10 100%); color-scheme: dark; } /* ============================================================ TIPOGRAFÍA Oficial: JD Sans Pro (propietaria John Deere) — misma fuente que la suite (Presupuestador/Cotizador). Fallback libre: Inter → system. ============================================================ */ @font-face { font-family: 'JDSansPro'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/JDSansPro-Book.woff2') format('woff2'); } @font-face { font-family: 'JDSansPro'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/JDSansPro-Bold.woff2') format('woff2'); } :root { --pr-font-sans: 'JDSansPro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --pr-font-cond: var(--pr-font-sans); --pr-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala tipográfica */ --pr-fs-display: 32px; --pr-lh-display: 1.10; --pr-fs-h1: 28px; --pr-lh-h1: 1.15; --pr-fs-h2: 22px; --pr-lh-h2: 1.20; --pr-fs-h3: 17px; --pr-lh-h3: 1.25; --pr-fs-h4: 14px; --pr-lh-h4: 1.30; --pr-fs-body: 15px; --pr-lh-body: 1.50; --pr-fs-small: 13px; --pr-lh-small: 1.45; --pr-fs-micro: 11px; --pr-lh-micro: 1.40; --pr-fw-regular: 400; --pr-fw-medium: 500; --pr-fw-bold: 700; /* Labels / mayúsculas distintivas */ --pr-label-spacing: .05em; /* letter-spacing de labels uppercase */ /* ---- FORMA ---- */ --pr-radius-sm: 4px; /* inputs, botones */ --pr-radius-md: 8px; /* tarjetas, modales chicos */ --pr-radius-lg: 14px; /* modales, contenedores grandes */ --pr-radius-xl: 22px; /* glass / segmented control */ --pr-radius-pill: 999px; /* chips, badges, toggles */ --pr-border: 1px solid var(--pr-line); --pr-border-2: 2px solid var(--pr-line); /* ---- ESPACIADO (escala base 4) ---- */ --pr-space-1: 4px; --pr-space-2: 8px; --pr-space-3: 12px; --pr-space-4: 16px; --pr-space-5: 20px; --pr-space-6: 24px; --pr-space-8: 32px; --pr-space-12: 48px; /* ---- MOTION ---- */ --pr-ease: cubic-bezier(.4, 0, .2, 1); --pr-dur-fast: .15s; /* hover */ --pr-dur-base: .20s; /* focus, fade */ --pr-dur-slow: .30s; /* modal slide-up */ --pr-tap-scale: .97; /* transform al presionar */ } /* ============================================================ RESET IMPRESCINDIBLE Los controles NO heredan font-family → caen en Arial. Incluir SIEMPRE en cada app single-file. ============================================================ */ button, input, select, textarea, optgroup { font-family: inherit; }