/* ========================================================================== Brand tokens — Akustik İşler (acoustic acts) ========================================================================== Load AFTER foundation.css. IMPORTANT — variant system: the live page sets data-mood="warmth" and data-spacing="cozy" on . The values that actually render today are the "warmth" + "cozy" overrides below, NOT the :root fallback values. ========================================================================== */ :root { /* Palette — fallback values (only apply if has no data-mood attr, which doesn't happen on the current page) */ --sage: #6B8E7F; --ocean: #3E6B7D; --warm: #D4A574; --ink: #1A1914; --paper: #FAF8F3; /* Gap-fill: these roles existed as unlabeled hardcoded hex in the source CSS. Tokenized here with their EXACT current values — nothing about the rendered page changes, but they now have one name and one place to edit instead of being repeated inline. See docs/inconsistencies.md for two of these worth a closer look. */ --slate: #999999; /* .umbrella-mark — matches the --slate role used by the other two brands */ --nav-text: #D9D9D6; /* .header-nav a */ --muted-copy: #5A5550; /* .about-copy, .hero-sub */ --muted-copy-alt: #6F6960; /* .step p, .service-copy — near-duplicate of --muted-copy; flagged as a candidate to unify, not changed here */ --footer-link: #B8B8B3; /* .footer-links a */ --footer-meta: #888888; /* .footer-bottom */ /* Component-local surface shades. The source CSS's WhatsApp-widget block was copy-pasted from Furya and never re-themed — it currently renders with FURYA's ink/gold/paper, not Akustik İşler's own palette. These are Akustik İşler's own shades, built the same way Furya's were (from its own --ink), so the widget will render correctly once it's switched to the shared, token-driven component. See docs/inconsistencies.md — this is a visible, intentional fix, not a no-op refactor. */ --surface-raised: #241F19; --surface-sunken: #100F0C; --surface-bubble: #241F19; /* Typography */ --font-body: 'Work Sans', sans-serif; --font-display: 'Archivo Black', sans-serif; /* ---- Semantic roles ---------------------------------------------------- */ --color-surface-dark: var(--ink); --color-on-dark: var(--paper); --color-accent: var(--warm); --color-link: var(--sage); --color-link-hover: var(--ocean); --color-muted: var(--slate); } /* ---- Mood variant: reshapes the accent palette ------------------------- LIVE on the current page: data-mood="warmth" Alternates available in the codebase: "sage" (= the :root default, unused so far), "ocean" (unused so far) */ body[data-mood="sage"] { --sage: #6B8E7F; --ocean: #3E6B7D; --warm: #D4A574; } body[data-mood="warmth"] { --sage: #9D7A52; --ocean: #5A3D28; --warm: #E8B88F; } body[data-mood="ocean"] { --sage: #2E5A6A; --ocean: #1A3F5A; --warm: #5BA8C7; } /* ---- Spacing variant: reshapes section rhythm --------------------------- LIVE on the current page: data-spacing="cozy" (0.7x gaps/padding on the steps grid, service grid, and the about/approach/services sections). Alternate: data-spacing="airy" (1.3x), unused so far. */ :root { --gap-multiplier: 1; } body[data-spacing="cozy"] { --gap-multiplier: 0.7; } body[data-spacing="airy"] { --gap-multiplier: 1.3; }