/* ============================================================ SugarNet · Design Tokens The single source of truth for color, type, spacing, radii, shadows, and motion. Import this at the top of any project. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Quicksand:wght@300;400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* ────────────────── Color · Brand ────────────────── */ --sn-lime: #95c93d; /* PRIMARY — flagship lime */ --sn-lime-deep: #65902a; /* "net" wordmark, links, CTAs */ --sn-lime-soft: #cde694; /* Tints, secondary fills */ --sn-lime-50: #f4fae8; /* Light tinted surface */ --sn-sun: #d97e1f; /* Sun mark, warm accent */ --sn-sun-soft: #f3c83b; /* Highlight, dot accents */ --sn-cane-brown: #6b3a14; /* Editorial, captions */ --sn-cane-brown-d: #3d220e; /* Deep warm surface */ /* ────────────────── Color · Blades ────────────────── */ --sn-blade-1: #5ac257; --sn-blade-2: #3fa241; --sn-blade-3: #7ad06c; /* ────────────────── Color · Neutrals ────────────────── */ --sn-ink: #1a1a16; /* Primary type, dark surface */ --sn-ink-soft: #5d5b50; /* Secondary type */ --sn-shadow: #b6b3a3; /* Placeholder text */ --sn-paper: #ffffff; /* Pure white card */ --sn-cream: #fbfaf3; /* PRIMARY SURFACE — warm white */ --sn-mist: #f3f1e6; /* Alt panel, soft fills */ --sn-stone: #d8d6c7; /* Hairline borders */ /* ────────────────── Color · Semantic ────────────────── */ --sn-fg-1: var(--sn-ink); --sn-fg-2: var(--sn-ink-soft); --sn-fg-brand: var(--sn-lime-deep); --sn-fg-on-brand: var(--sn-paper); --sn-bg-page: var(--sn-cream); --sn-bg-card: var(--sn-paper); --sn-bg-soft: var(--sn-mist); --sn-bg-brand: var(--sn-lime); --sn-bg-dark: var(--sn-ink); --sn-stroke: var(--sn-stone); --sn-status-info: #2a86c3; --sn-status-warn: #e0a020; --sn-status-error: #d04b2a; --sn-status-ok: var(--sn-lime-deep); /* ────────────────── Type · Families ────────────────── */ --sn-font-display: 'Lora', Georgia, 'Times New Roman', serif; /* italic for "sugar" */ --sn-font-mark: 'Quicksand', 'Avenir Next', system-ui, sans-serif; /* bold for "net" */ --sn-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --sn-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ────────────────── Type · Scale ────────────────── */ --sn-t-display-xl: 96px; --sn-t-display: 64px; --sn-t-h1: 44px; --sn-t-h2: 32px; --sn-t-h3: 24px; --sn-t-h4: 20px; --sn-t-body-lg: 18px; --sn-t-body: 16px; --sn-t-body-sm: 14px; --sn-t-caption: 12px; --sn-t-eyebrow: 11px; /* ────────────────── Type · Rhythm ────────────────── */ --sn-lh-tight: 1.05; --sn-lh-snug: 1.2; --sn-lh-base: 1.55; --sn-lh-loose: 1.7; --sn-tr-display: 0.02em; --sn-tr-eyebrow: 0.22em; --sn-tr-body: 0; /* ────────────────── Spacing · 4 px base ────────────────── */ --sn-s-1: 4px; --sn-s-2: 8px; --sn-s-3: 12px; --sn-s-4: 16px; --sn-s-5: 20px; --sn-s-6: 24px; --sn-s-7: 32px; --sn-s-8: 40px; --sn-s-9: 56px; --sn-s-10: 72px; --sn-s-11: 96px; --sn-s-12: 128px; /* ────────────────── Radii ────────────────── */ --sn-r-xs: 4px; --sn-r-sm: 8px; --sn-r-md: 14px; --sn-r-lg: 22px; --sn-r-xl: 34px; --sn-r-pill: 999px; /* ────────────────── Shadows · paper-like ────────────────── */ --sn-shadow-sm: 0 1px 2px rgba(26,26,22,0.06); --sn-shadow-card: 0 6px 18px rgba(26,26,22,0.08), 0 1px 3px rgba(26,26,22,0.06); --sn-shadow-pop: 0 18px 38px rgba(26,26,22,0.12), 0 2px 6px rgba(26,26,22,0.06); --sn-shadow-hi: 0 28px 56px rgba(26,26,22,0.18); /* ────────────────── Motion ────────────────── */ --sn-ease-out: cubic-bezier(.2,.7,.3,1); --sn-ease-in-out: cubic-bezier(.6,.05,.3,1); --sn-dur-fast: 120ms; --sn-dur-base: 220ms; --sn-dur-slow: 380ms; } /* ────────────────── Utility · Type classes ────────────────── */ .sn-display-xl, .sn-display, .sn-h1, .sn-h2, .sn-h3, .sn-h4 { font-family: var(--sn-font-mark); color: var(--sn-fg-1); letter-spacing: var(--sn-tr-display); line-height: var(--sn-lh-tight); font-weight: 300; text-transform: uppercase; margin: 0; } .sn-display-xl { font-size: var(--sn-t-display-xl); } .sn-display { font-size: var(--sn-t-display); } .sn-h1 { font-size: var(--sn-t-h1); font-weight: 400; } .sn-h2 { font-size: var(--sn-t-h2); font-weight: 400; } .sn-h3 { font-size: var(--sn-t-h3); font-weight: 500; text-transform: none; } .sn-h4 { font-size: var(--sn-t-h4); font-weight: 600; text-transform: none; } .sn-script { font-family: var(--sn-font-display); font-style: italic; font-weight: 500; color: var(--sn-fg-1); } .sn-eyebrow { font-family: var(--sn-font-body); font-size: var(--sn-t-eyebrow); text-transform: uppercase; letter-spacing: var(--sn-tr-eyebrow); font-weight: 700; color: var(--sn-cane-brown); } .sn-body { font-family: var(--sn-font-body); font-size: var(--sn-t-body); line-height: var(--sn-lh-base); color: var(--sn-fg-1); } .sn-body-lg { font-family: var(--sn-font-body); font-size: var(--sn-t-body-lg); line-height: var(--sn-lh-base); color: var(--sn-fg-1); } .sn-body-sm { font-family: var(--sn-font-body); font-size: var(--sn-t-body-sm); line-height: var(--sn-lh-base); color: var(--sn-fg-2); } .sn-caption { font-family: var(--sn-font-body); font-size: var(--sn-t-caption); color: var(--sn-fg-2); letter-spacing: 0.02em; } /* ────────────────── Reset helper ────────────────── */ .sn-base { font-family: var(--sn-font-body); color: var(--sn-fg-1); background: var(--sn-bg-page); font-size: var(--sn-t-body); line-height: var(--sn-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }