/* ===================================================================== Innobilari.ro — design tokens Two layers live in this file: 1. The --inb-* tokens are OUR source of truth. Every colour, type step, radius and timing the site uses is named here once. If the art direction ever moves off Dark Luxury, this block is what changes. 2. The --bd-* block re-points the INC template's own custom properties at those tokens. The template's compiled CSS is almost entirely token-driven (72 uses of --bd-theme-primary against a single literal #0660bd), so remapping here retints the whole thing without touching the 52 KB of generated CSS underneath. Load order matters: this file must come AFTER css/main.css, because main.css declares the same --bd-* names on :root and the last declaration wins. Colour contrast, verified against implementation guide §8.1: gold #C9A86A on graphite #0D0D0D ≈ 8.6:1 text and icons OK gold #C9A86A on navy #0A1A2F ≈ 7.7:1 text and icons OK muted #8A8F98 on graphite #0D0D0D ≈ 6.6:1 body OK, avoid under 14px gold #C9A86A on white ≈ 2.0:1 FAILS — never do this. A gold button therefore takes graphite text, never white. ===================================================================== */ :root { /* --------------------------------------------------------------- Colour — Dark Luxury --------------------------------------------------------------- */ --inb-bg: #0D0D0D; /* graphite black — primary background */ --inb-surface: #0A1A2F; /* petrol navy — alternating sections */ --inb-surface-raised:#151515; /* cards and panels lifted off the bg */ --inb-accent: #C9A86A; /* warm gold — the folio accent */ --inb-accent-hover: #DCC08C; /* lighter gold for hover / focus */ --inb-accent-dim: #8A7548; /* gold at rest, for hairlines and rules */ --inb-muted: #8A8F98; /* metallic grey — secondary text, icons */ --inb-fg: #FFFFFF; /* primary text on dark */ --inb-fg-dim: #C9CCD1; /* de-emphasised body text */ /* Text that sits ON the gold accent. Never white — see the note above. */ --inb-on-accent: #0D0D0D; /* Hairlines. §8.3 asks for thin gold rules as dividers and along the process timeline; the neutral one is for card and input borders. */ --inb-hairline-gold: rgba( 201, 168, 106, 0.28 ); --inb-hairline: rgba( 255, 255, 255, 0.10 ); /* Very soft shadows only — §8.3 rules out heavy elevation. */ --inb-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.40 ); --inb-shadow-md: 0 8px 24px rgba( 0, 0, 0, 0.45 ); /* --------------------------------------------------------------- Typography Self-hosted variable fonts, declared in css/fonts.css. --------------------------------------------------------------- */ --inb-ff-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --inb-ff-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --inb-ff-accent: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Fluid type scale. clamp() means no per-breakpoint font-size rules and no layout jump between breakpoints. */ --inb-fz-h1: clamp( 2.50rem, 1.60rem + 3.6vw, 4.50rem ); /* 40 -> 72 */ --inb-fz-h2: clamp( 2.00rem, 1.55rem + 1.8vw, 3.00rem ); /* 32 -> 48 */ --inb-fz-h3: clamp( 1.50rem, 1.32rem + 0.7vw, 2.00rem ); /* 24 -> 32 */ --inb-fz-h4: 1.25rem; /* 20 */ --inb-fz-h5: 1.125rem; /* 18 */ --inb-fz-h6: 1rem; /* 16 */ --inb-fz-body: 1rem; /* 16 — the template shipped 14px, which is too small for body copy and too close to the floor --inb-muted is legible at. */ --inb-fz-sm: 0.875rem; /* 14 */ --inb-lh-heading: 1.15; --inb-lh-body: 1.65; /* §8.2 asks for 1.6 – 1.7 */ /* Generous tracking on large headings, per §8.2. */ --inb-ls-heading: -0.01em; --inb-ls-eyebrow: 0.18em; /* --------------------------------------------------------------- Shape, rhythm, motion --------------------------------------------------------------- */ --inb-radius: 4px; /* §8.3: minimal rounding, 4–8px */ --inb-radius-lg: 8px; --inb-maxw: 1280px; /* §8.3: content max-width ~1200–1280 */ --inb-dur-fast: 150ms; /* §8.3: micro-interactions 150–300ms */ --inb-dur: 220ms; --inb-dur-slow: 300ms; --inb-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 ); --inb-focus-ring: 2px solid var( --inb-accent ); --inb-focus-offset: 3px; /* =============================================================== Template token remap Everything below re-points the INC template's variables. The template's own values are kept in the trailing comments so the original intent stays readable. =============================================================== */ /* Fonts — was Poppins throughout, plus Font Awesome Pro. */ --bd-ff-body: var( --inb-ff-body ); --bd-ff-heading: var( --inb-ff-heading ); --bd-ff-p: var( --inb-ff-body ); /* Font Awesome Pro is not licensed to us and has been removed. Only three rules in main.css referenced it; they are neutralised in theme.css. */ --bd-ff-fontawesome: var( --inb-ff-body ); /* Colour. --bd-common-white deliberately stays white. It is used 19 times as a text colour and 13 times as a background; remapping it would fix the backgrounds and destroy the text. The background cases are handled individually in theme.css. */ --bd-common-white: #FFFFFF; /* was #ffffff */ /* --bd-common-black is the ink that sits on gold buttons, so it tracks the page background rather than pure black. */ --bd-common-black: var( --inb-on-accent ); /* was #000 */ --bd-heading-primary: var( --inb-fg ); /* was #000 */ --bd-text-body: var( --inb-muted ); /* was #888888 */ --bd-text-1: var( --inb-fg ); /* was #000 */ /* The two greys were light section backgrounds in a white theme; here they become the raised surface and the navy alternate. */ --bd-grey-1: var( --inb-surface-raised ); /* was #f5f8fb */ --bd-grey-2: var( --inb-surface ); /* was #e2ebf4 */ --bd-theme-primary: var( --inb-accent ); /* was #0660bd */ --bd-border-1: var( --inb-hairline ); /* was #888888 */ --bd-border-2: var( --inb-hairline-gold );/* was #b7c3cf */ /* Type scale — the template's fixed px steps become the fluid scale. */ --bd-fz-body: var( --inb-fz-body ); /* was 14px */ --bd-fz-p: var( --inb-fz-body ); /* was 14px */ --bd-fz-h1: var( --inb-fz-h1 ); /* was 40px */ --bd-fz-h2: var( --inb-fz-h2 ); /* was 36px */ --bd-fz-h3: var( --inb-fz-h3 ); /* was 24px */ --bd-fz-h4: var( --inb-fz-h4 ); /* was 20px */ --bd-fz-h5: var( --inb-fz-h5 ); /* was 16px */ --bd-fz-h6: var( --inb-fz-h6 ); /* was 14px */ }