/* ========================================================================== Daftar design tokens. World: Kolam (a mark drawn fresh every morning). One hue drives the product: peacock, 210. Each school's own colour lives only in its crest. Light product ground forced by the scene: a sunlit classroom at 8:10, a fee counter window, an owner's laptop at night. ========================================================================== */ :root { color-scheme: light; /* ---- Neutrals, tinted toward peacock ---- */ --bg: oklch(0.99 0.003 210); --surface: oklch(0.976 0.006 210); --surface-2: oklch(0.956 0.01 208); --surface-3: oklch(0.93 0.014 208); --ink: oklch(0.21 0.025 220); /* 15.4:1 on --bg */ --ink-2: oklch(0.33 0.025 218); --muted: oklch(0.46 0.022 215); /* 6.9:1 on --bg, placeholders too */ --muted-2: oklch(0.6 0.018 212); /* decoration only, never text */ --line: oklch(0.905 0.012 210); --line-strong: oklch(0.83 0.018 210); /* ---- Brand: peacock ---- */ --primary: oklch(0.5 0.1 208); /* white on it 5.9:1 */ --primary-strong: oklch(0.41 0.09 212); --primary-soft: oklch(0.955 0.02 205); --primary-soft-2: oklch(0.9 0.045 205); --on-primary: oklch(0.995 0 0); /* Turmeric: the sync bead and the one warm highlight. Never a status. */ --accent: oklch(0.8 0.14 84); --accent-strong: oklch(0.7 0.15 78); --accent-soft: oklch(0.96 0.04 88); --on-accent: oklch(0.24 0.04 70); /* The drench: deep peacock with rice-white line work. Once per page. */ --drench: oklch(0.27 0.06 214); --drench-2: oklch(0.33 0.07 212); --on-drench: oklch(0.975 0.006 210); --on-drench-muted: oklch(0.86 0.025 205); --drench-line: oklch(1 0 0 / 0.16); /* School colours: crests only, never UI chrome. */ --kumkum: oklch(0.55 0.19 22); --turmeric: oklch(0.74 0.15 80); --leaf: oklch(0.52 0.12 150); --jamun: oklch(0.42 0.13 330); --indigo: oklch(0.4 0.13 268); --rice: oklch(0.975 0.006 210); /* ---- Semantic: states only ---- */ --success: oklch(0.54 0.12 155); --success-soft: oklch(0.95 0.035 155); --success-ink: oklch(0.4 0.1 155); --warning: oklch(0.68 0.14 62); --warning-soft: oklch(0.96 0.045 75); --warning-ink: oklch(0.45 0.1 60); --danger: oklch(0.53 0.19 26); --danger-soft: oklch(0.955 0.03 25); --danger-ink: oklch(0.45 0.17 26); --info: oklch(0.48 0.12 265); --info-soft: oklch(0.955 0.025 265); --info-ink: oklch(0.42 0.12 265); /* Offline is calm grey, never red. */ --offline: oklch(0.52 0.01 220); --offline-soft: oklch(0.945 0.004 220); --offline-ink: oklch(0.42 0.01 220); /* Charts: a peacock ramp, plus turmeric for the one series that matters. */ --c-1: oklch(0.9 0.04 205); --c-2: oklch(0.76 0.08 206); --c-3: oklch(0.6 0.1 208); --c-4: oklch(0.46 0.09 210); --c-5: oklch(0.32 0.07 214); /* ---- Type: Anek Latin (display, variable width) + Lexend (reading) ---- */ --font-display: "Anek Latin", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --stretch-display: 110%; --stretch-head: 106%; /* Marketing scale: fluid */ --fs-display: clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem); --fs-h1: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); --fs-h2: clamp(1.9rem, 1.35rem + 1.7vw, 3.1rem); --fs-h3: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); --fs-lead: clamp(1.06rem, 1rem + .35vw, 1.2rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; /* Product scale: fixed */ --t-32: 2rem; --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem; --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --lh-tight: 1.04; --lh-snug: 1.22; --lh-body: 1.6; --lh-relaxed: 1.7; --tracking-display: -0.025em; --tracking-ui: 0; /* ---- Space: 4px base ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5rem; --s-10: 6rem; --s-12: 8rem; --section: clamp(4.5rem, 3rem + 5vw, 7.5rem); --section-tight: clamp(3rem, 2rem + 3vw, 4.5rem); --gutter: clamp(1rem, 4.5vw, 4rem); --container: 1240px; --container-wide: 1440px; --container-narrow: 760px; --measure: 66ch; /* ========================================================================== FORM: Kolam on an Instrument frame. Rounded like a drawn line, never pillowy; hairlines tinted to the hue; one soft step of elevation. ========================================================================== */ /* 1. Shape */ --r-ctl: 10px; --r-card: 18px; --r-lg: 22px; --r-full: 999px; /* 2. Border */ --bw: 1px; --bw-strong: 1.5px; --rule: var(--bw) solid var(--line); --rule-strong: var(--bw-strong) solid var(--line-strong); /* 3. Elevation: one soft step on a hairline */ --elev-card: 0 1px 2px oklch(0.21 0.03 215 / 0.05), 0 0 0 1px var(--line); --elev-pop: 0 12px 32px -12px oklch(0.21 0.03 215 / 0.22), 0 0 0 1px var(--line); --elev-modal: 0 36px 72px -24px oklch(0.21 0.03 215 / 0.36); /* 4. Density: touch-first on the tablet, comfortable on the hub */ --h-ctl: 44px; --h-ctl-sm: 34px; --h-ctl-lg: 52px; --h-row: 52px; --h-row-tight: 44px; --pad-card: var(--s-5); --gap-grid: var(--s-5); /* 5. Dividers: hairline between rows, no cell grid */ --cell-rule: none; --row-rule: var(--rule); /* 6. Headings: display face, sentence case, slightly wide */ --wt-head: 600; --wt-body: 380; --wt-strong: 520; --tracking-heading: -0.02em; --case-head: none; --e-1: 0 1px 2px oklch(0.21 0.03 215 / 0.06); --e-2: 0 4px 12px -4px oklch(0.21 0.03 215 / 0.12); --e-3: 0 16px 40px -16px oklch(0.21 0.03 215 / 0.28); /* ---- Motion: lines draw, beads run, nothing bounces ---- */ --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms; --dur-draw: 1600ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-draw: cubic-bezier(0.45, 0, 0.15, 1); /* ---- Prototype chrome ---- */ --pocbar-h: 46px; --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }