/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #060816 #1c2333 #f4f6fb #28399e #3457d5 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f4f6fb; --surface: #fafbfd; --surface-2: #e8eaf0; --border: #d3d5db; --border-strong: #adafb6; --ink: #1c2333; --muted: #696d79; --accent: #28399e; --accent-hover: #223086; --accent-ink: #ffffff; --accent-text: #3457d5; --accent-strong: #28399e; --accent-soft: #d7dcee; --accent-border: #98a1d1; --success: #15803d; --success-ink: #ffffff; --success-soft: #d9e8e4; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ece2de; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #eddce0; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #050713; --surface: #1e202b; --surface-2: #12131f; --border: #282a34; --border-strong: #50515a; --ink: #f4f6fb; --muted: #94969e; --accent: #28399e; --accent-hover: #4857ad; --accent-ink: #ffffff; --accent-text: #717cc0; --accent-strong: #717cc0; --accent-soft: #0d1232; --accent-border: #151d52; --success: #15803d; --success-ink: #ffffff; --success-soft: #09221c; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2c1811; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2d0c15; --danger-strong: #d16969; } /* ==================================================================== * app.css — AssetPilot * * Character: a crisp, confident operations tool. Tighter radii than the * default (an IT/ops register reads as precise, not soft), a slightly * denser type ramp, and tabular figures wherever a number needs to be * scanned down a column. Colour comes entirely from theme.css tokens. * ==================================================================== */ :root { /* Crisp corners — a register, not a lifestyle app. */ --radius-sm: 5px; --radius: 8px; --radius-lg: 14px; /* A touch tighter and more assertive than the default type ramp. */ --track-tight: -0.01em; /* A flatter, more deliberate shadow — depth without softness. */ --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent); --shadow-raised: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent); } /* ---- Auth screens: centred card on the canvas ------------------------ */ .auth-wrap { min-height: calc(100vh - 2 * var(--s-8, 32px)); display: flex; align-items: center; justify-content: center; padding: var(--s-8, 32px) var(--s-4, 16px); } .auth-card { width: 100%; max-width: 420px; } /* ---- Tags, serials and other identifiers read better in the mono face */ .mono { font-family: var(--font-mono); letter-spacing: 0; } @media (max-width: 640px) { .auth-card { padding: var(--s-6, 24px); } }