/* ============================================================================ FPE THEME — design tokens Extracted verbatim from the Fierman Daily Price List webapp (base.html). Drop this file into any app and reference the variables below. It is framework-agnostic: it works with or without Tailwind. Import once, globally (e.g. in your root template ): ============================================================================ */ :root { /* ---- Brand accent (the ONE accent — FPE tomato red) ---------------------- */ --fpe-red: #d42d20; /* primary action / brand */ --fpe-red-dark: #b21f15; /* hover, pressed, brand text on light */ /* ---- Ink & neutrals ----------------------------------------------------- */ --ink: #1f1a18; /* primary text (warm near-black) */ --muted: #4b423d; /* secondary text */ --faint: #7c726a; /* tertiary / labels / placeholders-ish */ /* ---- Surfaces ----------------------------------------------------------- */ --paper: #ffffff; /* base page + card background */ --surface: #fafaf9; /* subtle raised / table head / app chrome */ --surface-2: #f4f3f1; /* deeper neutral fill (chips, tabs track) */ /* ---- Lines / borders ---------------------------------------------------- */ --line: #e7e5e3; /* default hairline border */ --line-strong: #d3cfca; /* input borders, stronger dividers */ /* ---- Secondary semantic colors ----------------------------------------- */ --orange: #ea7c3a; /* warm accent / secondary chart series */ --orange-dark: #9c4d18; /* orange text/badge on light */ --orange-tint: #fdf0e3; /* orange badge background */ --green: #16a34a; /* positive / success */ --green-dark: #15803d; /* positive text on light */ --green-tint: #e9f7ee; /* positive badge / pill background */ --red-tint: #fdecea; /* danger/negative badge background */ /* ---- Shadows ------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(15,13,12,.05); --shadow: 0 1px 3px rgba(15,13,12,.06), 0 6px 18px -8px rgba(15,13,12,.12); --shadow-lg: 0 12px 40px -12px rgba(15,13,12,.22); --shadow-brand: 0 6px 16px -6px rgba(212,45,32,.55); /* primary button glow */ /* ---- Typography --------------------------------------------------------- */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* weights actually used: 400 500 600 700 800 900 */ /* type scale (px values pulled from the components) */ --text-eyebrow: 11px; /* uppercase labels / eyebrows */ --text-xs: 11.5px; /* badges */ --text-sm: 13.5px; /* table body / secondary copy */ --text-base: 15px; /* inputs / body */ --text-md: 16px; /* card titles */ --text-lg: 1.05rem; /* large button */ --text-stat: 29px; /* stat-tile number */ /* ---- Spacing (the rhythm used across cards/inputs) ---------------------- */ --space-card-pad: 22px; /* .fpe-card-pad on >640px */ --space-card-pad-sm: 16px; /* .fpe-card-pad on phones */ --space-input-y: .7rem; --space-input-x: .85rem; /* ---- Border radius ------------------------------------------------------ */ --radius-sm: 8px; /* icon buttons, small chips */ --radius: 10px; /* inputs, small cards */ --radius-card: 14px; /* cards, stat tiles */ --radius-btn: .75rem; /* default button (12px) */ --radius-btn-lg: 1rem; /* large button */ --radius-btn-sm: .6rem; /* small button */ --radius-pill: 999px; /* badges, chips, pills */ /* ---- Focus ring --------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(212,45,32,.15); } /* ---------------------------------------------------------------------------- Tailwind-family aliases (for reference / non-Tailwind use). In the source app, the Tailwind CDN config REMAPS these utility families: emerald-* -> FPE red ramp amber-* -> warm orange ramp slate-* -> warm neutral ramp leaf-* -> true green ramp (custom family) These variables expose the same ramps if you aren't using Tailwind. ---------------------------------------------------------------------------- */ :root { /* warm neutral ("slate") ramp */ --slate-100:#f4f3f1; --slate-200:#e7e5e3; --slate-300:#d3cfca; --slate-400:#a8a29e; --slate-500:#7c726a; --slate-600:#4b423d; --slate-700:#2d2724; --slate-800:#1f1a18; --slate-900:#141110; --slate-950:#0f0d0c; /* FPE red ("emerald") ramp */ --red-200:#f6bdb4; --red-300:#ec8d80; --red-400:#e2503c; --red-500:#d42d20; --red-600:#b21f15; --red-700:#8f1810; --red-800:#6f130c; --red-900:#500d08; /* warm orange ("amber") ramp */ --amber-200:#f8cf9a; --amber-300:#f3aa4e; --amber-400:#ea7c3a; --amber-500:#dd6f1f; --amber-600:#c2611d; --amber-700:#9c4d18; /* true green ("leaf") ramp */ --leaf-200:#bce7c4; --leaf-300:#6fce82; --leaf-400:#2faa4d; --leaf-500:#16a34a; --leaf-600:#15803d; } /* Base page defaults (safe to apply globally; matches the source app) */ html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } body { background-color: var(--paper); color: var(--ink); }