/* ========================================================================== Design tokens The interface is neutral: the cool greys of the Duria AI brand (navy ink, slate secondary text, a mist canvas), white surfaces, hairline borders, no gradients or glows. Colour is an accent, used sparingly: primary buttons, focus, the active state of a few controls, and the state colours (warning / critical / done). The organization palette (Configuração › Organização) overrides the brand, state and menu colours on (Organization::Palette#css_declarations); everything below derives from them. The menu is the same colour as the application by default, and its text colour (--sidebar-ink) is computed on the server for contrast. ========================================================================== */ /* Manrope: the typeface of the Duria AI brand (ExtraBold for the wordmark, the UI in regular weights) */ @font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/manrope-latin-wght-normal-757d91ba.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/manrope-latin-ext-wght-normal-9b71bd72.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/jetbrains-mono-latin-wght-normal-7c88d0cc.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/jetbrains-mono-latin-ext-wght-normal-6168ff55.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- palette (defaults = "Duria AI", config/palettes/duria_ai.json; overridden per organization) ---- */ --brand: #1F9D8A; /* Teal: logo, focus, small highlights */ --brand-strong: #177A6B; /* Teal Dark: primary buttons with white text (WCAG AA; Teal itself is 3.4:1) */ --brand-hover: #145956; --brand-soft: #EEF9F7; --brand-badge: #DDF3EE; /* Teal Tint */ --sidebar-bg: #F3F5F8; /* "neutro.menu": the application background by default */ --sidebar-ink: #0F1C2E; /* menu text, dark or white, chosen by Organization::Palette */ --sidebar-accent: #1F9D8A; /* dot and "ai" of the product mark: the brand, or the menu text when the brand does not stand out */ --state-warning: #D97706; --state-danger: #DC2626; --state-success: #16A34A; /* ---- neutrals ---- */ --bg: #F3F5F8; /* Mist, the canvas: pages and, by default, the menu */ --surface: #FFFFFF; /* cards, inputs, menus */ --surface-2: #ECEFF3; /* hover, quiet fills */ --surface-3: #E3E7ED; /* selected, pills, tracks */ --line: #E2E6EC; /* hairlines */ --line-strong: #CDD3DC; /* input borders */ --text: #0F1C2E; /* Navy */ --text-2: #5B6472; /* Slate: secondary text */ --text-3: #8A93A1; /* hints, placeholders, icons */ --ink: #0F1C2E; /* dark surfaces: toasts, tooltips, code */ --on-brand: #FFFFFF; /* ---- derived: brand ---- */ --brand-ring: color-mix(in srgb, var(--brand) 32%, transparent); --brand-tint: color-mix(in srgb, var(--brand) 7%, white); --brand-line: color-mix(in srgb, var(--brand) 24%, white); /* ---- derived: states ---- */ --warning-soft: color-mix(in srgb, var(--state-warning) 11%, white); --warning-ink: color-mix(in srgb, var(--state-warning) 78%, black); --danger-soft: color-mix(in srgb, var(--state-danger) 9%, white); --danger-ink: color-mix(in srgb, var(--state-danger) 82%, black); --success-soft: color-mix(in srgb, var(--state-success) 10%, white); --success-ink: color-mix(in srgb, var(--state-success) 78%, black); --info: #2563EB; --info-soft: color-mix(in srgb, var(--info) 8%, white); --info-ink: color-mix(in srgb, var(--info) 85%, black); /* ---- derived: side menu (works for a light or a dark menu colour) ---- */ --sidebar-fg: color-mix(in srgb, var(--sidebar-ink) 80%, var(--sidebar-bg)); --sidebar-fg-strong: var(--sidebar-ink); --sidebar-fg-muted: color-mix(in srgb, var(--sidebar-ink) 52%, var(--sidebar-bg)); --sidebar-hover: color-mix(in srgb, var(--sidebar-ink) 5%, var(--sidebar-bg)); --sidebar-active: color-mix(in srgb, var(--sidebar-ink) 8%, var(--sidebar-bg)); --sidebar-line: color-mix(in srgb, var(--sidebar-ink) 9%, var(--sidebar-bg)); /* ---- shape & depth: flat by default, shadows only for things that float ---- */ --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-1: 0 1px 2px rgba(15, 28, 46, .04); --shadow-2: 0 4px 14px -4px rgba(15, 28, 46, .10), 0 0 0 1px rgba(15, 28, 46, .03); --shadow-3: 0 16px 40px -12px rgba(15, 28, 46, .22), 0 0 0 1px rgba(15, 28, 46, .05); --focus: 0 0 0 3px var(--brand-ring); /* ---- type: Manrope (the brand typeface), then the system UI font ---- */ --font: "Manrope Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- layout ---- */ --sidebar-width: 256px; --topbar-height: 56px; --drawer-width: 420px; --page-max: 1200px; --ease: cubic-bezier(.22, .8, .24, 1); }