/* ============================================================= TolaData — Design Tokens Source: Figma · LhHavBXRymmM8mbQLHVSYz ============================================================= */ :root { /* ----------------------------------------------------------- GRAY ----------------------------------------------------------- */ --color-gray-10: #ffffff; --color-gray-20: #f5f5f5; --color-gray-30: #ededed; --color-gray-40: #e0e0e0; --color-gray-50: #c2c2c2; --color-gray-60: #9e9e9e; --color-gray-70: #757575; --color-gray-80: #616161; --color-gray-90: #424242; --color-gray-100: #0a0a0a; /* ----------------------------------------------------------- PRIMARY (purple) 50 background · 100 focus bg · 200 border 500 default · 600 hover · 800 pressed ----------------------------------------------------------- */ --color-primary-50: #f7f5ff; --color-primary-100: #e2dcff; --color-primary-200: #bcb0f5; --color-primary-500: #5e47d2; --color-primary-600: #694df9; --color-primary-800: #220f80; /* ----------------------------------------------------------- DANGER (red) ----------------------------------------------------------- */ --color-danger-50: #ffe8e8; --color-danger-100: #ffdfdf; --color-danger-200: #e2b6b6; --color-danger-500: #a82525; --color-danger-600: #8c1f1f; --color-danger-800: #541212; /* ----------------------------------------------------------- INFO (blue) ----------------------------------------------------------- */ --color-info-50: #ebeeff; --color-info-100: #e2e7ff; --color-info-200: #aab6f4; --color-info-500: #0023dd; --color-info-600: #001db8; --color-info-800: #001793; /* ----------------------------------------------------------- SUCCESS (green) ----------------------------------------------------------- */ --color-success-50: #e7faf5; --color-success-100: #c8ebe2; --color-success-200: #b5d0c9; --color-success-500: #21725e; --color-success-600: #1b5f4e; --color-success-800: #164c3f; /* ----------------------------------------------------------- WARNING (amber) Updated from Figma bright yellow (#e0ce2c) to golden amber (#d4a800) for better UI readability. The 50/100/200 tints are left unchanged — they work with both hues at light scale. ----------------------------------------------------------- */ --color-warning-50: #fefadc; --color-warning-100: #fdf8cf; --color-warning-200: #f5efb9; --color-warning-500: #d4a800; --color-warning-600: #b89000; --color-warning-800: #8c6d00; /* ----------------------------------------------------------- SEMANTIC ALIASES — use these in components, not raw palette ----------------------------------------------------------- */ --color-surface: var(--color-gray-10); --color-surface-subtle: var(--color-gray-20); --color-border: var(--color-gray-40); --color-border-strong: var(--color-gray-50); --color-text-muted: var(--color-gray-60); --color-text-secondary: var(--color-gray-70); --color-text-primary: var(--color-gray-90); --color-text-on-dark: var(--color-gray-10); /* text/icon on filled or dark surfaces */ --color-foreground: var(--color-gray-100); --color-focus-ring: var(--color-primary-600); /* AI panel gradient stops */ --color-ai-panel-from: #f4f1ff; --color-ai-panel-to: #ece8ff; /* Tints used by interactive elements */ --color-table-row-hover: #faf9ff; /* tbody row hover tint */ --color-overlay: rgba(0, 0, 0, .35); /* mobile sidebar backdrop */ /* Muted white for text/icons sitting on a filled primary surface */ --color-on-primary-muted: rgba(255, 255, 255, .65); /* Detail panel slide-in backdrop — lighter than --color-overlay (.35) so the underlying page content remains partially visible */ --color-panel-backdrop: rgba(0, 0, 0, .18); /* ----------------------------------------------------------- FILE TYPE ICON COLOURS — Screen 4 · Files pane These represent file-format brand identities and sit outside the main semantic palette intentionally. ----------------------------------------------------------- */ --color-file-pdf-bg: #fde8e8; /* PDF badge background */ --color-file-pdf-fg: #c0392b; /* PDF badge foreground */ --color-file-xls-bg: #e8f8f2; /* Excel badge background */ --color-file-xls-fg: #1e8449; /* Excel badge foreground */ --color-file-doc-bg: #e8edf8; /* Word/Doc badge background */ --color-file-doc-fg: #1a5276; /* Word/Doc badge foreground */ --color-file-img-bg: #f8f3e8; /* Image badge background */ --color-file-img-fg: #b7770d; /* Image badge foreground */ /* ----------------------------------------------------------- BORDER WIDTH ----------------------------------------------------------- */ --border-width-default: 1px; --border-width-focus: 3px; /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- */ --font-family-sans: 'Inter', sans-serif; /* Sub-scale sizes — below the xs baseline, used only for compact micro-UI chrome (badges, section labels). */ --font-size-3xs: 9px; /* Intel NEW badge */ --font-size-2xs: 10px; /* Sidebar section labels, AI Ready badge */ /* Core scale */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 28px; --font-size-2xl: 36px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-xs: 16px; --line-height-sm: 20px; --line-height-md: 24px; --line-height-lg: 28px; --line-height-xl: 36px; --line-height-2xl: 44px; /* Letter-spacing — 0 is the default for body copy; uppercase labels and badges use wider tracking. */ --letter-spacing-normal: 0em; --letter-spacing-tight: .02em; /* Intel NEW badge */ --letter-spacing-wide: .05em; /* Table column headers, metric labels */ --letter-spacing-wider: .06em; /* Form field labels */ --letter-spacing-widest: .09em; /* Sidebar section labels */ /* ----------------------------------------------------------- SPACING — 4px base grid, space-N = N × 4px Sub-grid values use decimal notation for off-grid micro-spacing found in compact UI chrome. ----------------------------------------------------------- */ --space-0-5: 2px; --space-0-75: 3px; --space-1: 4px; --space-1-25: 5px; --space-1-5: 6px; --space-1-75: 7px; --space-2: 8px; --space-2-25: 9px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; /* ----------------------------------------------------------- BORDER RADIUS ----------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 5px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 30px; --radius-full: 100px; /* ----------------------------------------------------------- SHADOWS Lightweight opacity values tuned for light-background UI. --shadow-xl is reserved for modals and dialogs (not yet used in shipped screens). ----------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-primary: 0 4px 12px rgba(94, 71, 210, 0.30); /* purple lift — AI panel icon */ --shadow-panel: -2px 0 20px rgba(0, 0, 0, 0.18); /* left-side lift for slide-in detail panel */ /* ----------------------------------------------------------- LAYOUT ----------------------------------------------------------- */ --sidebar-w: 240px; /* default desktop sidebar width */ --sidebar-w-md: 220px; /* tablet override (≤ 1024px) */ --header-h: 56px; /* sticky top bar height */ --detail-panel-w: 288px; /* right-side budget column in the 2-col detail layout (Screen 2) */ --detail-panel-slide-w: 680px; /* slide-in right panel (Screen 4) — distinct from the budget column */ /* Added from screen audit */ /* Table column widths — used in 03_indicators and 04_projects */ --col-name: 200px; /* Name column min-width across all data tables */ --col-accent: 0px; /* Left accent column — zero-width, colour rendered via inset box-shadow */ --col-chevron: 36px; /* Right collapse/expand column in indicator table */ /* ----------------------------------------------------------- TRANSITIONS — Added from screen audit Consistent durations used across all interactive elements. ----------------------------------------------------------- */ --trans-fast: .08s; /* Table row background swap */ --trans-base: .12s; /* Buttons, nav items, icon buttons — most common */ --trans-moderate: .15s; /* Workspace pill, sidebar transform */ --trans-slow: .25s; /* Sidebar slide (transform), main-wrap margin */ /* ----------------------------------------------------------- LETTER SPACING — Added from screen audit ----------------------------------------------------------- */ /* .07em used by .level-badge (Activity / Task / Sub-task labels in the project hierarchy table). Sits between --letter-spacing-wide (.05em) and --letter-spacing-wider (.06em) — intentionally distinct so level badges remain legible at 9px. */ --letter-spacing-badge: .07em; /* .04em used by .date-label micro-labels (START / END prefix on dates). Slightly less tracking than table headers at 9px. */ --letter-spacing-date-label: .04em; } /* ============================================================= TYPOGRAPHY UTILITY CLASSES ============================================================= */ .text-body-xs-regular { font-family: var(--font-family-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-normal); } .text-body-xs-medium { font-family: var(--font-family-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-normal); } .text-body-sm-regular { font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-normal); } .text-body-sm-medium { font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-normal); } .text-body-md-regular { font-family: var(--font-family-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-normal); } .text-body-md-medium { font-family: var(--font-family-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-normal); } .text-heading-sm { font-family: var(--font-family-sans); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-normal); } .text-heading-md { font-family: var(--font-family-sans); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-normal); } .text-heading-lg { font-family: var(--font-family-sans); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-normal); } /* ============================================================= LABEL / MICRO TEXT UTILITY CLASSES — Added from screen audit ============================================================= */ /* Table column header label — used in every data table thead */ .text-label-table-header { font-family: var(--font-family-sans); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); /* .05em */ white-space: nowrap; } /* Level badge — Activity / Task / Sub-task label above the row link in the project hierarchy table (04_projects.html) */ .text-label-level-badge { font-family: var(--font-family-sans); font-size: var(--font-size-3xs); /* 9px */ font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-badge); /* .07em */ line-height: 1; } /* Date label — START / END micro-prefix before a date value (.date-label in 04_projects.html) */ .text-label-date { font-family: var(--font-family-sans); font-size: var(--font-size-3xs); /* 9px */ color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-date-label); /* .04em */ } /* Sidebar section heading — WORKSPACE / ANALYTICS / INTELLIGENCE */ .text-label-sidebar-section { font-family: var(--font-family-sans); font-size: var(--font-size-2xs); /* 10px */ font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); /* .09em */ } /* Form field label — NAME / STAGE / etc. above inputs in Detail */ .text-label-field { font-family: var(--font-family-sans); font-size: var(--font-size-xs); /* 12px */ font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); /* .06em */ } /* Indicator section row title — e.g. "Non-classified indicators" */ .text-label-section-title { font-family: var(--font-family-sans); font-size: var(--font-size-2xs); /* 10px */ font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); /* .05em */ }