/* * Defensa SI Design System — tokens@1.0.0 * GENERATED FILE — DO NOT EDIT. * Source of truth : defensa-si.tokens.json * Regenerate : node tokens/generate.mjs * Transform : color.bg.base -> --ds-color-bg-base */ :root { /* Color — semantic roles */ --ds-color-bg-base: #0B1220; --ds-color-bg-surface: #111A2B; --ds-color-bg-elevated: #16223A; --ds-color-scrim: #0B1220B8; --ds-color-text-primary: #F5F7FA; --ds-color-text-secondary: #A9B4C6; --ds-color-text-muted: #8593A8; --ds-color-text-inverse: #0B1220; --ds-color-brand-celeste: #7CC0E7; --ds-color-brand-verde: #009639; --ds-color-brand-verde-deep: #00702B; --ds-color-brand-amarillo: #FFD700; --ds-color-brand-blanco: #FFFFFF; --ds-color-accent-cr-azul: #001489; --ds-color-accent-cr-rojo: #DA291C; --ds-color-state-ok: #009639; --ds-color-state-warn: #FFD700; --ds-color-state-danger: #DA291C; --ds-color-state-danger-text: #F35B4C; --ds-color-state-info: #7CC0E7; --ds-color-border-subtle: #1E2A42; --ds-color-border-default: #2C3B59; --ds-color-border-strong: #55698F; --ds-color-focus-ring: #7CC0E7; --ds-color-focus-offset: #0B1220; /* Radius — sharp corners only (2/4/6 px) */ --ds-radius-none: 0px; --ds-radius-sm: 2px; --ds-radius-md: 4px; --ds-radius-lg: 6px; /* Space — 4 px grid */ --ds-space-0: 0rem; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.5rem; --ds-space-6: 2rem; --ds-space-7: 3rem; --ds-space-8: 4rem; --ds-space-9: 6rem; --ds-space-10: 8rem; /* Type — display / body scale */ --ds-type-family-display: "Space Grotesk", Inter, system-ui, sans-serif; --ds-type-family-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ds-type-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ds-type-size-display: 3.5rem; --ds-type-size-display-sm: 2.75rem; --ds-type-size-h1: 2.25rem; --ds-type-size-h2: 1.75rem; --ds-type-size-h3: 1.375rem; --ds-type-size-body-lg: 1.125rem; --ds-type-size-body: 1rem; --ds-type-size-small: 0.875rem; --ds-type-size-caption: 0.75rem; --ds-type-weight-regular: 400; --ds-type-weight-medium: 500; --ds-type-weight-semibold: 600; --ds-type-weight-bold: 700; --ds-type-line-height-tight: 1.1; --ds-type-line-height-snug: 1.3; --ds-type-line-height-normal: 1.6; --ds-type-line-height-relaxed: 1.75; --ds-type-tracking-tight: -0.02em; --ds-type-tracking-normal: 0em; --ds-type-tracking-wide: 0.04em; /* Motion */ --ds-motion-scroll-duration: 500ms; --ds-motion-reduced: 0ms; --ds-motion-duration-fast: 150ms; --ds-motion-duration-base: 250ms; --ds-motion-duration-slow: 400ms; --ds-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ds-motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* Layout */ --ds-layout-breakpoint-sm: 320px; --ds-layout-breakpoint-md: 768px; --ds-layout-breakpoint-lg: 1280px; --ds-layout-container-max: 1200px; --ds-layout-gutter: 24px; --ds-layout-measure-prose: 68ch; } /* motion.reduced (0 ms) is a first-class token: the reduced-motion contract. * Components must read the variables, never hard-code durations. */ @media (prefers-reduced-motion: reduce) { :root { --ds-motion-scroll-duration: 0ms; --ds-motion-reduced: 0ms; --ds-motion-duration-fast: 0ms; --ds-motion-duration-base: 0ms; --ds-motion-duration-slow: 0ms; } } /* Computed contrast pairs (WCAG 2.2 AA: body 4.5:1, large/UI 3:1). * Machine-readable copies live in tokens.ts (`contrastPairs`) and in the token JSON. */ * PASS 17.45:1 color.text.primary on color.bg.base [body >= 4.5] * PASS 16.22:1 color.text.primary on color.bg.surface [body >= 4.5] * PASS 14.78:1 color.text.primary on color.bg.elevated [body >= 4.5] * PASS 13.39:1 color.text.primary on color.accent.cr.azul [body >= 4.5] * PASS 5.84:1 color.text.primary on color.brand.verdeDeep [body >= 4.5] * PASS 3.61:1 color.text.primary on color.brand.verde [large >= 3] * PASS 4.53:1 color.text.primary on color.accent.cr.rojo [body >= 4.5] * PASS 4.53:1 color.text.primary on color.state.danger [body >= 4.5] * PASS 17.45:1 color.text.primary on color.scrim [body >= 4.5] * PASS 8.94:1 color.text.secondary on color.bg.base [body >= 4.5] * PASS 8.31:1 color.text.secondary on color.bg.surface [body >= 4.5] * PASS 7.58:1 color.text.secondary on color.bg.elevated [body >= 4.5] * PASS 6.01:1 color.text.muted on color.bg.base [body >= 4.5] * PASS 5.58:1 color.text.muted on color.bg.surface [body >= 4.5] * PASS 5.09:1 color.text.muted on color.bg.elevated [body >= 4.5] * PASS 18.72:1 color.text.inverse on color.brand.blanco [body >= 4.5] * PASS 13.35:1 color.text.inverse on color.brand.amarillo [body >= 4.5] * PASS 9.41:1 color.text.inverse on color.brand.celeste [body >= 4.5] * PASS 9.41:1 color.brand.celeste on color.bg.base [body >= 4.5] * PASS 4.83:1 color.brand.verde on color.bg.base [body >= 4.5] * PASS 13.35:1 color.brand.amarillo on color.bg.base [body >= 4.5] * PASS 18.72:1 color.brand.blanco on color.bg.base [body >= 4.5] * FAIL(documented) 1.30:1 color.accent.cr.azul on color.bg.base [graphic >= 3] * PASS 3.85:1 color.accent.cr.rojo on color.bg.base [large >= 3] * PASS 4.83:1 color.state.ok on color.bg.base [body >= 4.5] * PASS 13.35:1 color.state.warn on color.bg.base [body >= 4.5] * PASS 3.85:1 color.state.danger on color.bg.base [large >= 3] * PASS 3.85:1 color.state.danger on color.bg.base [ui >= 3] * PASS 5.72:1 color.state.dangerText on color.bg.base [body >= 4.5] * PASS 5.31:1 color.state.dangerText on color.bg.surface [body >= 4.5] * PASS 4.84:1 color.state.dangerText on color.bg.elevated [body >= 4.5] * PASS 9.41:1 color.state.info on color.bg.base [body >= 4.5] * FAIL(documented) 1.31:1 color.border.subtle on color.bg.base [graphic >= 3] * FAIL(documented) 1.67:1 color.border.default on color.bg.base [graphic >= 3] * PASS 3.39:1 color.border.strong on color.bg.base [ui >= 3] * PASS 3.15:1 color.border.strong on color.bg.surface [ui >= 3] * PASS 9.41:1 color.focus.ring on color.bg.base [ui >= 3] * PASS 8.75:1 color.focus.ring on color.bg.surface [ui >= 3] * PASS 7.97:1 color.focus.ring on color.bg.elevated [ui >= 3] * PASS 13.35:1 color.focus.offset on color.brand.amarillo [ui >= 3] * PASS 18.72:1 color.focus.offset on color.brand.blanco [ui >= 3] */