/* gancho — Design tokens for the marketing site. * Generated from the gancho Design System (colors + typography + spacing). * ONE confident green accent over a neutral, translucent, Apple-native canvas; * Auto / Light / Dark via the `data-theme` attribute on . */ /* ============================ COLOR ============================ */ :root { /* Brand accent (the single confident color) */ --green-500: #34c759; /* Apple system green */ --green-600: #2faa4d; /* pressed / hover-darken */ --green-400: #5bd676; --green-100: #e3f8e8; /* Neutral ramp (warm-cool Apple grays) */ --gray-0: #ffffff; --gray-50: #f5f5f7; --gray-100: #ececee; --gray-200: #e1e1e4; --gray-300: #c7c7cc; --gray-400: #aeaeb2; --gray-500: #8e8e93; --gray-600: #636366; --gray-700: #48484a; --gray-800: #2c2c2e; --gray-900: #1c1c1e; --black: #000000; /* Semantic: light */ --text-primary: rgba(0, 0, 0, 0.88); --text-secondary: rgba(0, 0, 0, 0.5); --text-tertiary: rgba(0, 0, 0, 0.32); --text-on-accent: #ffffff; --surface-app: var(--gray-50); --surface-card: var(--gray-0); --surface-selection: rgba(0, 0, 0, 0.06); --hairline: var(--gray-200); /* Liquid Glass: gancho's signature surface */ --glass-tint: rgba(255, 255, 255, 0.62); --glass-stroke: rgba(255, 255, 255, 0.5); --glass-blur: 24px; --glass-fallback: rgba(245, 245, 247, 0.96); /* Status */ --accent: var(--green-500); --sync-ok: var(--green-500); --warning: #ff9f0a; --danger: #ff3b30; /* Kind / type-badge colors (per content family) */ --kind-text: #8e8e93; --kind-richtext: #a2845e; --kind-url: #32ade6; --kind-email: #30b0c7; --kind-phone: #00c2a8; --kind-color: #5ac8fa; --kind-jwt: #af52de; --kind-json: #5e5ce6; --kind-uuid: #bf5af2; --kind-code: #5856d6; --kind-creditcard: #ff2d55; --kind-image: #ff9f0a; --kind-file: #007aff; --kind-address: #ff6b5e; --kind-date: #e8a317; --kind-tracking: #7d8aa0; --kind-secret: #ff3b30; --kind-link: var(--kind-url); --kind-filereference: var(--kind-file); --kind-phonenumber: var(--kind-phone); --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent); accent-color: var(--accent); } /* Auto — follow the OS */ @media (prefers-color-scheme: dark) { :root { --text-primary: rgba(255, 255, 255, 0.92); --text-secondary: rgba(255, 255, 255, 0.55); --text-tertiary: rgba(255, 255, 255, 0.32); --surface-app: var(--gray-900); --surface-card: var(--gray-800); --surface-selection: rgba(255, 255, 255, 0.1); --hairline: rgba(255, 255, 255, 0.12); --glass-tint: rgba(44, 44, 46, 0.55); --glass-stroke: rgba(255, 255, 255, 0.12); --glass-fallback: rgba(28, 28, 30, 0.96); --green-500: #30d158; --accent: #30d158; --sync-ok: #30d158; color-scheme: dark; } } /* Force light */ :root[data-theme="light"] { --text-primary: rgba(0, 0, 0, 0.88); --text-secondary: rgba(0, 0, 0, 0.5); --text-tertiary: rgba(0, 0, 0, 0.32); --surface-app: var(--gray-50); --surface-card: var(--gray-0); --surface-selection: rgba(0, 0, 0, 0.06); --hairline: var(--gray-200); --glass-tint: rgba(255, 255, 255, 0.62); --glass-stroke: rgba(255, 255, 255, 0.5); --glass-fallback: rgba(245, 245, 247, 0.96); --green-500: #34c759; --accent: #34c759; --sync-ok: #34c759; color-scheme: light; } /* Force dark */ :root[data-theme="dark"] { --text-primary: rgba(255, 255, 255, 0.92); --text-secondary: rgba(255, 255, 255, 0.55); --text-tertiary: rgba(255, 255, 255, 0.32); --surface-app: var(--gray-900); --surface-card: var(--gray-800); --surface-selection: rgba(255, 255, 255, 0.1); --hairline: rgba(255, 255, 255, 0.12); --glass-tint: rgba(44, 44, 46, 0.55); --glass-stroke: rgba(255, 255, 255, 0.12); --glass-fallback: rgba(28, 28, 30, 0.96); --green-500: #30d158; --accent: #30d158; --sync-ok: #30d158; color-scheme: dark; } /* ========================= TYPOGRAPHY ========================= */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, monospace; --text-caption: 11px; --text-body: 13px; --text-title: 15px; --text-large: 22px; --text-footnote: 12px; --text-headline: 17px; --text-display: 34px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.45; --tracking-display: -0.02em; --tracking-title: -0.01em; --tracking-normal: 0; } /* =================== SPACING · RADIUS · ELEVATION =================== */ :root { --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --radius-sm: 6px; --radius-card: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --stroke-hairline: 1px; --stroke-focus: 1.5px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04); --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.18); --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-normal: 220ms; }