/* ============================================================================ KIIT Event Gallery (FRS) — application design system ---------------------------------------------------------------------------- The only stylesheet the application loads. There is no CSS framework behind it: everything a page uses is defined here. Layer order, and it matters — later layers refine earlier ones: 1. tokens the whole visual language as custom properties. The ONLY place a literal colour may appear is a `:root` block here. 2. base element-level reset. 3. foundation the grid, the spacing/display utilities, and the base components (button, form control, card, table, modal…). This replaced Bootstrap 5.3 — see the note on that block. 4. components the named pieces this app is made of: .stat-card, .photo-grid, .drop-zone, .viewer, .queue… These refine the foundation, so they come after it. 5. mobile `max-width` queries only, including `.data-table--stack`. Theme resolution order (last one wins): :root -> light @media (prefers-color-scheme: dark) :root -> dark, unless [data-theme="light"] :root[data-theme="dark"] -> dark, always ui.js writes `data-theme` onto . ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { color-scheme: light; /* Brand ---------------------------------------------------------------- */ --rgb-primary: 21 128 61; --rgb-primary-strong: 22 101 52; --rgb-secondary: 4 120 87; --rgb-accent: 180 83 9; --c-primary: rgb(var(--rgb-primary)); --c-primary-hover: rgb(var(--rgb-primary-strong)); --c-primary-soft: rgb(var(--rgb-primary) / 0.10); --c-primary-soft-strong: rgb(var(--rgb-primary) / 0.18); --c-on-primary: #ffffff; --c-secondary: rgb(var(--rgb-secondary)); --c-secondary-hover: #065f46; --c-secondary-soft: rgb(var(--rgb-secondary) / 0.12); --c-on-secondary: #ffffff; --c-accent: rgb(var(--rgb-accent)); --c-accent-soft: rgb(var(--rgb-accent) / 0.14); /* Surfaces ------------------------------------------------------------- */ --c-bg: #f3faf5; /* Triple as well as hex: the sticky bars sit over scrolling content and need the surface at partial alpha, which a hex cannot express. */ --rgb-surface: 255 255 255; --c-surface: rgb(var(--rgb-surface)); --c-surface-raised: #ffffff; --c-surface-sunken: #e8f4ec; --c-surface-inverse: #0f2417; --c-overlay: rgb(15 18 34 / 0.48); /* Borders -------------------------------------------------------------- */ --c-border: #e2e5ee; --c-border-strong: #cbd0dd; --c-border-focus: rgb(var(--rgb-primary) / 0.55); /* Text ----------------------------------------------------------------- */ --c-text: #1a1d29; --c-text-muted: #5b6478; --c-text-subtle: #8a92a6; --c-text-inverse: #f7f8fc; --c-link: rgb(var(--rgb-primary)); /* Status --------------------------------------------------------------- */ --rgb-success: 22 163 74; --rgb-warning: 202 138 4; --rgb-danger: 220 38 38; --rgb-info: 2 132 199; --c-success: rgb(var(--rgb-success)); --c-success-soft: rgb(var(--rgb-success) / 0.12); --c-warning: rgb(var(--rgb-warning)); --c-warning-soft: rgb(var(--rgb-warning) / 0.14); --c-danger: rgb(var(--rgb-danger)); --c-danger-soft: rgb(var(--rgb-danger) / 0.12); --c-info: rgb(var(--rgb-info)); --c-info-soft: rgb(var(--rgb-info) / 0.12); --c-on-status: #ffffff; /* Skeleton / shimmer ---------------------------------------------------- */ --c-skeleton-base: #e6e9f1; --c-skeleton-sheen: #f4f6fb; /* Shadows (colour kept as a triple so alpha can vary) -------------------- */ --rgb-shadow: 22 27 45; --sh-xs: 0 1px 2px rgb(var(--rgb-shadow) / 0.06); --sh-sm: 0 1px 3px rgb(var(--rgb-shadow) / 0.08), 0 1px 2px rgb(var(--rgb-shadow) / 0.04); --sh-md: 0 4px 12px rgb(var(--rgb-shadow) / 0.10), 0 2px 4px rgb(var(--rgb-shadow) / 0.05); --sh-lg: 0 12px 28px rgb(var(--rgb-shadow) / 0.13), 0 4px 10px rgb(var(--rgb-shadow) / 0.06); --sh-xl: 0 24px 56px rgb(var(--rgb-shadow) / 0.18); --sh-focus: 0 0 0 3px rgb(var(--rgb-primary) / 0.30); /* Spacing scale (4px base) ---------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* Radius ---------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* Typography ------------------------------------------------------------ */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.6; --tracking-wide: 0.04em; /* Layout ---------------------------------------------------------------- */ /* 284, not 264: the brand row carries two marks and a rule since the university's logo joined this system's, and at 264 the name arrived as "KIIT Event ..." — measured at 144px of text in a 125px box. The content column is capped at --content-max anyway, so the twenty pixels come out of margin, not out of the page. */ --sidebar-w: 284px; --topbar-h: 62px; --content-max: 1320px; --tile-radius: var(--r-lg); --hit-target: 44px; /* Motion ---------------------------------------------------------------- */ /* Control heights. Everything a person clicks or types into is pinned to one of these, so a button beside a select beside a segmented control lines up without anybody adding up padding and border by hand. 44px is the default because that is the smallest comfortable touch target; the small size is for toolbars, the large for a primary action a page is built around. */ --control-h-sm: 2.25rem; --control-h: 2.75rem; --control-h-lg: 3.25rem; --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Overshoots and settles. For things that arrive -- a tick, a card, a tab indicator -- where a linear stop reads as a jump cut. */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Stacking -------------------------------------------------------------- */ --z-sidebar: 1035; --z-backdrop: 1030; --z-topbar: 1025; --z-modal: 1055; --z-toast: 1090; /* --- photo scrims --------------------------------------------------------- */ /* Ink and scrim for text laid over a photograph — a tile caption, a confidence badge, the viewer's chrome. Deliberately the same in both themes: the backdrop is the image, not the page, so these do not follow light/dark. Tokens rather than literals so the "no hex outside :root" rule holds without exception. */ --rgb-scrim: 0 0 0; --c-on-scrim: #ffffff; /* --- form-control glyphs ------------------------------------------------ */ /* Inline SVG data URIs rather than an icon font, because a