/* ============================================================================= PhotoEditRocket — Design Tokens Single source of truth for color, type, spacing, radius, shadow and motion across the marketing website AND the try-app editor. WHY THE --pe- PREFIX -------------------- The editor (try-app/index.html) and the website (design.css) already define overlapping variable names — e.g. both use --space-1 and --accent, but with DIFFERENT values (the editor runs a denser 2px spacing base; the site uses a 4px base). Importing a file that redefines --space-* would silently break one of them. Every shared token here is therefore namespaced --pe-* so it can be dropped into either surface with zero collisions. Existing variables keep working; new/updated components reference the --pe-* tokens, and the two surfaces are mapped to them in the "Surface bridges" section at the bottom. USAGE ----- (load FIRST) color: var(--pe-ink); background: var(--pe-surface); padding: var(--pe-space-4) var(--pe-space-5); border-radius: var(--pe-r-md); ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. BRAND COLOR — the 4-color signature palette Blue leads (primary/accent). Red, amber and green are the supporting brand colors and the stops of the signature gradient. Do not introduce new hues; derive tints/shades from these. --------------------------------------------------------------------------- */ --pe-blue: #2563EB; /* primary / accent */ --pe-blue-rgb: 37, 99, 235; --pe-red: #EF4444; /* destructive / alert accent */ --pe-red-rgb: 239, 68, 68; --pe-amber: #F59E0B; /* warning / highlight accent */ --pe-amber-rgb: 245, 158, 11; --pe-green: #10B981; /* success / positive accent */ --pe-green-rgb: 16, 185, 129; /* Signature gradients */ --pe-grad: linear-gradient(95deg, #2563EB 0%, #EF4444 35%, #F59E0B 68%, #10B981 100%); --pe-grad-alt: linear-gradient(95deg, #7EE0D4 0%, #34D4B5 45%, #8B5CF6 100%); --pe-grad-blue: linear-gradient(180deg, #4f86f0 0%, #2563EB 55%, #1b4fc2 100%); /* --------------------------------------------------------------------------- 2. ACCENT SCALE — blue, the interactive color --pe-accent-fg is the text/icon color that sits ON a filled accent surface; the editor recomputes it at runtime to guarantee WCAG AA (>=4.5:1) when the user picks a custom accent, but #ffffff is the default and the safe fallback. --------------------------------------------------------------------------- */ --pe-accent: var(--pe-blue); --pe-accent-rgb: var(--pe-blue-rgb); --pe-accent-light: #4f86f0; /* hover / lifted accent */ --pe-accent-deep: #1b4fc2; /* pressed / gradient bottom */ --pe-accent-fg: #ffffff; /* text/icon on a filled accent */ --pe-accent-tint: #cfe0ff; /* accent text on a dark background */ --pe-accent-soft: rgba(37, 99, 235, .14); /* faint accent wash */ /* Secondary/warm accent used for stars, highlights, "pro" flourishes */ --pe-accent-2: #f0bd62; /* --------------------------------------------------------------------------- 3. NEUTRALS — dark theme surfaces & lines A single ramp from deepest canvas to raised control. The editor's chrome uses very slightly cooler literals (see Surface bridges); these are the canonical shared values. --------------------------------------------------------------------------- */ --pe-bg: #0a0b10; /* page / app canvas */ --pe-bg-soft: #11131c; /* subtle raised background */ --pe-surface: #13151d; /* cards, panels */ --pe-surface-2: #1c1f29; /* nested surface / hover */ --pe-surface-3: #202832; /* raised control (buttons, inputs) */ --pe-workspace: #0b0e12; /* editor canvas backdrop */ --pe-border: rgba(255, 255, 255, .08); /* default hairline */ --pe-border-strong: rgba(255, 255, 255, .14); /* emphasised edge */ --pe-line: rgba(255, 255, 255, .065); /* faint divider */ /* Control (button/input) fills for the app chrome */ --pe-control: #202832; --pe-control-hover: #2c3543; --pe-control-active: #333e4d; /* --------------------------------------------------------------------------- 4. INK — text on dark Contrast on --pe-bg: ink 17.9:1, ink-soft 13.2:1, ink-muted 7.7:1 (all AAA). ink-dim (~4.1:1) is for large or decorative text only (AA large, not AA body). --------------------------------------------------------------------------- */ --pe-ink: #f1f5f9; /* primary text, headings */ --pe-ink-soft: #cbd5e1; /* body text */ --pe-ink-muted: #94a3b8; /* secondary / captions */ --pe-ink-dim: #64748b; /* disabled, decorative, large only */ /* Feedback colors */ --pe-success: var(--pe-green); --pe-warning: var(--pe-amber); --pe-danger: #dd5f5f; --pe-danger-rgb: 221, 95, 95; /* --------------------------------------------------------------------------- 5. TYPOGRAPHY — Inter everywhere --------------------------------------------------------------------------- */ --pe-font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --pe-font-display: "Inter", system-ui, sans-serif; --pe-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; /* Fluid display sizes (marketing hero / section titles) */ --pe-display-1: clamp(48px, 7.6vw, 104px); --pe-display-2: clamp(40px, 6vw, 80px); --pe-title: clamp(34px, 4vw, 56px); --pe-title-sm: clamp(24px, 2.4vw, 34px); --pe-lead: clamp(17px, 1.5vw, 21px); /* Fixed UI type scale (editor + site body/controls) */ --pe-text-2xs: 10px; --pe-text-xs: 11px; --pe-text-sm: 12px; --pe-text-md: 13px; --pe-text-base:14px; --pe-text-lg: 15px; --pe-text-xl: 16px; --pe-text-2xl: 18px; --pe-text-3xl: 22px; /* Weights */ --pe-w-medium: 500; --pe-w-semibold: 600; --pe-w-bold: 700; --pe-w-extrabold: 800; --pe-w-black: 900; /* Line height */ --pe-lh-tight: 1.02; --pe-lh-snug: 1.2; --pe-lh-normal: 1.5; --pe-lh-relaxed: 1.55; /* Letter spacing */ --pe-ls-tight: -.04em; /* large display */ --pe-ls-snug: -.02em; /* titles */ --pe-ls-normal: -.005em; /* buttons / lead */ --pe-ls-wide: .04em; /* eyebrows / uppercase labels */ --pe-ls-wider: .08em; /* small caps labels */ /* --------------------------------------------------------------------------- 6. SPACING — 4px rhythm (marketing + general layout) The editor keeps its own denser 2px scale for toolbars/panels; use --pe-space-dense-* when you need that rhythm in shared components. --------------------------------------------------------------------------- */ --pe-space-1: 4px; --pe-space-2: 8px; --pe-space-3: 12px; --pe-space-4: 16px; --pe-space-5: 24px; --pe-space-6: 32px; --pe-space-7: 48px; --pe-space-8: 64px; --pe-space-9: 96px; --pe-space-dense-1: 2px; --pe-space-dense-2: 4px; --pe-space-dense-3: 6px; --pe-space-dense-4: 8px; --pe-space-dense-5: 12px; --pe-space-dense-6: 16px; /* --------------------------------------------------------------------------- 7. RADIUS Marketing scale is generous (rounded cards/pills); the app chrome is tighter (dense controls). Both provided. --------------------------------------------------------------------------- */ --pe-r-xs: 8px; --pe-r-sm: 12px; --pe-r-md: 18px; --pe-r-lg: 24px; --pe-r-xl: 32px; --pe-r-pill: 999px; --pe-r-app-sm: 6px; --pe-r-app-md: 8px; --pe-r-app-lg: 11px; /* --------------------------------------------------------------------------- 8. ELEVATION / SHADOW --------------------------------------------------------------------------- */ --pe-shadow-soft: 0 10px 28px rgba(0, 0, 0, .26); --pe-shadow-lift: 0 12px 36px -12px rgba(0, 0, 0, .6); --pe-shadow-modal: 0 24px 70px rgba(0, 0, 0, .48); --pe-shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -28px rgba(0,0,0,.78), 0 4px 12px -6px rgba(0,0,0,.5); --pe-shadow-card-hover: 0 1px 0 rgba(255,255,255,.09) inset, 0 34px 72px -30px rgba(0,0,0,.82), 0 10px 26px -12px rgba(37,99,235,.30); --pe-shadow-glow: 0 24px 80px -20px rgba(37, 99, 235, .25), 0 12px 40px -16px rgba(16, 185, 129, .22); --pe-ring: 0 0 0 3px rgba(37, 99, 235, .35); /* focus ring */ /* --------------------------------------------------------------------------- 9. MOTION --------------------------------------------------------------------------- */ --pe-ease-standard: cubic-bezier(.2, .8, .2, 1); --pe-ease-spring: cubic-bezier(.2, 1.5, .4, 1); --pe-ease-out: cubic-bezier(.22, .61, .36, 1); --pe-dur-fast: .14s; --pe-dur-base: .3s; --pe-dur-slow: .5s; /* --------------------------------------------------------------------------- 10. LAYOUT --------------------------------------------------------------------------- */ --pe-container: 1280px; --pe-gutter: 28px; --pe-control-h: 36px; /* standard interactive height (buttons/inputs) */ --pe-row-h: 28px; /* dense editor control row height */ } /* ============================================================================= SURFACE BRIDGES (optional) Map each surface's existing variable names to the shared --pe-* tokens so old code and new code resolve to the same values. Include the block that matches where you're loading this file. These do NOT change current values — they simply document/point the legacy names at the shared source of truth. --- Website (design.css) --- already aligned; kept here for reference: :root { --bg: var(--pe-bg); --bg-soft: var(--pe-bg-soft); --surface: var(--pe-surface); --surface-2: var(--pe-surface-2); --border: var(--pe-border); --border-2: var(--pe-border-strong); --ink: var(--pe-ink); --ink-soft: var(--pe-ink-soft); --ink-mute: var(--pe-ink-muted); --ink-dim: var(--pe-ink-dim); --pe-blue: #2563EB; --pe-red: #EF4444; --pe-yellow: #F59E0B; --pe-green: #10B981; --grad: var(--pe-grad); } --- Editor (try-app) --- the app tunes a few literals cooler/denser; map the semantic ones and KEEP the app's own --space-* (2px) scale untouched: :root { --accent: var(--pe-accent); --accent-rgb: var(--pe-accent-rgb); --accent-light: var(--pe-accent-light); --accent-deep: var(--pe-accent-deep); --accent-fg: var(--pe-accent-fg); --accent-text: var(--pe-accent-tint); --text: var(--pe-ink); --muted: var(--pe-ink-muted); } ============================================================================= */