/* ============================================================ Portia — tokens.css · Propuesta 1a "TOGA" Institucional · autoridad de tribunal ------------------------------------------------------------ Marca: Azul #0F2D48 (principal) · Dorado #D0AF64 (acento) Base: Niebla #F2F5F8 (blanco frío, matiz pizarra) Tipografía: Source Serif 4 (display) · Inter (texto) Personalidad: compacto, alto contraste, sombras discretas. CSS nativo. Todo en :root. Sin @import, sin nesting. ============================================================ */ :root { /* =========================================================== 1 · COLOR — Escalas primitivas (no usar directo en UI) =========================================================== */ /* Azul marca — principal */ --navy-50: #EAEFF4; --navy-100: #CBD8E3; --navy-200: #9DB1C4; --navy-300: #6683A0; --navy-400: #3A5B7C; --navy-500: #1E4266; --navy-600: #0F2D48; /* marca */ --navy-700: #0B2338; --navy-800: #081A2A; --navy-900: #05111C; /* Dorado — acento */ --gold-50: #FAF4E6; --gold-100: #F2E4C2; --gold-200: #E6CF97; --gold-300: #D0AF64; /* acento */ --gold-400: #B99444; --gold-500: #A07C34; --gold-600: #7E5F26; /* Niebla / Slate — fondos fríos */ --mist-50: #FBFCFE; --mist-100: #F7F9FB; /* base */ --mist-200: #EFF3F7; --mist-300: #DBE2E9; --mist-400: #C4CedA; /* Ink — texto pizarra */ --ink-900: #16222F; --ink-800: #26333F; --ink-700: #3B4855; --ink-600: #4C5A67; --ink-500: #6A7783; --ink-400: #7C8996; --ink-300: #A4AFBB; /* Semántico raw */ --color-success: #2E7B57; --color-warning: #9A7220; --color-danger: #B23B39; --color-info: #1E4266; --color-success-soft: #E7F1EB; --color-warning-soft: #F5EEDB; --color-danger-soft: #F7E6E5; --color-info-soft: #E7EEF5; /* =========================================================== 2 · COLOR — Tokens semánticos (usar en componentes) =========================================================== */ /* Fondos / superficies */ --bg: var(--mist-100); --bg-sunken: var(--mist-200); --surface: #FFFFFF; --surface-2: var(--mist-50); --overlay: rgba(15, 45, 72, 0.45); --scrim: rgba(15, 45, 72, 0.62); /* Texto */ --text: var(--ink-900); --text-2: var(--ink-600); --text-3: var(--ink-400); --text-muted: var(--ink-500); --text-disabled: var(--ink-300); --text-on-primary: #FFFFFF; --text-on-accent: var(--navy-600); --text-link: var(--navy-500); --text-link-hover: var(--navy-600); /* Bordes */ --border: var(--mist-300); --border-2: var(--mist-200); --border-strong: var(--ink-300); --border-focus: var(--navy-600); --divider: var(--mist-300); /* Primario (azul) */ --primary: var(--navy-600); --primary-hover: var(--navy-700); --primary-active: var(--navy-800); --primary-soft: var(--navy-50); --primary-text-on: #FFFFFF; /* Acento (dorado) — parsimonioso: filetes, eyebrows, destacados */ --accent: var(--gold-300); --accent-hover: var(--gold-400); --accent-active: var(--gold-500); --accent-soft: var(--gold-50); --accent-strong: var(--gold-500); --accent-text-on: var(--navy-600); /* Estados */ --success: var(--color-success); --success-soft: var(--color-success-soft); --warning: var(--color-warning); --warning-soft: var(--color-warning-soft); --danger: var(--color-danger); --danger-soft: var(--color-danger-soft); --info: var(--color-info); --info-soft: var(--color-info-soft); /* =========================================================== 2b · DOMINIO LEGAL — estados de expediente =========================================================== */ --estado-activo-bg: var(--color-success-soft); --estado-activo-fg: var(--color-success); --estado-pausa-bg: var(--color-warning-soft); --estado-pausa-fg: var(--color-warning); --estado-cerrado-bg: #ECEFF3; --estado-cerrado-fg: #657585; --estado-urgente-bg: var(--color-danger-soft); --estado-urgente-fg: var(--color-danger); /* Audiencias / calendario */ --audiencia-hoy-bg: var(--navy-600); --audiencia-hoy-fg: #FFFFFF; --audiencia-marca-bg: var(--navy-600); /* evento propio */ --audiencia-clave-bg: var(--gold-300); /* audiencia / plazo clave */ --cal-celda-bg: var(--mist-200); --cal-grid-line: var(--mist-300); /* =========================================================== 2c · ALIAS DE COMPATIBILIDAD — tokens que el CSS heredado de Sesiona aún referencia; mapeados a la paleta Toga para que nada quede sin color al migrar el design system. =========================================================== */ --danger-text: var(--danger); --success-text: var(--success); --warning-text: var(--warning); --info-text: var(--info); --ink-muted: var(--text-muted); --accent-soft-2: var(--gold-100); --bg-2: var(--bg-sunken); /* =========================================================== 3 · TIPOGRAFÍA =========================================================== */ --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 — denso */ --text-base: 0.9375rem; /* 15 — body */ --text-md: 1rem; /* 16 */ --text-lg: 1.1875rem; /* 19 */ --text-xl: 1.4375rem; /* 23 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.125rem; /* 34 */ --text-4xl: 2.75rem; /* 44 */ --text-5xl: 3.5rem; /* 56 */ --text-display: clamp(2.25rem, 5vw + 1rem, 4rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-body: 400; --weight-display: 600; --weight-label: 600; --leading-tight: 1.15; --leading-snug: 1.3; --leading-base: 1.5; --leading-relaxed: 1.62; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.15em; /* =========================================================== 4 · ESPACIADO — base 4px, densidad alta =========================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --space-11: 5rem; --space-12: 6rem; --gutter-mobile: 1rem; --gutter-tablet: 1.5rem; --gutter-desktop: 2rem; --container-sm: 480px; --container-md: 720px; --container-lg: 1024px; --container-xl: 1280px; /* =========================================================== 5 · RADIOS — apretados, institucionales =========================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; --radius-circle: 50%; --border-w: 1px; --border-w-strong: 1.5px; --border-w-focus: 2px; /* =========================================================== 6 · SOMBRAS — discretas, frías =========================================================== */ --shadow-xs: 0 1px 2px rgba(15,45,72,.06); --shadow-sm: 0 1px 2px rgba(15,45,72,.07), 0 1px 0 rgba(15,45,72,.03); --shadow-md: 0 4px 12px rgba(15,45,72,.08), 0 1px 3px rgba(15,45,72,.05); --shadow-lg: 0 10px 26px rgba(15,45,72,.10), 0 3px 8px rgba(15,45,72,.06); --shadow-xl: 0 18px 44px rgba(15,45,72,.14), 0 6px 14px rgba(15,45,72,.08); --shadow-focus: 0 0 0 3px rgba(15,45,72,.22); --shadow-focus-err: 0 0 0 3px rgba(178,59,57,.22); /* =========================================================== 7 · TOUCH / CONTROLES =========================================================== */ --touch-min: 44px; --touch-comfort: 48px; --control-h-sm: 34px; --control-h-md: 42px; --control-h-lg: 50px; /* =========================================================== 8 · MOTION =========================================================== */ --duration-fast: 130ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); /* =========================================================== 9 · Z-INDEX / 10 · BREAKPOINTS =========================================================== */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; --z-tooltip: 2000; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; }