/* ═══════════════════════════════════════════════════════════════ * Syncc mobile kit — shared tokens + primitives * ═══════════════════════════════════════════════════════════════ * * Per the May 19 mockup pack (3 roles × 6 surfaces), Syncc * needs a coherent mobile design vocabulary that surfaces can * consume without re-inventing tokens. This file holds the * tokens; surface stylesheets (my-day.css, calendar.css, etc.) * pull from them. * * Naming: ``--sk-*`` for kit tokens so collisions with the * existing ``--brand-*`` and ``--cc-*`` token families stay * impossible. Surfaces that consume the kit reference * ``--sk-*`` directly; surfaces that haven't migrated yet keep * using ``--brand-*`` and render identically to today. * * Dark-mode parity is automatic — every token has a dark * variant under ``.dark`` / ``html.dark`` matching the existing * Syncc dark-mode toggle. * * Load order: this file MUST come after ``brand.css`` so that * the surface-level vars (``--brand-teal`` etc.) are defined * before they're aliased here. */ :root { /* ── Surfaces ───────────────────────────────────────────── * Paper-cream backdrop (warmer than slate-50, less harsh * than white). Card stays white. Lines kept as ink-with- * low-alpha so they read as hairlines on both surfaces. */ --sk-paper: #F8F5EE; --sk-paper-2: #ECE6D6; --sk-card: #FFFFFF; /* Ink tiers — primary / secondary / muted / hint. Bound via * rgba so a single color shifts cleanly across opacity. */ --sk-ink: #0B1220; --sk-ink-2: rgba(11, 18, 32, 0.62); --sk-ink-3: rgba(11, 18, 32, 0.40); --sk-ink-4: rgba(11, 18, 32, 0.22); --sk-line: rgba(11, 18, 32, 0.07); --sk-line-2: rgba(11, 18, 32, 0.12); /* ── Accent — teal (Syncc brand) ───────────────────── * Two-stop teal: ``--sk-teal`` is the working color * (AA-contrast against paper/card), ``--sk-teal-bright`` is * the brighter dark-mode counterpart. Soft / line variants * are derived from ``--sk-teal`` via CSS relative-color * syntax so a tenant theme override of ``--brand-teal`` * cascades automatically through every alpha tint — no * hardcoded rgba mismatches. Modern browsers only (Safari * 16.4+, Chrome 119+, Firefox 128+); Syncc's PWA target * is well inside that window. */ --sk-teal: var(--brand-teal, #0E8C71); --sk-teal-bright: var(--brand-teal-bright, #25D6AD); --sk-teal-soft: rgb(from var(--sk-teal) r g b / 0.10); --sk-teal-soft-2: rgb(from var(--sk-teal) r g b / 0.20); --sk-teal-line: rgb(from var(--sk-teal) r g b / 0.28); /* Secondary accents — soft variants follow the same * derive-from-base pattern as teal so any future theme * override of these tokens cascades through the tints. */ --sk-amber: #B45309; --sk-amber-soft: rgb(from var(--sk-amber) r g b / 0.12); --sk-rose: #BE123C; --sk-rose-soft: rgb(from var(--sk-rose) r g b / 0.12); --sk-sky: #0369A1; --sk-sky-soft: rgb(from var(--sk-sky) r g b / 0.12); --sk-violet: #6D28D9; --sk-violet-soft: rgb(from var(--sk-violet) r g b / 0.12); --sk-indigo: #4338CA; --sk-indigo-soft: rgb(from var(--sk-indigo) r g b / 0.12); /* Shadows — softer than the existing brand-shadow set so * cards float without screaming. Reserved for hero * containers / sticky bars, not regular content rows. */ --sk-shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 12px rgba(11, 18, 32, 0.04); --sk-shadow-hero: 0 8px 24px rgba(11, 18, 32, 0.08); /* ── Radii ──────────────────────────────────────────────── * Three sizes: small (chips / pills), medium (cards / * agenda rows), large (heroes / sheet handles). */ --sk-radius-sm: 10px; --sk-radius-md: 14px; --sk-radius-lg: 22px; --sk-radius-pill: 999px; /* ── Type scale — display + body ────────────────────────── * Hero / section titles use Instrument Serif (loaded by * base.html for the whole app). Italic style on hero * personality words ("Emre", "events", "schedule") via * inline ```` tags in the surface markup. * * Body is Inter (system stack as fallback) so the surface * reads like Apple HIG on iOS + matches the existing * brand-font-body var. * * Numeric mono (ID card, time-stub) inherits the brand * mono token. */ --sk-font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --sk-font-body: var(--brand-font-body, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif); --sk-font-mono: var(--brand-font-mono, 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace); /* ── Bottom-tab safe spacing ────────────────────────────── * The mobile bottom tabs are 78px tall (current implementation * in base.html). Surfaces use this to add bottom padding so * the last row of content isn't clipped by the tabbar. */ --sk-tabbar-height: 78px; --sk-tabbar-safe: calc(var(--sk-tabbar-height) + env(safe-area-inset-bottom, 0px)); } /* ── Dark mode parity ──────────────────────────────────────── * Mirrors the existing Syncc dark scope. Every paper / * ink / line / accent has a dark equivalent so the kit reads * identically in both modes. */ html.dark, .dark { --sk-paper: #0A1220; --sk-paper-2: #0F1A2D; --sk-card: rgba(255, 255, 255, 0.04); --sk-ink: #F4F6FA; --sk-ink-2: rgba(244, 246, 250, 0.66); --sk-ink-3: rgba(244, 246, 250, 0.42); --sk-ink-4: rgba(244, 246, 250, 0.22); --sk-line: rgba(255, 255, 255, 0.08); --sk-line-2: rgba(255, 255, 255, 0.14); /* Teal stays the brighter variant in dark mode (mirrors * existing brand-teal-bright behaviour). Soft / line * variants re-derive from the (now bright) ``--sk-teal`` * via the same relative-color syntax as light mode, so a * tenant theme override propagates through dark-mode tints * automatically. */ --sk-teal: var(--brand-teal-bright, #25D6AD); --sk-teal-bright: var(--brand-teal-bright, #25D6AD); --sk-teal-soft: rgb(from var(--sk-teal) r g b / 0.12); --sk-teal-soft-2: rgb(from var(--sk-teal) r g b / 0.24); --sk-teal-line: rgb(from var(--sk-teal) r g b / 0.32); --sk-amber: #FBBF24; --sk-amber-soft: rgb(from var(--sk-amber) r g b / 0.18); --sk-rose: #FDA4AF; --sk-rose-soft: rgb(from var(--sk-rose) r g b / 0.18); --sk-sky: #7DD3FC; --sk-sky-soft: rgb(from var(--sk-sky) r g b / 0.18); --sk-violet: #C4B5FD; --sk-violet-soft: rgb(from var(--sk-violet) r g b / 0.18); --sk-indigo: #A5B4FC; --sk-indigo-soft: rgb(from var(--sk-indigo) r g b / 0.18); --sk-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3); --sk-shadow-hero: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ═══════════════════════════════════════════════════════════════ * Shared primitives — opt-in via class. Surfaces compose these * directly; the existing surface-specific styles (.myday-*, * .adm-cmd-*, etc.) keep working untouched because every selector * here is namespaced under ``.sk-*``. * ═══════════════════════════════════════════════════════════════ */ /* ── Italic personality em ────────────────────────────────── * Used for the maintainer's "personality words" in headings — * the name in "Good morning, *Emre*", or the noun in * "Today's *schedule*". Italic + brand-teal so it reads as * the kit's signature gesture. Lives globally so any surface * heading can render ```` tags this way without a * per-surface override. Doesn't ship on its own; surfaces * still have to render the ```` markup. */ .sk-em, .sk-hero-title em, .sk-section-title em, .sk-greeting em { font-style: italic; color: var(--sk-teal); } /* ── Hero title ───────────────────────────────────────────── * Big serif heading; surfaces use it for "Good morning, Emre" * and "Today's *events*"-style page leads. */ .sk-hero-title { font: 400 clamp(32px, 4vw, 42px)/1.05 var(--sk-font-display); letter-spacing: -0.025em; color: var(--sk-ink); margin: 0; } .sk-hero-eyebrow { font: 600 10.5px/1 var(--sk-font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sk-teal); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sk-hero-eyebrow .date { color: var(--sk-ink-3); font: italic 400 14px/1 var(--sk-font-display); letter-spacing: 0; text-transform: none; } .sk-hero-sub { margin-top: 12px; color: var(--sk-ink-2); font: 400 14px/1.4 var(--sk-font-body); } /* ── Section title ────────────────────────────────────────── * Used as the in-page section eyebrow ("Today's *schedule*", * "Recent *activity*"). Smaller than the hero title but * keeps the serif + italic-em pattern. */ .sk-section-title { margin: 0; font: 400 20px/1.2 var(--sk-font-display); letter-spacing: -0.01em; color: var(--sk-ink); } /* ── Anchor ───────────────────────────────────────────────── * The "23 *min*" countdown block — biggest single number on * the page, italic mono-ish unit beside it. Surfaces render * this as the headline answer to "what's most relevant right * now" (next-bell countdown, next-event time, etc.). */ .sk-anchor-label { font: 500 11.5px/1 var(--sk-font-body); color: var(--sk-ink-3); margin-bottom: 6px; } .sk-anchor-value { font: 400 clamp(44px, 5.5vw, 56px)/0.98 var(--sk-font-display); letter-spacing: -0.03em; color: var(--sk-ink); } .sk-anchor-value .unit { font-size: 0.34em; font-style: italic; color: var(--sk-ink-3); margin-left: 8px; } .sk-anchor-context { margin-top: 8px; color: var(--sk-ink-2); font: 400 13.5px/1.4 var(--sk-font-body); } .sk-anchor-context a { color: var(--sk-teal); text-decoration: none; font-weight: 500; } /* ── Quick action chip ────────────────────────────────────── * The 4-up row at the top of My Day / mobile dashboards. * 56-px rounded chip with the glyph color-tinted, label * underneath. Per-color modifier classes follow the kit's * accent vocabulary. */ .sk-quick-tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--sk-ink-2); font: 500 10.5px/1.2 var(--sk-font-body); text-align: center; } .sk-quick-glyph { width: 56px; height: 56px; border-radius: var(--sk-radius-md); display: grid; place-items: center; } .sk-quick-glyph svg { width: 24px; height: 24px; } .sk-quick-glyph--teal { background: var(--sk-teal-soft); color: var(--sk-teal); } .sk-quick-glyph--sky { background: var(--sk-sky-soft); color: var(--sk-sky); } .sk-quick-glyph--amber { background: var(--sk-amber-soft); color: var(--sk-amber); } .sk-quick-glyph--violet { background: var(--sk-violet-soft); color: var(--sk-violet); } .sk-quick-glyph--rose { background: var(--sk-rose-soft); color: var(--sk-rose); } /* Reduced-motion safety: any animated glyph (pulse / shimmer) * sits behind this guard. Currently no animations on .sk-* * but future additions inherit the rule. */ @media (prefers-reduced-motion: reduce) { .sk-quick-tile, .sk-anchor-value { transition: none; animation: none; } }