/* Lagom's own variable layer. This install never links it: includes/head.tpl picks between $RSThemes['styles']['colors']->cssInjector(...) and a fallback , and on this install the injector emits nothing while the fallback branch is not reached — so all ~2000 Lagom variables (--spacing-*, --ui-height-*, --input-*, …) were undefined and every component was silently running on browser defaults. Importing the file directly repairs that without forking the vendor's head.tpl. Order matters: Lagom's defaults first, the site's tokens second, and this file's :root bridge last, so our mappings win over both. */ @import url("vars/minified.css?v=c649d936"); @import url("site-tokens.css?v=11549f75"); /* ========================================================================== Natsom — Lagom bridge The tokens are NOT authored here. site-tokens.css above is generated from the marketing site's own token files (tools/sync-site-tokens.py); this file only maps those variables onto Lagom's semantics. If a value looks wrong, fix it on the site and re-run the generator — never edit a colour here. Light-only. Ink surfaces come from `.on-ink`, the site's own [data-tone="dark"] device, so anything inside an Ink panel re-points the semantic layer exactly as a dark section does on the site. Because every mapping below resolves through the semantic layer (var(--text-brand), not var(--brand-800)), Lagom's components flip on Ink for free. ROLE ASSIGNMENT (from the brief): copper the one action fill — primary buttons only ice-blue link / active / tab underline / sidebar active dark variant on Paper, light variant on Ink Ink every dark surface, flat, zero gradient mono labels, eyebrows, and all machine values Rules: right-hand side is always var(--…) from the site layer. No literals. ========================================================================== */ /* -------------------------------------------------------------------------- Typeface — Satoshi Variable, self-hosted, matching the site's sans. The site loads it via next/font/local; here it is a plain @font-face on the same file. The file ships as supplied — the ITF Free Font License forbids subsetting. Mono — IBM Plex Mono 400/500/600, self-hosted (T051 P0). The site loads it with next/font/google, which defines --font-mono-plex on ; the generated --font-mono starts with var(--font-mono-plex), so it is defined here, or the whole stack is invalid at computed-value time. The files are the unmodified "complete" woff2 of @ibm/plex-mono 1.1.0 (Latin incl. ğ ş İ ı), SIL OFL 1.1: ../fonts/IBMPlexMono-OFL.txt. No Google request at runtime. -------------------------------------------------------------------------- */ @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { --font-mono-plex: 'IBM Plex Mono'; /* ---- Typography ----------------------------------------------------- */ --font-family-base: 'Satoshi', var(--font-sans), system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-family-system: var(--font-family-base); --font-family-custom: var(--font-family-base); --font-family-monospace: var(--font-mono); /* ---- Neutrals ------------------------------------------------------- Lagom's gray ramp is a TEXT and BORDER ramp: --gray-base is body text and --gray-darker is headings, so it runs opposite to a 50-950 scale. Mapping through the site's semantic layer keeps that meaning and makes the whole ramp flip on Ink. ---------------------------------------- */ --gray-darker: var(--text-primary); --gray-base: var(--text-secondary); --gray-lighter: var(--text-secondary); --gray-lighter-2: var(--text-muted); --gray-lighter-3: var(--border-default); --gray-lighter-4: var(--border-subtle); --gray-faded: var(--bg-canvas); --gray-icons: var(--text-muted); --gray-icons-hover: var(--text-primary); /* ---- Brand = ice-blue ----------------------------------------------- Drives links, active nav, focus and the tab underline. --text-brand is the site's semantic name for it: --brand-800 on Paper, --brand-200 on Ink. Pointing at the semantic name rather than a ramp stop is what makes the light/Ink flip automatic. ------------------------------- */ --brand-primary: var(--text-brand); --brand-primary-lighter: var(--brand-600); --brand-primary-lighter-2: var(--brand-300); --brand-primary-lighter-3: var(--brand-100); --brand-primary-lighter-4: var(--brand-50); --brand-primary-darker: var(--brand-900); /* ---- Secondary = Ink ------------------------------------------------- Lagom uses --brand-secondary for its large decorative fields: login sidebar, site banners, footer schemes, order summary. Those are the "dark surfaces" the brief wants flat Ink. ------------------------- */ --brand-secondary: var(--canvas-dark); --brand-secondary-lighter: var(--elevated-dark); --brand-secondary-lighter-2: var(--brand-700); --brand-secondary-lighter-3: var(--brand-800); --brand-secondary-darker: var(--canvas-dark); /* ---- Status — the site's semantic tokens ----------------------------- */ --brand-success: var(--success-700); --brand-success-lighter: var(--success-500); --brand-success-lighter-2: var(--success-200); --brand-success-lighter-3: var(--success-100); --brand-success-lighter-4: var(--success-50); --brand-success-darker: var(--success-800); --brand-warning: var(--warning-700); --brand-warning-lighter: var(--warning-500); --brand-warning-lighter-2: var(--warning-200); --brand-warning-lighter-3: var(--warning-100); --brand-warning-lighter-4: var(--warning-50); --brand-warning-darker: var(--warning-800); --brand-danger: var(--danger-700); --brand-danger-lighter: var(--danger-500); --brand-danger-lighter-2: var(--danger-200); --brand-danger-lighter-3: var(--danger-100); --brand-danger-lighter-4: var(--danger-50); --brand-danger-darker: var(--danger-800); /* Info is ice-blue. The system has one accent and one brand hue; adding a separate informational colour would be a fourth signal nobody asked for. */ --brand-info: var(--brand-700); --brand-info-lighter: var(--brand-500); --brand-info-lighter-2: var(--brand-200); --brand-info-lighter-3: var(--brand-100); --brand-info-lighter-4: var(--brand-50); --brand-info-darker: var(--brand-900); /* A saving is an action, not a fifth status colour — so it is copper. */ --brand-saving: var(--accent-700); --brand-saving-lighter: var(--accent-500); --brand-saving-lighter-2: var(--accent-200); --brand-saving-lighter-3: var(--accent-100); --brand-saving-lighter-4: var(--accent-50); --brand-saving-darker: var(--accent-800); /* ====================================================================== GRADIENTS -> FLAT Lagom paints banners, summary boxes, footers and buttons with these. Collapsing -h and -v to a single colour is what actually removes the gradient; setting -start = -end covers any other consumer. ====================================================================== */ --gray-gradient-start: var(--bg-surface); --gray-gradient-end: var(--bg-surface); --gray-gradient-h: var(--bg-surface); --gray-gradient-v: var(--bg-surface); --brand-primary-gradient-start: var(--brand-800); --brand-primary-gradient-end: var(--brand-800); --brand-primary-gradient-h: var(--brand-800); --brand-primary-gradient-v: var(--brand-800); --brand-secondary-gradient-start: var(--canvas-dark); --brand-secondary-gradient-end: var(--canvas-dark); --brand-secondary-gradient-h: var(--canvas-dark); --brand-secondary-gradient-v: var(--canvas-dark); --brand-info-gradient-start: var(--brand-700); --brand-info-gradient-end: var(--brand-700); --brand-info-gradient-h: var(--brand-700); --brand-info-gradient-v: var(--brand-700); --brand-success-gradient-start: var(--success-700); --brand-success-gradient-end: var(--success-700); --brand-success-gradient-h: var(--success-700); --brand-success-gradient-v: var(--success-700); --brand-warning-gradient-start: var(--warning-700); --brand-warning-gradient-end: var(--warning-700); --brand-warning-gradient-h: var(--warning-700); --brand-warning-gradient-v: var(--warning-700); --brand-danger-gradient-start: var(--danger-700); --brand-danger-gradient-end: var(--danger-700); --brand-danger-gradient-h: var(--danger-700); --brand-danger-gradient-v: var(--danger-700); /* ---- Surfaces -------------------------------------------------------- Lagom ships --body-bg: #fff, which makes white cards invisible. Paper under white cards is what gives the shell its shape — the same move the site makes below the hero. ---------------------------------------- */ --body-bg: var(--bg-canvas); --ui-block-bg: var(--bg-elevated); --ui-block-bg-form: var(--bg-surface); --ui-block-header-bg: var(--bg-surface); --ui-block-divider-color: var(--border-subtle); --ui-block-border: 1px solid var(--border-subtle); --ui-block-border-color: var(--border-subtle); --ui-block-border-radius: 16px; /* the site's card radius */ --ui-block-border-radius-lg: 16px; --ui-block-shadow: var(--elev-1); --ui-block-shadow-lg: var(--elev-2); --ui-block-shadow-xlg: var(--elev-3); /* ---- Radii — the site's control radius is 12px (rounded-xl) ---------- */ --border-radius-xs: 4px; --border-radius-sm: 6px; --border-radius-base: 10px; --border-radius-lg: 12px; --border-radius-xlg: 16px; /* ---- Links ----------------------------------------------------------- */ --link-color: var(--text-link); --link-hover-color: var(--text-link-hover); /* ---- Text ------------------------------------------------------------ */ --text-body-color: var(--text-secondary); --text-lighter-color: var(--text-secondary); --text-faded-color: var(--text-muted); --text-heading-color: var(--text-primary); --text-primary-color: var(--text-brand); --text-success-color: var(--text-success); --text-warning-color: var(--text-warning); --text-danger-color: var(--text-danger); --text-info-color: var(--text-brand); /* ====================================================================== ACTION = COPPER The brief: Lagom primary -> copper, with the site's button metrics. Lagom points --btn-primary-* at --brand-primary, which would make every primary button ice-blue and leave copper unused, so the button triad is retargeted rather than the brand hue. ====================================================================== */ --btn-primary-bg: var(--action-primary-bg); --btn-primary-border: var(--action-primary-bg); --btn-primary-color: var(--action-primary-fg); --btn-primary-hover-bg: var(--action-primary-bg-hover); --btn-primary-hover-border: var(--action-primary-bg-hover); --btn-primary-hover-color: var(--action-primary-fg); --btn-primary-active-bg: var(--action-primary-bg-hover); --btn-primary-active-border: var(--action-primary-bg-hover); --btn-primary-outline-bg: transparent; --btn-primary-outline-bg-hover: var(--bg-accent-tint); /* T051 P0: "faded" is a SECONDARY in the site's system: copper fill only on the one primary per view (natsom-store CLAUDE.md §0), so the peach tint ("Add New", "Güncelle", "Transfer Et") becomes the ghost outline. The order summary's faded "Ödeme Yap" stays copper (theme-custom.css). */ --btn-primary-faded-bg: var(--action-secondary-bg); --btn-primary-faded-border: var(--action-secondary-border); --btn-primary-faded-color: var(--action-secondary-fg); --btn-primary-faded-hover-bg: var(--action-ghost-bg-hover); --btn-primary-faded-hover-border: var(--border-strong); --btn-primary-faded-hover-color: var(--text-primary); --btn-primary-faded-active-bg: var(--action-ghost-bg-hover); --btn-primary-faded-active-border: var(--border-strong); /* Secondary / default = ghost outline. Never a second fill: two filled buttons on one surface destroy the single-action hierarchy. */ --btn-default-bg: var(--action-secondary-bg); --btn-default-border: var(--action-secondary-border); --btn-default-color: var(--action-secondary-fg); --btn-default-hover-bg: var(--action-ghost-bg-hover); --btn-default-hover-border: var(--border-strong); --btn-default-hover-color: var(--text-primary); --btn-default-active-bg: var(--action-ghost-bg-hover); --btn-default-active-border: var(--border-strong); /* Button shape — the site's metrics (ui/button.tsx). */ --btn-xs-border-radius: 10px; --btn-sm-border-radius: 12px; --btn-base-border-radius: 12px; --btn-lg-border-radius: 12px; --btn-xlg-border-radius: 12px; --btn-box-shadow: none; --btn-focus-box-shadow: var(--focus-ring); /* ---- Chrome ---------------------------------------------------------- */ --app-nav-top-bg: var(--bg-elevated); --app-nav-navbar-bg: var(--bg-elevated); --app-nav-top-border-bottom: 1px solid var(--border-subtle); --app-nav-left-bg: var(--bg-elevated); --ui-nav-link-color: var(--text-secondary); --ui-nav-link-hover-color: var(--text-link); --ui-nav-link-active-color: var(--text-brand); --ui-nav-link-active-bg: var(--bg-brand-tint); /* T051 P0 (FmB, walkthrough step 8: "açık kalsın"): the store's light footer (natsom-store footer.tsx: --bg-sunken ground, subtle top border, secondary links, hover --text-link). Anchors, not aliases: resolved on :root. The footer stops being an Ink surface (theme-custom.css, T051 P0). */ --main-footer-bg: var(--canvas-alt); --main-footer-border-top: 1px solid var(--line-subtle); --main-footer-link-color: var(--copy-secondary); --main-footer-link-hover-color: var(--brand-700); --main-footer-extended-title-color: var(--brand-950); --main-footer-extended-desc-color: var(--copy-muted); /* ====================================================================== THE LONG TAIL Roots Lagom ships with off-palette values that no semantic mapping above reaches. Each one is a colour that would otherwise survive the sweep, so they are listed explicitly rather than left to chance. ====================================================================== */ /* Status text Lagom hard-codes (teal, slate, purple). */ --status-expired: var(--text-muted); --status-collections: var(--text-danger); --status-answered: var(--text-brand); --status-default: var(--text-muted); --status-cancelled: var(--text-muted); --status-terminated: var(--text-muted); --status-fraud: var(--text-danger); --status-lost: var(--text-muted); /* Form validation. */ --form-feedback-icon-valid: var(--success-700); --form-feedback-icon-invalid: var(--danger-700); /* Labels. */ --label-purple-bg: var(--bg-brand-tint); --label-savings-border: var(--accent-200); /* Discount / savings copy. */ --price-savings-color: var(--text-accent); --main-header-banner-save-label-color: var(--text-accent); --main-header-banner-save-label-border: var(--accent-200); /* Misc Bootstrap leftovers. */ --code-color: var(--text-accent); --kbd-bg: var(--text-primary); --popover-body-color: var(--text-primary); --list-group-disabled-color: var(--text-disabled); --toast-header-color: var(--text-muted); --thumbnail-border-color: var(--border-default); --legend-border-color: var(--border-subtle); --dropdown-link-disabled-color: var(--text-disabled); --decoration-icons: var(--border-default); /* Social sign-in buttons ship in each network's brand colour. Those are eight off-palette fills on the login screen, so they become ghost outlines — the network is identified by its mark, not by a fill. */ --btn-social-facebook-bg: transparent; --btn-social-facebook-hover-bg: var(--action-ghost-bg-hover); --btn-social-facebook-color: var(--text-primary); --btn-social-twitter-bg: transparent; --btn-social-twitter-hover-bg: var(--action-ghost-bg-hover); --btn-social-twitter-color: var(--text-primary); --btn-social-linkedin-bg: transparent; --btn-social-linkedin-hover-bg: var(--action-ghost-bg-hover); --btn-social-linkedin-color: var(--text-primary); --btn-social-google-color: var(--text-primary); --btn-social-google-border-color: var(--border-default); --btn-social-google-border-hover-color: var(--border-strong); /* Illustration art. Lagom's SVGs carry a stock blue palette; re-pointing them at the brand ramp keeps the artwork on-palette without touching a single asset file. */ --svg-illustration-color-0: var(--brand-900); --svg-illustration-color-1: var(--brand-800); --svg-illustration-color-2: var(--brand-600); --svg-illustration-color-3: var(--brand-400); --svg-illustration-color-4: var(--brand-300); --svg-illustration-color-5: var(--brand-200); --svg-illustration-color-6: var(--brand-100); --svg-illustration-color-7: var(--brand-50); /* T051 P0: the warm neutral steps moved to the site's cool ground and hairlines (the site re-based its canvas from neutral to ice). */ --svg-illustration-shadow: var(--brand-950); --svg-graphic-bg-secondary: var(--copy-secondary); --svg-graphic-bg-banner: var(--canvas-alt); --svg-graphic-bg-browser-top: var(--canvas-alt); --svg-graphic-bg-browser-actions: var(--line-default); --svg-graphic-bg-faded: var(--canvas-alt); --svg-graphic-bg-faded-3: var(--line-default); --svg-graphic-stroke-faded: var(--line-default); --svg-graphic-stroke-faded-2: var(--line-default); --svg-icon-color-2: var(--border-default); --svg-icon-on-primary-color-lighter: var(--border-default); } /* ========================================================================== --ns-* ALIAS LAYER (design-refs/natsom-*-v2.html) The v2 reference mocks are written against an --ns-* vocabulary. Their hex values are approximations of the live site and are deliberately NOT used here: --ns-ink is #0E1B20 in the mock but #07161B on natsom.com, --ns-copper is #A9562A vs #B4531F, and the mock names Söhne / Plus Jakarta where the site ships Satoshi. Aliasing lets the reference's CSS be lifted structurally while every colour still resolves to the real palette, so there is exactly one source of truth and no new hex enters the system. If a mock rule references an --ns-* name not aliased below, that is the signal it belongs to a component we do not have — check the skip list in docs/THEME-OVERRIDES.md before inventing a token for it. ========================================================================== */ :root { /* surfaces */ --ns-ink: var(--canvas-dark); --ns-ink-hover: var(--elevated-dark); --ns-ink-line: var(--brand-900); --ns-paper: var(--bg-canvas); --ns-card: var(--bg-elevated); --ns-line: var(--border-default); --ns-line-soft: var(--border-subtle); /* text */ --ns-text: var(--text-primary); --ns-text-2: var(--text-secondary); --ns-text-3: var(--text-muted); --ns-on-ink: var(--copy-primary-dark); /* T051 P0: the site's dark reading ink */ --ns-on-ink-2: var(--copy-secondary-dark); /* action + brand */ --ns-copper: var(--accent-600); --ns-copper-hover:var(--accent-700); --ns-copper-soft: var(--accent-100); --ns-copper-line: var(--accent-200); --ns-ice-deep: var(--brand-700); --ns-ice-soft: var(--brand-50); /* petrol — the auth screens' primary. * * NOT a new hue. The v6.4 auth reference calls its accent "petrol" and * ships it as #135A6E; our brand ramp already IS that colour — --brand-700 * is #276272, two points of chroma away — so petrol is an alias onto the * ramp rather than an eleventh colour in the system. It is named * separately from --ns-ice-* because the two carry different ROLES: ice is * the link/active colour everywhere in the client area, petrol is the * button fill on the three authentication screens and nowhere else. Same * pixels, different jobs, and a rename later should only have to move one * of them. * * The ring is a mix rather than an rgba() literal so the channel values * stay in site-tokens.css. color-mix is already load-bearing there * (--shadow-color), so this adds no new browser requirement. */ --ns-petrol: var(--brand-700); --ns-petrol-hover: var(--brand-800); --ns-petrol-soft: var(--brand-50); --ns-petrol-line: var(--brand-200); --ns-petrol-ring: color-mix(in srgb, var(--brand-700) 14%, transparent); /* The lighter stop inside the second atmosphere cloud. The reference puts a * mint (#3FD68C) there; that green exists in no part of our palette, so the * variation comes from further up our own ramp instead. */ --ns-petrol-lift: var(--brand-400); /* status */ --ns-ok: var(--success-700); --ns-ok-soft: var(--success-100); --ns-danger: var(--danger-700); /* type + shape */ --ns-font-sans: var(--font-family-base); --ns-font-mono: var(--font-mono); --ns-r-sm: 6px; --ns-r: 10px; --ns-r-lg: 14px; } /* ========================================================================== Mobile step — the third rung of the scale Lagom's scales stop one step too early. Typography steps once, at 767px (48/40/36/26/20/18 -> 40/32/26/21/18/16) and then holds that size all the way down, so a 320px phone renders headings at the same size a 767px tablet does. Measured on /viewinvoice.php at 320px: the h2 "Proforma Invoice #2709" sits at 32px and wraps to THREE lines, pushing the invoice status badge onto a line of its own. The layout gutter has the same shape of gap — it steps 40 -> 24 at 479px (vars/layout.css) and stops. So this is not a new breakpoint, it is the missing rung on two ladders that already exist. 479px is Lagom's own small-screen step, reused rather than invented, which is why there is no 480/460/575 variant added here. Ratio follows the vendor's: each step lands near 0.8x the one above it, so the hierarchy keeps its proportions instead of collapsing toward one size. Gutter 24 -> 16: at 320px the container's 24px sides plus a card's own 24px consumed 98px, 31% of the screen, leaving a 222px content column. 16px is the mobile norm and buys back 16px here and 16px more in the card padding set in theme-custom.css. ========================================================================== */ @media (max-width: 479px) { :root { --font-size-h1: 32px; --font-size-h2: 26px; --font-size-h3: 22px; --font-size-h4: 19px; --font-size-h5: 17px; --font-size-h6: 15px; --layout-container-gutter: 16px; --layout-left-container-gutter: 16px; } }