/* ========================================================================= TUDI RFID — Colors & Type Sourced from src/styles.scss + src/styles.css of the Angular app. Do not invent new tokens; map any extras into these. ========================================================================= */ @font-face { font-family: "Material Icons Outlined"; src: url("/fonts/material-icons-outlined.woff2") format("woff2"), url("/fonts/material-icons-outlined.woff") format("woff"); font-weight: normal; font-style: normal; } /* Rubik is shipped in /assets/fonts in the codebase but currently UNUSED (commented out in styles.scss). Kept here so brand-aware artifacts can reach for a heavier display face when needed. */ @font-face { font-family: "Rubik"; src: url("/fonts/Rubik-Light.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "Rubik"; src: url("/fonts/Rubik-SemiBold.ttf") format("truetype"); font-weight: 600; } @font-face { font-family: "Rubik"; src: url("/fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700; } @font-face { font-family: "Rubik"; src: url("/fonts/Rubik-ExtraBold.ttf") format("truetype"); font-weight: 800; } :root { /* ============== MAROON RAMP (informational + hover surfaces) ============ Replaces the legacy blue ramp. The whole platform is unified around a single warm-red hue. The 5/30 steps power table-row hover and progress buffers; the 80 step lands exactly on --red-primary (#74131B). */ --maroon-5: #fbefef; /* table row hover (was --blue-10) */ --maroon-10: #ffece0; /* aliased with --red-10 */ --maroon-20: #f9d5c8; --maroon-30: #f2b8a6; /* progress-bar buffer (was --blue-30) */ --maroon-40: #e89a8a; --maroon-50: #c04250; --maroon-60: #9c2030; --maroon-80: #74131b; /* aliased with --red-primary */ /* ============== NEUTRALS (warm grey, never #000) ======================== */ --black-5: #f8f8f8; /* page background */ --black-10: #eaecec; /* dividers, hover surfaces */ --black-40: #c4c8c9; /* disabled */ --black-50: #868b8c; /* secondary text */ --black-60: #53595b; /* body text */ --black-80: #283133; /* primary text */ /* ============== BRAND REDS (action color) =============================== */ --red-primary: #74131B; /* deepest, used in MDC overrides */ --red-button: #881720; /* the actual filled-button background */ --red-secondary: #E54C59; /* hover/secondary highlight, sidenav hover */ --red-10: #ffece0; --red-40: #f9b9a3; --red-50: #e16216; /* warning-orange (NOT a true red) */ --red-80: #9d440f; /* ============== SEMANTIC ================================================ */ --green-10: #e6fbef; --green-40: #b0f0c8; --green-50: #15d667; /* success */ --green-80: #069744; --yellow-10: #fff7db; --yellow-50: #f6c204; /* warning */ --yellow-80: #a68309; --purple-10: #f1e9fd; --purple-50: #7725ef; /* info (rare) */ --purple-80: #4c1799; /* ============== SEMANTIC ALIASES (use these in app shells) ============== */ --bg-app: var(--black-5); --bg-surface: #ffffff; --bg-row-hover: var(--maroon-5); --bg-sidenav: #404041; /* neutral dark grey, NOT brand red */ --fg-1: var(--black-80); --fg-2: var(--black-60); --fg-3: var(--black-50); --fg-disabled: var(--black-40); --fg-inverse: #ffffff; --border-1: var(--black-10); --border-2: var(--black-40); --action: var(--red-button); --action-hover: var(--red-button); --action-press: var(--red-primary); /* ============== TYPE SCALE ============================================== */ --font-primary: "Montserrat", system-ui, sans-serif; --font-secondary: "Roboto", system-ui, sans-serif; --font-display: "Rubik", "Montserrat", sans-serif; --font-icon: "Material Icons Outlined"; /* Heading scale is COMPACT — h3 is 16px, not the typical 20–24 */ --fs-h1: 24px; /* welcome / page hero */ --fs-h2: 20px; /* page title (e.g. "Dashboard") */ --fs-h3: 16px; /* card heading */ --fs-body: 14px; /* default body / form */ --fs-small: 12px; --fs-micro: 11px; /* metadata / version strings */ /* ============== SPACING — multiples of 4 ================================ */ --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; /* default gap */ --sp-12: 12px; --sp-16: 16px; /* card / dialog padding */ --sp-20: 20px; /* dialog vertical padding */ --sp-24: 24px; --sp-32: 32px; /* ============== RADII =================================================== */ --radius-progress: 2px; --radius-control: 4px; /* tags / chips / inputs */ --radius-button: 6px; --radius-card: 8px; --radius-pill: 999px; /* ============== ELEVATION (Angular Material z1 / z2 / z8) =============== */ --shadow-z1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04); --shadow-z2: 0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --shadow-z8: 0 5px 5px -3px rgba(0,0,0,.20), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); /* mat-elevation-z8 on tables */ --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.05); /* ============== MOTION ================================================== */ --ease-standard: cubic-bezier(.4, 0, .2, 1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 500ms; } /* ============== GLOBAL DEFAULT (mirrors `* { }` in styles.scss) =========== */ html, body { margin: 0; background: var(--bg-app); color: var(--fg-1); font-family: var(--font-primary); font-weight: 300; /* Montserrat 300 is the platform default */ font-size: var(--fs-body); letter-spacing: normal; -webkit-font-smoothing: antialiased; } /* Match the codebase's compact heading scale */ h1 { font-size: var(--fs-h1); margin: 0; } h2 { font-size: var(--fs-h2); margin: 0; } h3 { font-size: var(--fs-h3); margin: 0; } /* IMPORTANT: 16px, not 20px */ .font-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; } /* Material Icons utility class (matches Angular Material usage) */ .mat-icon, .material-icons-outlined { font-family: var(--font-icon); font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }