/* ============================================================ KRONIKA — Foundations: Color & Type Source of truth: design-system/tokens.md (kronika-frontend-app-pg) Mono = Inconsolata (Google Fonts). Sans = native system stack. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700&display=swap'); :root { /* ---------- BRAND / PRIMARY ---------- */ --k-primary: rgb(15, 80, 184); /* kronika-primary — actions, links, selected */ --k-secondary: rgb(46, 47, 48); /* kronika-secondary — near-black ink */ /* ---------- NEUTRALS ---------- */ --k-gray-0: rgb(250, 250, 250); /* app background / hover fill */ --k-gray-1: rgb(224, 224, 224); /* borders, dividers */ --k-gray-2: rgb(118, 118, 118); /* secondary text, muted labels */ --k-bird: rgb(179, 179, 179); /* tertiary / disabled-ish gray */ --k-real-black: rgb(0, 0, 0); --k-real-white: rgb(255, 255, 255); --k-transparent: rgba(255, 255, 255, 0); /* ---------- STATUS / SEMANTIC ---------- */ --k-green: rgb(0, 235, 75); /* online dot, live status */ --k-bus: rgb(66, 178, 79); /* success green (map overlay, detection) */ --k-red: rgb(253, 21, 97); /* error / destructive */ --k-car: rgb(228, 24, 76); /* alert red (detection) */ --k-yellow: rgb(245, 227, 56); /* loading bar / warning */ /* ---------- DETECTION / DATA CATEGORIES ---------- Object-detection + chart series palette (vehicles & actors) */ --k-det-bicycle: rgb(244, 128, 56); /* orange */ --k-det-boat: rgb(92, 220, 255); /* cyan */ --k-det-bus: rgb(66, 178, 79); /* green */ --k-det-car: rgb(228, 24, 76); /* red */ --k-det-motorcycle: rgb(145, 30, 179); /* purple */ --k-det-truck: rgb(64, 105, 214); /* blue */ --k-det-worker: rgb(251, 224, 41); /* yellow */ /* ---------- SEMANTIC TEXT / SURFACE ALIASES ---------- */ --fg-1: var(--k-secondary); /* primary ink */ --fg-2: var(--k-gray-2); /* muted text */ --fg-3: var(--k-bird); /* disabled / faint */ --fg-on-dark: var(--k-real-white); --fg-link: var(--k-primary); --bg-app: var(--k-gray-0); /* page canvas */ --bg-surface: var(--k-real-white); --bg-hover: var(--k-gray-0); --border-1: var(--k-gray-1); /* ---------- TYPE: FAMILIES ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-mono: "Inconsolata", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---------- TYPE: SIZE SCALE (rem) ---------- */ --fs-xs: 0.75rem; /* 12px — overline / meta */ --fs-sm: 0.875rem; /* 14px — secondary / labels */ --fs-md: 1rem; /* 16px — body */ --fs-lg: 1.156rem; /* ~18.5px */ --fs-xl: 1.313rem; /* 21px */ --fs-xxl: 2rem; /* 32px — page titles */ /* ---------- TYPE: WEIGHTS ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- TYPE: LETTER SPACING ---------- */ --ls-xs: -1px; --ls-sm: -0.5px; --ls-md: 0px; --ls-lg: 1px; --ls-xl: 2px; /* ---------- SPACING (rem) ---------- */ --sp-0: 0rem; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* ---------- RADIUS ---------- */ --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 16px; --r-circle: 50%; /* ---------- ELEVATION (shadows) ---------- */ --el-0: none; --el-1: 0px 1px 3px #00000033; --el-2: 0px 1px 5px #00000033; --el-3: 0px 1px 8px #00000033; --el-4: 0px 2px 4px #00000033; --el-5: 0px 3px 5px #00000033; --el-6: 0px 5px 5px #00000033; --el-7: 0px 5px 6px #00000033; --el-8: 0px 7px 8px #00000033; --el-9: 0px 8px 10px #00000033; --el-10: 0px 11px 15px #00000033; /* ---------- MOTION ---------- */ --dur-quickly: 0.1s; --dur-normal: 0.25s; --dur-slowly: 0.5s; --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ---------- SIZES ---------- */ --h-header: 72px; /* token; rendered app uses a tighter 56px bar */ --h-button: 52px; --h-input: 42px; --h-input-select: 40px; --h-tabs: 40px; --h-footer: 72px; --size-logo: 36px; --size-marker: 36px; --btn-border-width: 2px; /* ---------- Z-INDEX ---------- */ --z-base: 0; --z-bottom-drawer: 500; --z-calendar: 750; --z-left-drawer: 1000; --z-overlay: 2000; --opacity-disabled: 0.5; /* ---------- BREAKPOINTS (reference) ---------- sm 600 · md 960 · lg 1264 · xl 1904 */ } /* ============================================================ SEMANTIC TYPE ROLES — apply as classes ============================================================ */ .k-display { /* page title — "Acceso Gorbea" */ font-family: var(--font-sans); font-size: var(--fs-xxl); font-weight: var(--fw-bold); letter-spacing: var(--ls-sm); color: var(--fg-1); line-height: 1.1; } .k-h1 { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-sm); color: var(--fg-1); line-height: 1.2; } .k-h2 { /* section / project name */ font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.25; } .k-body { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--fg-1); line-height: 1.5; } .k-body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--fg-2); line-height: 1.45; } .k-overline { /* "3 PROJECTS", "21 HOURS AGO" */ font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-lg); text-transform: uppercase; color: var(--fg-2); } .k-label { /* nav / button label */ font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-md); color: var(--fg-1); } .k-mono { /* timestamps, time readout 0:23 / 0:35 */ font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-md); color: var(--fg-1); }