/* INFIN Robotics UI tokens * * Palette values are the agency's published HEX values (Guidelines 2026, page 16). * Semantic names follow shadcn/ui and Tailwind v4. Each semantic token is defined once with * light-dark(); the theme comes from color-scheme, so the browser preference, [data-theme] * and a .dark class all work without a second block of values. Use the semantic names in * component CSS, never the raw palette names. */ @font-face { font-family: "Alte Haas Grotesk"; src: url("fonts/AlteHaasGroteskRegular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alte Haas Grotesk"; src: url("fonts/AlteHaasGroteskBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: light dark; /* --- primary palette (Guidelines 2026, p16; Pantone for print) --- */ --deep-dark: #202720; /* Black 3 C. Ink on light surfaces, deepest dark surface */ --deep-green: #333B37; /* 446 C. Dark panels, dark-theme cards, series 1 */ --sand-white: #F9F9F4; /* paper */ --aqua-shallow: #C8F8EC; /* 573 C. Surface only */ --aqua-mid: #91EED9; /* 332 C. Surface, accent on dark */ --aqua-deep: #50A28D; /* 6152 C. Fills and graphics; text only on Deep Dark */ --white: #FFFFFF; /* --- derived (house values chosen for WCAG 2.2 AA; see references/review-summary.md) --- */ --aqua-ink: #2B7563; /* link/button on light: 5.2:1 on Sand White, 4.7:1 on Shallow Aqua */ --aqua-ink-hover: #245F51; --grey-muted: #5F6964; /* muted text on light: 5.4:1 on Sand White */ --grey-muted-dk: #B5BFB9; /* muted text on dark: 8.1:1 on Deep Dark, 6.1:1 on Deep Green */ --green-raised: #4F5B55; /* rows and borders on Deep Green */ --green-hover: #3E4743; /* hover/disabled fill on dark */ /* sequential data ramp, light to dark (the colour page's gradient swatch) */ --ramp-1: #C8F8EC; --ramp-2: #91EED9; --ramp-3: #50A28D; --ramp-4: #2B7563; --ramp-5: #333B37; /* --- semantic (light, dark) --- */ --background: light-dark(var(--sand-white), var(--deep-dark)); --foreground: light-dark(var(--deep-dark), var(--sand-white)); --card: light-dark(var(--white), var(--deep-green)); --card-foreground: light-dark(var(--deep-dark), var(--sand-white)); --popover: light-dark(var(--white), var(--deep-green)); --popover-foreground: light-dark(var(--deep-dark), var(--sand-white)); /* --primary is the brand accent for links, buttons and focus. It is never Deep Aqua on light. */ --primary: light-dark(var(--aqua-ink), var(--aqua-mid)); --primary-foreground: light-dark(var(--white), var(--deep-dark)); --primary-hover: light-dark(var(--aqua-ink-hover), var(--aqua-shallow)); --primary-fill: var(--aqua-deep); /* non-text fills: progress, chips, illustration */ --secondary: light-dark(var(--aqua-mid), var(--green-raised)); --secondary-foreground: light-dark(var(--deep-dark), var(--sand-white)); --muted: light-dark(#ECEEEA, var(--green-hover)); --muted-foreground: light-dark(var(--grey-muted), var(--grey-muted-dk)); --accent: light-dark(var(--aqua-shallow), #2A4A41); /* a highlight surface, not the link colour */ --accent-foreground: light-dark(var(--deep-dark), var(--sand-white)); --border: light-dark(#E3E6E2, var(--green-raised)); --input: light-dark(#E3E6E2, var(--green-raised)); --ring: light-dark(var(--aqua-ink), var(--aqua-mid)); --scrim: rgb(32 39 32 / 0.6); /* Deep Dark behind text over imagery */ /* status: solid colour plus the text that sits on it. Always paired with a label or icon. */ --success: light-dark(#1E7F4F, #7FD9A8); --success-foreground: light-dark(var(--white), var(--deep-dark)); --warning: light-dark(#956700, #E8B84A); --warning-foreground: light-dark(var(--white), var(--deep-dark)); --destructive: light-dark(#B42318, #F59B92); --destructive-foreground: light-dark(var(--white), var(--deep-dark)); /* warning notice: a 10% tint of --warning leaves --warning text below 4.5:1, so the tint is explicit */ --warning-bg: light-dark(#FFFAF0, #4A3F22); --warning-border: light-dark(#F0E6CC, #6B5A2E); --warning-bg-foreground: light-dark(var(--deep-dark), var(--sand-white)); /* inverse panels (sidebars, hero blocks) are Deep Green in both themes; their text does not flip */ --sidebar: var(--deep-green); --sidebar-foreground: var(--sand-white); --sidebar-muted-foreground: var(--grey-muted-dk); /* 6.1:1 on --sidebar; only 3.8:1 on a row, so not there */ --sidebar-primary: var(--green-raised); /* active row */ --sidebar-primary-foreground: var(--sand-white); --sidebar-accent: var(--green-raised); /* hover row */ --sidebar-accent-foreground: var(--sand-white); --sidebar-border: rgb(249 249 244 / 0.12); --sidebar-ring: var(--aqua-mid); /* charts: categorical order from references/data-viz.md; series 1 flips because Deep Green vanishes on dark */ --chart-1: light-dark(var(--deep-green), var(--sand-white)); --chart-2: var(--aqua-deep); --chart-3: light-dark(var(--grey-muted), var(--grey-muted-dk)); --chart-4: var(--aqua-mid); /* --- type (Guidelines 2026, p21-22). Alte Haas Grotesk has 400 and 700 only. --- */ --font-sans: "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* house stand-in; the guidelines do not name the mono face */ --leading-display: 0.9; /* headlines and titles, 700, 32px and up */ --tracking-display: -0.04em; --leading-heading: 1.1; /* mid-level type and UI headings, 18 to 31px */ --tracking-heading: -0.02em; --leading-body: 1.15; /* small copy, up to 17px; multi-line UI copy may go to 1.4 */ --tracking-body: 0; --tracking-label: 0.08em; /* mono eyebrow labels */ /* --- shape (house) --- */ --radius: 8px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgb(32 39 32 / 0.06); } /* Theme selection. Omit both to follow the browser preference. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"], .dark { color-scheme: dark; }