/* ============================================================ Deck Do! — DROP-IN DESIGN TOKENS (consolidated, single file) Link this once and use the CSS custom properties anywhere. Generated from the Deck Do! design system. Fonts expected at ./assets/fonts/ and the Pixelify Sans pixel face from Google. ============================================================ */ /* ===== fonts.css ===== */ /* Deck Do! — Webfonts. ─────────────────────────────────────────────────────────── BRAND fonts (now wired in from licensed files the user provided): • Satoshi — display / titles (replaces the earlier Broadacre stand-in) • Aileron — body text Pixel / retro accents (XP, badges, "+2"): • FindReplace-Black is the brand pixel face but was NOT provided, so we still load the closest free substitute, Pixelify Sans, for those. ─────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap"); /* ── Satoshi — titles / display ── */ @font-face { font-family: "Satoshi"; src: url("./assets/fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("./assets/fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("./assets/fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("./assets/fonts/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* ── Aileron — body ── */ @font-face { font-family: "Aileron"; src: url("./assets/fonts/Aileron-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Aileron"; src: url("./assets/fonts/Aileron-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aileron"; src: url("./assets/fonts/Aileron-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Aileron"; src: url("./assets/fonts/Aileron-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* ===== colors.css ===== */ /* Deck Do! — COLOR SYSTEM ════════════════════════════════════════════════════════════════ A warm, playful card-game palette: cream paper, deep navy ink, and a lively set of "deck" accents (olive, lime, orange, lavender, sky, mustard, leaf-green) + a red pixel-heart accent. Architecture: 1. RAW palette — fixed brand hues (--cream-*, --navy-*, --olive …) 2. SEMANTIC aliases — what UI code should use (--surface-*, --text-* …) 3. ACCENT theming — --accent / --accent-ink, settable per area NOTE: "vitality" (the app lighting up ↔ resting) and "modo bajo" (low-energy palette) live in vitality.css, which re-modulates these. ════════════════════════════════════════════════════════════════ */ :root { /* ── 1. RAW PALETTE ─────────────────────────────────────────── */ /* Paper / cream surfaces */ --cream-50: #FFFBF2; /* lightest card */ --cream-100: #FBF4E6; /* raised surface */ --cream-200: #F7ECD9; /* app background (brand cream) */ --cream-300: #EFE2CB; /* sunken / inset */ --cream-400: #E4D3B6; /* hairline on cream */ /* Navy ink — primary contrast, text, the dark card face */ --navy-900: #1E1D3A; /* deepest */ --navy-800: #26254A; /* brand navy (card face, headings) */ --navy-700: #323065; /* raised navy */ --navy-600: #46447F; /* muted navy text */ --navy-400: #8482AE; /* navy on cream, secondary text */ --navy-200: #C7C5DE; /* faint navy line */ /* ── Deck accent hues (sampled from brand sheet) ── */ --olive: #9C9A1F; --olive-soft: #C3C24E; --lime: #C9D636; --lime-soft: #E2EA86; --orange: #FF6B38; --orange-soft: #FFB08C; --lavender: #C7A2E8; --lavender-soft:#E0CCF1; --purple: #A871E0; --purple-soft: #C9A6EC; --sky: #5CB1FB; --sky-soft: #A8D7FD; --mustard: #FACB2E; --mustard-soft:#FDE39A; --leaf: #4FB57E; --leaf-soft: #A0DCBC; --red: #ED4D3D; --red-soft: #F6A096; /* pixel-heart accent */ /* ── 2. SEMANTIC SURFACES ───────────────────────────────────── */ --surface-app: var(--cream-200); /* page background */ --surface-card: var(--cream-50); /* default card / sheet */ --surface-raised: var(--cream-100); /* chips, inputs */ --surface-sunken: var(--cream-300); /* wells, tracks */ --surface-ink: var(--navy-800); /* dark card face (the "card back") */ --surface-overlay: rgba(30, 29, 58, 0.55); /* modal scrim */ /* ── TEXT ── */ --text-strong: var(--navy-900); /* headings */ --text-body: var(--navy-800); /* default copy */ --text-muted: var(--navy-400); /* secondary, captions, tags */ --text-faint: var(--navy-200); /* disabled */ --text-on-ink: var(--cream-50); /* text on navy card face */ --text-on-accent: #FFFFFF; /* text on a saturated accent */ /* ── LINES / BORDERS ── */ --line: var(--cream-400); /* default hairline on cream */ --line-strong: var(--navy-200); /* stronger divider */ --line-ink: rgba(255,255,255,0.12); /* divider on navy face */ /* ── 3. ACCENT (theme color of the current area) ── */ /* Override --accent on any scope to retheme a section. Default = orange. */ --accent: var(--orange); --accent-soft: var(--orange-soft); --accent-ink: #FFFFFF; /* text/icon that sits on --accent */ /* ── SEMANTIC STATUS ── */ --ok: var(--leaf); --warn: var(--mustard); --danger:var(--red); --focus-ring: color-mix(in srgb, var(--sky) 70%, #fff); /* ── PRIORITY scale (P1 critical → P4 whenever) ── */ --pri-1: var(--red); --pri-1-soft: var(--red-soft); --pri-2: var(--orange); --pri-2-soft: var(--orange-soft); --pri-3: var(--mustard); --pri-3-soft: var(--mustard-soft); --pri-4: var(--navy-400); --pri-4-soft: var(--cream-300); /* ── CATEGORY accent map (each life-area gets a hue) ── */ --cat-personal: var(--lavender); --cat-work: var(--sky); --cat-fun: var(--orange); --cat-fitness: var(--leaf); --cat-mind: var(--purple); --cat-money: var(--mustard); } /* Convenience helper classes for accent theming a subtree. */ [data-accent="olive"] { --accent: var(--olive); --accent-soft: var(--olive-soft); --accent-ink:#fff; } [data-accent="lime"] { --accent: var(--lime); --accent-soft: var(--lime-soft); --accent-ink:var(--navy-900); } [data-accent="orange"] { --accent: var(--orange); --accent-soft: var(--orange-soft); --accent-ink:#fff; } [data-accent="lavender"]{ --accent: var(--lavender);--accent-soft: var(--lavender-soft);--accent-ink:var(--navy-900); } [data-accent="purple"] { --accent: var(--purple); --accent-soft: var(--purple-soft); --accent-ink:#fff; } [data-accent="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); --accent-ink:var(--navy-900); } [data-accent="mustard"] { --accent: var(--mustard); --accent-soft: var(--mustard-soft); --accent-ink:var(--navy-900); } [data-accent="leaf"] { --accent: var(--leaf); --accent-soft: var(--leaf-soft); --accent-ink:#fff; } [data-accent="red"] { --accent: var(--red); --accent-soft: var(--red-soft); --accent-ink:#fff; } /* ===== typography.css ===== */ /* Deck Do! — TYPOGRAPHY Display : Satoshi (titles, wordmark) Body : Aileron (copy) Pixel : Pixelify Sans (substitute for FindReplace-Black — retro accents) Spanish-first product; copy is warm, lower-stakes, playful. */ :root { /* ── Families ── */ --font-display: "Satoshi", system-ui, sans-serif; /* titles / display */ --font-body: "Aileron", system-ui, sans-serif; /* body text */ --font-pixel: "Pixelify Sans", "FindReplace", ui-monospace, monospace; /* retro accents */ /* ── Weights ── */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extra: 800; /* @kind font */ /* ── Type scale (rem, 16px base) ── */ --text-xs: 0.75rem; /* 12 — tags, fine print */ --text-sm: 0.875rem; /* 14 — captions, meta */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body, card title */ --text-lg: 1.375rem; /* 22 — section title */ --text-xl: 1.75rem; /* 28 — screen title */ --text-2xl: 2.25rem; /* 36 — display */ --text-3xl: 3rem; /* 48 — hero */ --text-4xl: 4rem; /* 64 — wordmark / big number */ /* ── Line heights ── */ --leading-tight: 1.08; /* @kind other */ --leading-snug: 1.25; /* @kind other */ --leading-normal:1.5; /* @kind other */ --leading-relaxed:1.7; /* @kind other */ /* ── Tracking ── */ --tracking-tight: -0.02em; /* @kind other */ --tracking-normal: 0; /* @kind other */ --tracking-wide: 0.04em; /* @kind other */ --tracking-pixel: 0.02em; /* @kind other */ /* ── Semantic roles ── @kind font */ --type-wordmark: var(--fw-extra) var(--text-4xl)/var(--leading-tight) var(--font-display); --type-hero: var(--fw-bold) var(--text-3xl)/var(--leading-tight) var(--font-display); --type-display: var(--fw-bold) var(--text-2xl)/var(--leading-tight) var(--font-display); --type-title: var(--fw-bold) var(--text-xl)/var(--leading-snug) var(--font-display); --type-section: var(--fw-semibold) var(--text-lg)/var(--leading-snug) var(--font-display); --type-card-title: var(--fw-semibold) var(--text-md)/var(--leading-snug) var(--font-body); --type-body: var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-body); --type-body-strong: var(--fw-semibold) var(--text-base)/var(--leading-normal) var(--font-body); --type-caption: var(--fw-medium) var(--text-sm)/var(--leading-normal) var(--font-body); --type-tag: var(--fw-semibold) var(--text-xs)/1 var(--font-body); --type-pixel: var(--fw-regular) var(--text-sm)/1.2 var(--font-pixel); --type-pixel-lg: var(--fw-regular) var(--text-lg)/1.1 var(--font-pixel); } /* ===== spacing.css ===== */ /* Deck Do! — SPACING, RADII, SHADOWS, MOTION The physical feel: rounded "claymation/sticker" objects, soft drop shadows, chunky tactile cards, washi-tape & marker motifs. */ :root { /* ── Spacing scale (4px base) ── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ /* ── Radii — everything is soft & rounded (sticker/clay) ── */ --radius-xs: 6px; /* tags, tiny chips */ --radius-sm: 10px; /* inputs, small controls */ --radius-md: 16px; /* buttons, list rows */ --radius-lg: 22px; /* the task CARD */ --radius-xl: 28px; /* sheets, panels */ --radius-2xl: 36px; /* hero blocks */ --radius-pill: 999px;/* chips, pills, mascot speech */ /* ── Touch / hit targets (PWA, mobile-first) ── */ --hit-min: 44px; --tab-h: 64px; /* ── SHADOWS — soft claymation drops, never harsh ── */ --shadow-xs: 0 1px 2px rgba(38,37,74,0.08); --shadow-sm: 0 2px 6px rgba(38,37,74,0.10); --shadow-md: 0 6px 16px rgba(38,37,74,0.12); --shadow-lg: 0 14px 34px rgba(38,37,74,0.16); --shadow-xl: 0 24px 60px rgba(38,37,74,0.22); /* Card "lift" — playful slightly-offset drop, like a card on a table */ --shadow-card: 0 4px 0 0 var(--cream-300), 0 10px 22px rgba(38,37,74,0.13); --shadow-card-hover: 0 6px 0 0 var(--cream-300), 0 16px 30px rgba(38,37,74,0.18); /* Sticker = thick paper outline + tiny offset shadow */ --sticker-outline: 0 0 0 3px var(--cream-50), 0 4px 10px rgba(38,37,74,0.18); /* Glow used by vitality / celebration (accent-tinted) */ --glow-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 26px color-mix(in srgb, var(--accent) 35%, transparent); /* Inset for pressed wells / progress tracks */ --shadow-inset: inset 0 2px 4px rgba(38,37,74,0.10); /* ── Borders ── @kind spacing */ --border-w: 1.5px; /* default hairline */ --border-w-bold: 2.5px; /* chunky playful outline */ /* ── MOTION — bouncy, alive, never sluggish ── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.2, 1.4, 0.4, 1); /* @kind other */ --ease-soft-spring: cubic-bezier(0.2, 0.85, 0.3, 1.15); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 380ms; /* @kind other */ --dur-celebrate: 700ms;/* @kind other */ --dur-vitality: 900ms; /* @kind other */ /* ── Z-index ── */ --z-nav: 40; /* @kind other */ --z-toast: 60; /* @kind other */ --z-modal: 80; /* @kind other */ --z-celebrate: 90; /* @kind other */ } /* ===== vitality.css ===== */ /* Deck Do! — VITALITY & MODE ★ the signature mechanic ★ ════════════════════════════════════════════════════════════════ "The whole app is one giant living progress bar." Its warmth/glow tracks real activity. CRITICAL anti-guilt rule: powering DOWN is REST, never punishment — soft, calm, welcoming. Re-lighting is one tap and the return is celebrated. Apply data-vitality to any living container (app shell, header, mascot, accents). Four steps along the spectrum: reposo → resting (calm, low glow, cool-neutral) tibio → warming (a little life returning) encendido → lit (bright, engaged — default active) pleno → full (peak energy / streak, max glow) Each step sets: --vita-glow shadow used by living elements --vita-warm a warm wash laid over the app background --vita-accent-mix how saturated accents read (0 calm → 1 vivid) --mascot-mood consumed by the mascot component ════════════════════════════════════════════════════════════════ */ :root, [data-vitality="encendido"] { /* default = lit */ --vita-glow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 26%, transparent); --vita-warm: color-mix(in srgb, var(--mustard) 6%, transparent); --vita-accent-mix: 88%; --vita-surface: var(--cream-200); --mascot-mood: "awake"; /* @kind other */ --vita-pulse: 1; /* @kind other */ } [data-vitality="reposo"] { /* resting — calm, NOT dim/sad */ --vita-glow: 0 2px 10px rgba(38,37,74,0.10); --vita-warm: color-mix(in srgb, var(--sky) 5%, transparent); --vita-accent-mix: 55%; --vita-surface: color-mix(in srgb, var(--cream-200) 92%, var(--sky-soft)); --mascot-mood: "resting"; /* @kind other */ --vita-pulse: 0; /* @kind other */ } [data-vitality="tibio"] { /* warming up */ --vita-glow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent); --vita-warm: color-mix(in srgb, var(--mustard) 4%, transparent); --vita-accent-mix: 72%; --vita-surface: var(--cream-200); --mascot-mood: "stirring"; /* @kind other */ --vita-pulse: 0.5; /* @kind other */ } [data-vitality="pleno"] { /* peak — streak / on fire */ --vita-glow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 28px color-mix(in srgb, var(--mustard) 45%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 34%, transparent); --vita-warm: color-mix(in srgb, var(--orange) 9%, transparent); --vita-accent-mix: 100%; --vita-surface: color-mix(in srgb, var(--cream-200) 88%, var(--mustard-soft)); --mascot-mood: "thriving"; /* @kind other */ --vita-pulse: 1.5; /* @kind other */ } /* Living surface helper: paint a warm wash + breathe. Opt-in via class. */ .dd-living { background: radial-gradient(120% 80% at 50% -10%, var(--vita-warm), transparent 60%), var(--vita-surface); transition: background var(--dur-vitality) var(--ease-out); } /* ════════════════════════════════════════════════════════════════ MODO BAJO DE ENERGÍA — user-toggled low-energy day. A SEPARATE, calmer palette: soft sage/teal, lower contrast, slow. Ultra anti-guilt; only micro-actions surface. Repaints the whole app, so it truly *feels* like the mode changed. Apply [data-mode="bajo"] (or body.modo-bajo) on the root. ════════════════════════════════════════════════════════════════ */ [data-mode="bajo"], body.modo-bajo { --cream-50: #F4F6F1; --cream-100: #EDF1EA; --cream-200: #E7EDE5; /* soft sage paper */ --cream-300: #DBE3D8; --cream-400: #CAD5C6; --navy-900: #28332F; --navy-800: #33433D; /* muted pine ink */ --navy-600: #51635B; --navy-400: #7E8E86; --navy-200: #BFCBC4; /* accents pull toward calm sage/teal; saturation comes way down */ --accent: #6FA890; --accent-soft: #B7D4C7; --accent-ink: #ffffff; --orange: #C98A6A; --orange-soft:#E3C2B1; --mustard: #D9C173; --mustard-soft:#ECDFB4; --leaf: #6FA890; --leaf-soft: #B7D4C7; --sky: #84B6C4; --sky-soft: #BFDDE4; --lavender:#B6AED0; --lavender-soft:#D7D2E6; --shadow-card: 0 3px 0 0 var(--cream-300), 0 8px 18px rgba(40,51,47,0.10); --vita-glow: 0 2px 12px rgba(40,51,47,0.10); --vita-accent-mix: 50%; --mascot-mood: "cozy"; /* @kind other */ } [data-mode="bajo"] *, body.modo-bajo * { transition-duration: 520ms; /* everything slows, gentler rhythm */ }