/* ============================================================= Dinalight Design System — Tokens ------------------------------------------------------------- Source of truth for color, type, spacing, radius, shadow. All Dinalight products (Dina 360 modules) are dark-themed, industrial, high-contrast, with the Dinalight red as the single brand accent. ============================================================= */ /* ---- Web fonts ------------------------------------------------- The Dina 360 codebase loads Barlow + Barlow Condensed (tablet surfaces) and DM Sans + DM Mono (wizard + dashboard surfaces). Both via Google Fonts. We keep both in the system but Barlow Condensed is the canonical "display" face — it carries the industrial workshop feel that matches the brand. */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); :root { /* ===== COLOR — base palette ===== */ /* Brand red — the single accent. All "primary action" surfaces use this. Source: PROMPT_CLAUDE_CODE.md → "Rojo Dinalight" */ --dina-red: #D42B2B; --dina-red-glow: rgba(212, 43, 43, 0.15); /* soft fill / press states */ --dina-red-border: rgba(212, 43, 43, 0.40); /* borders on dark */ /* Neutrals — true-black anchored dark theme. Each step is intentionally narrow (~6pt L*) so the surfaces read as a quiet stack instead of high-contrast cards. */ --bg: #0c0c0c; /* canvas */ --s1: #161616; /* topbar / chrome */ --s2: #1f1f1f; /* inset surface, inputs, hover */ --s3: #282828; /* raised, e.g. corte items inside DONE */ --border: #2d2d2d; /* 1px hairline */ /* Text */ --text: #efefef; /* body */ --soft: #888888; /* secondary */ --muted: #555555; /* tertiary, hints */ --small: #444444; /* labels, captions on dark */ /* ===== COLOR — semantic / state ===== */ /* GREEN — RUNNING crono, "presente" attendance, success. The cronómetro card paints its lower half deep green (#052e16) with a #4ade80 digit. */ --green: #22c55e; --green-text: #4ade80; /* on dark surface */ --green-bg: rgba(34, 197, 94, 0.12); --green-deep: #052e16; /* clock-block bg when RUNNING */ --green-btn-bg: #14532d; --green-btn-border: #166534; --green-btn-text: #86efac; --green-btn-shadow: #0a3d1e; /* used as 4px bottom shadow */ /* RED (state) — IDLE crono, "ausente", danger, danger-3D button. Distinct from --dina-red: muted brick tones for full panels, reserves the brighter brand red for accents/buttons. */ --red-deep: #3d1515; /* card-top fill when IDLE/CORTE */ --red-deep-border: #7f1d1d; /* card border when IDLE/CORTE */ --red-btn-bg: #7f1d1d; --red-btn-border: #991b1b; --red-btn-text: #fca5a5; --red-btn-shadow: #5a1212; /* used as 4px bottom shadow */ --red-name: #fca5a5; /* op-name in IDLE */ --red-tipo: #f87171; /* tarea-tipo in IDLE */ /* AMBER — wizard accent, "media jornada", warning, dashboard KPI. The reporting wizard (index.html) uses amber as its primary accent rather than red. Both are valid for non-tablet UIs. */ --amber: #f5a623; --amber-text: #f59e0b; --amber-bg: rgba(245, 158, 11, 0.12); --amber-deep: #2a1f00; /* BLUE — "instalación", info, dashboard secondary KPI */ --blue: #3b82f6; --blue-text: #5b9cf6; --blue-light: #60a5fa; /* tarea-tipo in RUNNING crono */ --blue-bg: rgba(59, 130, 246, 0.12); --blue-deep: #0d1f3d; /* PURPLE — "flete", partida pills (catalog reference) */ --purple: #a78bfa; --purple-deep: #1d1040; --purple-pill: #c084fc; /* tarea-partida in IDLE card */ /* ===== TYPE — base ===== */ --font-sans: 'Barlow', system-ui, sans-serif; /* body */ --font-display: 'Barlow Condensed', system-ui, sans-serif; /* industrial display */ --font-ui: 'DM Sans', system-ui, sans-serif; /* wizard + dashboard */ --font-mono: 'DM Mono', ui-monospace, monospace; /* dashboard numbers */ /* ===== SPACING / RADIUS / SHADOW ===== */ --r-sm: 8px; /* small buttons, sr-pitch chip */ --r: 12px; /* default — cards, inputs, modals */ --r-md: 14px; /* dashboard cards */ --r-lg: 16px; /* hero / modal */ --r-pill: 20px; /* pills + badges */ /* 3D button shadow — defining tablet's INICIAR / DETENER affordance. Always a 4px solid-color bottom shadow, never a soft blur. */ --shadow-3d-red: 0 4px 0 var(--red-btn-shadow); --shadow-3d-green: 0 4px 0 var(--green-btn-shadow); /* Hairline border baseline */ --hairline: 1px solid var(--border); } /* ============================================================= Semantic type styles Use these classes when laying out UI, not raw font-size. The tablet (cronómetro) uses --font-display almost everywhere; the wizard + dashboard use --font-ui. ============================================================= */ .ds-display-xl { font-family: var(--font-display); font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .ds-display-lg { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: 0; } .ds-display-md { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } .ds-display-sm { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; } .ds-display-xs { font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; } .ds-h1 { font-family: var(--font-ui); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); } .ds-h2 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); } .ds-h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text); } .ds-body { font-family: var(--font-ui); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text); } .ds-body-sm { font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text); } .ds-label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .ds-label-sm { font-family: var(--font-ui); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .ds-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; } .ds-mono-lg { font-family: var(--font-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ============================================================= Reset baseline (optional — every Dina HTML applies this) ============================================================= */ .ds-reset *, .ds-reset *::before, .ds-reset *::after { box-sizing: border-box; margin: 0; padding: 0; } .ds-reset { background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }