/* =========================================================================== fundrivingclinic.com - TOKEN LAYER --------------------------------------------------------------------------- The look is a token set. Every component in framework.css is built from these variables and NEVER from a literal hex, so choosing a direction is a one-class change on rather than a redesign. Roles are strict, and they are enforced by review: --ink headings and structure --body body copy --muted secondary copy, labels, captions --accent the identity colour. Marks, highlights, seals, rules. --action buttons and links ONLY. Never a background for text blocks. --dark the inverted band (final CTA, price cell, footer) In Green Light and Sunny Side --accent and --action are the same colour. In Highlighter they are deliberately different: lime marks, violet acts. ======================================================================== */ :root{ --radius:12px; --radius-lg:18px; --radius-pill:999px; --measure:58ch; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --shadow-card:0 1px 2px rgba(16,20,24,.04), 0 8px 24px rgba(16,20,24,.05); --shadow-lift:0 18px 48px rgba(16,20,24,.14); } /* ---------- 01 GREEN LIGHT ---------------------------------------------- */ .t-green{ --bg:#FFFFFF; --surface:#F3F8F5; --surface-2:#E8FBF2; --ink:#0F1A16; --body:#3C4A44; --muted:#68786F; --line:#E6EFEA; --accent:#00C46A; --accent-ink:#06251A; --accent-soft:#E8FBF2; --accent-deep:#03774A; --action:#00C46A; --action-ink:#06251A; --dark:#0F1A16; --dark-ink:#FFFFFF; --dark-muted:#9DB2A8; --dark-accent:#00E27A; --font-display:Outfit,Figtree,system-ui,sans-serif; --font-body:Outfit,Figtree,system-ui,sans-serif; } /* ---------- 02 HIGHLIGHTER ---------------------------------------------- */ .t-marker{ --bg:#FFFFFF; --surface:#F6F6FA; --surface-2:#FBFDE9; --ink:#14141C; --body:#4A4A55; --muted:#6A6A78; --line:#ECECF2; --accent:#D9F24C; --accent-ink:#14141C; --accent-soft:#FBFDE9; --accent-deep:#6C4CF0; --action:#6C4CF0; --action-ink:#FFFFFF; --dark:#14141C; --dark-ink:#FFFFFF; --dark-muted:#9C9CAB; --dark-accent:#D9F24C; --font-display:Figtree,system-ui,sans-serif; --font-body:Figtree,system-ui,sans-serif; } /* ---------- 03 SUNNY SIDE ----------------------------------------------- */ .t-sunny{ --bg:#FFFBF5; --surface:#FFFFFF; --surface-2:#FFE8D6; --ink:#2B1B3D; --body:#54474F; --muted:#7A6B76; --line:#F2E6D8; --accent:#FF6B35; --accent-ink:#FFFFFF; --accent-soft:#FFE8D6; --accent-deep:#B33F12; --action:#FF6B35; /* Plum, not white. White on this orange measures 2.8:1 even before the button gloss - it never met AA and the gloss only made it visible. Do not "restore" white here. */ --action-ink:#2B1B3D; --dark:#2B1B3D; --dark-ink:#FFFFFF; --dark-muted:#A995B8; --dark-accent:#FFB088; --font-display:Nunito,Figtree,system-ui,sans-serif; --font-body:Nunito,Figtree,system-ui,sans-serif; }