/* ============================================================ CANTINHO KIDS — Design Tokens Moda circular infantil · Nova Friburgo Foundations: color, type, spacing, radius, shadow, motion. "App calmo": alto contraste, alvos grandes, uso repetitivo. ============================================================ */ /* Fonts: Google Fonts (substitutes — see README font notes) --- Display/headings : Fredoka (rounded, chunky, friendly = logo wordmark) Body / UI : Nunito (rounded sans, calm, very legible) Accent script : Pacifico (the "Moda Circular" handwritten feel) */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Pacifico&display=swap'); :root { /* ---------- BRAND CORE (sampled from the logo) ---------- */ --brand-green: #32620d; /* forest/olive — primary ink & actions */ --brand-green-700: #274d0a; /* pressed / deep */ --brand-green-300: #6f9a3f; /* soft green */ --brand-coral: #e74f51; /* heart coral — accent, sell, alerts */ --brand-coral-700: #c63b3d; /* pressed coral */ --brand-yellow: #f5b73f; /* sunny amarelo — highlights, QR, badges */ --brand-yellow-300: #fbd98a; /* soft yellow */ --brand-cream: #fdf6e9; /* base background */ --brand-cream-deep: #f6ecd6; /* alt surface / pressed cream */ /* ---------- TINTS / SOFT FILLS (calm, low-sat washes) ---------- */ --green-wash: #eaf1de; --coral-wash: #fde7e4; --yellow-wash: #fdf1d6; /* ---------- NEUTRALS (warm-tinted, never pure grey) ---------- */ --ink: #2b2a24; /* primary text on cream */ --ink-2: #5c5849; /* secondary text */ --ink-3: #8d8773; /* muted / placeholder */ --line: #e6ddc8; /* hairline borders on cream */ --line-strong: #d8ccad; --white: #fffdf8; /* card surface (warm white) */ /* ---------- SEMANTIC ROLES ---------- */ --bg: var(--brand-cream); --surface: var(--white); --surface-alt: var(--brand-cream-deep); --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --border: var(--line); --primary: var(--brand-green); --primary-press: var(--brand-green-700); --on-primary: #ffffff; --accent: var(--brand-coral); --accent-press: var(--brand-coral-700); --on-accent: #ffffff; --highlight: var(--brand-yellow); --on-highlight: #4a3408; --success: #4f8a2e; --success-wash: var(--green-wash); --warning: var(--brand-yellow); --warning-wash: var(--yellow-wash); --danger: var(--brand-coral); --danger-wash: var(--coral-wash); --info: #3f7fb0; /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, sans-serif; --font-script: 'Pacifico', 'Fredoka', cursive; /* ---------- TYPE SCALE (mobile-first, big & calm) ---------- */ --t-display: 34px; /* hero numbers / welcome */ --t-h1: 27px; /* screen title */ --t-h2: 22px; /* section title */ --t-h3: 19px; /* card title */ --t-body: 17px; /* default body / list item */ --t-body-lg: 19px; /* primary reading in calm app */ --t-label: 15px; /* field labels, meta */ --t-caption: 13px; /* timestamps, helper */ --t-button: 18px; /* big touch buttons */ --lh-tight: 1.12; --lh-snug: 1.28; --lh-body: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-x: 800; /* ---------- SPACING (8pt base, generous for touch) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --touch-min: 56px; /* min hit target — large for repetitive use */ /* ---------- RADIUS (soft, rounded, childlike) ---------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---------- SHADOWS (warm, soft, low — never harsh) ---------- */ --shadow-sm: 0 1px 2px rgba(74, 60, 20, .06); --shadow-md: 0 4px 14px rgba(74, 60, 20, .10); --shadow-lg: 0 10px 28px rgba(74, 60, 20, .14); --shadow-press: 0 1px 2px rgba(74, 60, 20, .10); --ring-focus: 0 0 0 4px rgba(50, 98, 13, .22); /* ---------- MOTION (gentle, slightly bouncy) ---------- */ --ease-soft: cubic-bezier(.34, 1.2, .64, 1); /* gentle overshoot */ --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: 130ms; --dur: 220ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC ELEMENT DEFAULTS ============================================================ */ .ck-display { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-display); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -.01em; } h1, .ck-h1 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-h1); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -.005em; margin: 0; } h2, .ck-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h3, .ck-h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } p, .ck-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; } .ck-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--t-label); line-height: 1.3; color: var(--fg-2); letter-spacing: .02em; text-transform: none; } .ck-caption { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--t-caption); line-height: 1.35; color: var(--fg-3); } .ck-script { font-family: var(--font-script); font-weight: 400; color: var(--accent); } .ck-num { font-family: var(--font-display); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } body.ck-app { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }