/* Project Cockpit design tokens. Generated from tokens.json; do not hand-edit values, edit the token file. Light is the default. Dark follows the OS unless or ="dark" forces one. Every component references these names, never a raw colour. */ :root { --brand-blue: #004494; --brand-blue-deep: #002f67; --brand-yellow: #ffd617; --ink: #10151c; --neutral-0: #ffffff; --neutral-50: #f6f7f8; --neutral-100: #eceff2; --neutral-200: #d9dee4; --neutral-300: #bfc7d0; --neutral-400: #98a3b0; --neutral-450: #7d8a99; --neutral-500: #6f7c8b; --neutral-600: #526070; --neutral-700: #3d4a5c; --neutral-800: #29323f; --neutral-900: #1a212b; --neutral-950: #10151c; --surface: #f6f7f8; --surface-raised: #ffffff; --surface-sunken: #eceff2; --border: #d9dee4; --border-strong: #7d8a99; --text-primary: #1a212b; --text-muted: #526070; --text-disabled: #98a3b0; --text-inverse: #ffffff; --accent: #004494; --accent-hover: #003776; --accent-subtle: #e3ecf7; --on-accent: #ffffff; --focus: #004494; --scrim: #10151c99; --urgency-calm-fg: #3d4a5c; --urgency-calm-bg: #eceff2; --urgency-calm-border: #7d8a99; --urgency-attention-fg: #5c4300; --urgency-attention-bg: #fff4bb; --urgency-attention-border: #a37a00; --urgency-soon-fg: #7a2e00; --urgency-soon-bg: #fde3d1; --urgency-soon-border: #c2410c; --urgency-overdue-fg: #ffffff; --urgency-overdue-bg: #a3121d; --urgency-overdue-border: #a3121d; --success-fg: #1e6b35; --success-bg: #e6f4ea; --success-border: #2f8f4e; --warning-fg: #5c4300; --warning-bg: #fff4bb; --warning-border: #a37a00; --danger-fg: #a3121d; --danger-bg: #fdecea; --danger-border: #c4202c; --info-fg: #004494; --info-bg: #e3ecf7; --info-border: #4073af; --stage-idle-fg: #526070; --stage-idle-bg: #f6f7f8; --stage-idle-border: #7d8a99; --stage-active-fg: #004494; --stage-active-bg: #e3ecf7; --stage-active-border: #004494; --stage-parked-fg: #5c4300; --stage-parked-bg: #fff4bb; --stage-parked-border: #a37a00; --stage-approved-fg: #1e6b35; --stage-approved-bg: #e6f4ea; --stage-approved-border: #2f8f4e; --stage-revise-fg: #7a2e00; --stage-revise-bg: #fde3d1; --stage-revise-border: #c2410c; --stage-rejected-fg: #a3121d; --stage-rejected-bg: #fdecea; --stage-rejected-border: #c4202c; --stage-closed-fg: #3d4a5c; --stage-closed-bg: #eceff2; --stage-closed-border: #3d4a5c; --band-1: #004494; --band-2: #4073af; --band-3: #7fa1c9; --band-4: #ffd617; --shadow-1: 0 1px 2px #10151c14; --shadow-2: 0 4px 12px #10151c1f; --shadow-3: 0 12px 32px #10151c33; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-blue: #004494; --brand-blue-deep: #002f67; --brand-yellow: #ffd617; --ink: #10151c; --neutral-0: #ffffff; --neutral-50: #f6f7f8; --neutral-100: #eceff2; --neutral-200: #d9dee4; --neutral-300: #bfc7d0; --neutral-400: #98a3b0; --neutral-450: #7d8a99; --neutral-500: #6f7c8b; --neutral-600: #526070; --neutral-700: #3d4a5c; --neutral-800: #29323f; --neutral-900: #1a212b; --neutral-950: #10151c; --surface: #10151c; --surface-raised: #1a212b; --surface-sunken: #0b0f14; --border: #29323f; --border-strong: #7d8a99; --text-primary: #e8ecf1; --text-muted: #a3aebb; --text-disabled: #6f7c8b; --text-inverse: #ffffff; --accent: #8fb3e0; --accent-hover: #b1c9ea; --accent-subtle: #16243a; --on-accent: #0b1f3f; --focus: #8fb3e0; --scrim: #00000099; --urgency-calm-fg: #b8c2d0; --urgency-calm-bg: #232b36; --urgency-calm-border: #7d8a99; --urgency-attention-fg: #ffd75c; --urgency-attention-bg: #3a2e00; --urgency-attention-border: #b58f0a; --urgency-soon-fg: #ffb08a; --urgency-soon-bg: #4a1d05; --urgency-soon-border: #e07a3b; --urgency-overdue-fg: #ffffff; --urgency-overdue-bg: #d0303c; --urgency-overdue-border: #d0303c; --success-fg: #7fd39a; --success-bg: #0f2e1a; --success-border: #3fa866; --warning-fg: #ffd75c; --warning-bg: #3a2e00; --warning-border: #b58f0a; --danger-fg: #ff9ea3; --danger-bg: #3d0d12; --danger-border: #e0505a; --info-fg: #8fb3e0; --info-bg: #16243a; --info-border: #5a86c2; --stage-idle-fg: #a3aebb; --stage-idle-bg: #10151c; --stage-idle-border: #7d8a99; --stage-active-fg: #8fb3e0; --stage-active-bg: #16243a; --stage-active-border: #8fb3e0; --stage-parked-fg: #ffd75c; --stage-parked-bg: #3a2e00; --stage-parked-border: #b58f0a; --stage-approved-fg: #7fd39a; --stage-approved-bg: #0f2e1a; --stage-approved-border: #3fa866; --stage-revise-fg: #ffb08a; --stage-revise-bg: #4a1d05; --stage-revise-border: #e07a3b; --stage-rejected-fg: #ff9ea3; --stage-rejected-bg: #3d0d12; --stage-rejected-border: #e0505a; --stage-closed-fg: #b8c2d0; --stage-closed-bg: #232b36; --stage-closed-border: #98a3b0; --band-1: #8fb3e0; --band-2: #5a86c2; --band-3: #4073af; --band-4: #ffd617; --shadow-1: 0 1px 2px #00000066; --shadow-2: 0 4px 12px #00000099; --shadow-3: 0 12px 32px #000000cc; } } [data-theme="dark"] { --brand-blue: #004494; --brand-blue-deep: #002f67; --brand-yellow: #ffd617; --ink: #10151c; --neutral-0: #ffffff; --neutral-50: #f6f7f8; --neutral-100: #eceff2; --neutral-200: #d9dee4; --neutral-300: #bfc7d0; --neutral-400: #98a3b0; --neutral-450: #7d8a99; --neutral-500: #6f7c8b; --neutral-600: #526070; --neutral-700: #3d4a5c; --neutral-800: #29323f; --neutral-900: #1a212b; --neutral-950: #10151c; --surface: #10151c; --surface-raised: #1a212b; --surface-sunken: #0b0f14; --border: #29323f; --border-strong: #7d8a99; --text-primary: #e8ecf1; --text-muted: #a3aebb; --text-disabled: #6f7c8b; --text-inverse: #ffffff; --accent: #8fb3e0; --accent-hover: #b1c9ea; --accent-subtle: #16243a; --on-accent: #0b1f3f; --focus: #8fb3e0; --scrim: #00000099; --urgency-calm-fg: #b8c2d0; --urgency-calm-bg: #232b36; --urgency-calm-border: #7d8a99; --urgency-attention-fg: #ffd75c; --urgency-attention-bg: #3a2e00; --urgency-attention-border: #b58f0a; --urgency-soon-fg: #ffb08a; --urgency-soon-bg: #4a1d05; --urgency-soon-border: #e07a3b; --urgency-overdue-fg: #ffffff; --urgency-overdue-bg: #d0303c; --urgency-overdue-border: #d0303c; --success-fg: #7fd39a; --success-bg: #0f2e1a; --success-border: #3fa866; --warning-fg: #ffd75c; --warning-bg: #3a2e00; --warning-border: #b58f0a; --danger-fg: #ff9ea3; --danger-bg: #3d0d12; --danger-border: #e0505a; --info-fg: #8fb3e0; --info-bg: #16243a; --info-border: #5a86c2; --stage-idle-fg: #a3aebb; --stage-idle-bg: #10151c; --stage-idle-border: #7d8a99; --stage-active-fg: #8fb3e0; --stage-active-bg: #16243a; --stage-active-border: #8fb3e0; --stage-parked-fg: #ffd75c; --stage-parked-bg: #3a2e00; --stage-parked-border: #b58f0a; --stage-approved-fg: #7fd39a; --stage-approved-bg: #0f2e1a; --stage-approved-border: #3fa866; --stage-revise-fg: #ffb08a; --stage-revise-bg: #4a1d05; --stage-revise-border: #e07a3b; --stage-rejected-fg: #ff9ea3; --stage-rejected-bg: #3d0d12; --stage-rejected-border: #e0505a; --stage-closed-fg: #b8c2d0; --stage-closed-bg: #232b36; --stage-closed-border: #98a3b0; --band-1: #8fb3e0; --band-2: #5a86c2; --band-3: #4073af; --band-4: #ffd617; --shadow-1: 0 1px 2px #00000066; --shadow-2: 0 4px 12px #00000099; --shadow-3: 0 12px 32px #000000cc; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 96px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 999px; --stroke-hairline: 1px; --stroke-control: 1.5px; --stroke-focus: 2px; --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif; --font-mono: "Source Code Pro", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; --tabular: 'tnum' 1, 'lnum' 1; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-greek-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-greek-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("../fonts/libre-baskerville-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Libre Baskerville"; src: url("../fonts/libre-baskerville-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Code Pro"; src: url("../fonts/source-code-pro-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Code Pro"; src: url("../fonts/source-code-pro-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } .display { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; } .h1 { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; } .h2 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; } .h3 { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; } .overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; } .body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; } .body-dense { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; } .caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; } .badge { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; } .button { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; } .prose { font-family: var(--font-serif); font-size: 17px; line-height: 28px; font-weight: 400; } .prose-lead { font-family: var(--font-serif); font-size: 20px; line-height: 32px; font-weight: 400; } .code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; } .figure { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; } .figure, .code, td.figure { font-variant-numeric: tabular-nums lining-nums; text-align: right; } .overline { text-transform: uppercase; } /* Focus: one rule for every interactive element. A solid ring over a surface halo reads on any fill. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface-raised); } /* Motion: the loading band is the only animation and it stops when the user asks. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }