/* * LogiBangla design tokens. * * Ported verbatim from the design system's tokens/ directory. This file is the * contract between the design and the theme — change a value here only when the * design system changes, never to make one page look right. * * Source: _ds/logibangla-design-system-78f0ae5d-b152-4b39-ba3a-7038382a7965/tokens/ * Mirrored locally in design-reference/tokens/. * * The font @import from the source is omitted on purpose: fonts are enqueued in * inc/enqueue.php so WordPress can preconnect and version them. */ :root { /* ---- fonts ------------------------------------------------------------ */ /* Hind Siliguri sits in the Latin stack as a fallback so ৳ and stray Bangla glyphs never drop to a system face mid-line. */ --font-latin: "Inter", "Hind Siliguri", "Helvetica Neue", Arial, sans-serif; --font-bangla: "Hind Siliguri", "Inter", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: var(--font-latin); --font-body: var(--font-latin); --font-numeric: var(--font-latin); --font-currency: "Hind Siliguri", "Inter", sans-serif; /* ---- colour ----------------------------------------------------------- */ /* core */ --deep-green: #0F4C3A; --forest: #0A3327; --signal-amber: #F5A623; --amber-deep: #C77F0A; /* Amber-deep on the 12% amber wash is 2.87:1. The chargeable-weight badge is the smallest text in the system and the one that most has to be read, so it gets an ink step of its own rather than borrowing the hover colour. */ --amber-ink: #996208; --ink: #12171C; --paper: #FBFAF6; /* Darkened from #6E7A76, which measured 4.27:1 on Paper and failed AA. Muted carries every hint, caption, date and quiet label on the site, so it is the one value where a near-miss is felt everywhere. #646F6B holds the same grey-green character at 4.99:1 on Paper and 5.21:1 on White. */ --muted: #646F6B; --line: #DFE4E0; --white: #FFFFFF; /* green tints, derived — for zebra rows, hovers, quiet fills */ --green-tint-3: rgba(15, 76, 58, .03); --green-tint-6: rgba(15, 76, 58, .06); --green-tint-12: rgba(15, 76, 58, .12); --amber-tint-12: rgba(245, 166, 35, .12); --forest-scrim: rgba(10, 51, 39, .7); /* shipment status — never used decoratively */ --status-received: #2B7FBF; --status-transit: #F5A623; --status-customs: #7A5AF8; --status-delivered: #1E9E62; --status-delayed: #D64545; /* The hue above states the status; the ink below writes it. A 12% wash of a mid-tone hue is a near-white surface, so the hue that reads well as a 14px dot is unreadable as 14px text on its own wash — every pill measured between 1.79:1 and 3.73:1. These are the same hues walked down to clear 4.5:1 on the wash they sit on. Pills take the ink; dots, rules and markers keep the hue. */ --status-received-ink: #256DA4; --status-transit-ink: #936415; --status-customs-ink: #6D50DD; --status-delivered-ink: #17784A; --status-delayed-ink: #BA3C3C; --status-received-bg: rgba(43, 127, 191, .12); --status-transit-bg: rgba(245, 166, 35, .12); --status-customs-bg: rgba(122, 90, 248, .12); --status-delivered-bg: rgba(30, 158, 98, .12); --status-delayed-bg: rgba(214, 69, 69, .12); /* semantic aliases */ --text-body: var(--ink); --text-heading: var(--deep-green); --text-muted: var(--muted); --text-on-amber-quiet: var(--amber-ink); --text-on-dark: var(--white); /* * The dark-band ladder. * * The system documented every colour that sits on Paper and nothing that sits on * Forest or Deep Green, so each author picked an alpha by eye: 22 distinct values * across 59 declarations, including .75 and .78 and .8 doing the same job on the same * kind of copy. This is that ladder, closed. * * Every TEXT step clears 4.5:1 on BOTH dark surfaces, which the old values did not — * Deep Green is the weaker of the two, and .55 measured 4.20:1 there while .45 managed * 4.01:1 on Forest. Nothing below -4 may carry words. * * on Forest on Deep Green * -2 .82 9.78:1 7.26:1 prose on a dark band * -3 .68 7.20:1 5.54:1 labels, overlines, metadata * -4 .60 5.95:1 4.68:1 the quietest text still meant to be read */ --text-on-dark-2: rgba(255, 255, 255, .82); --text-on-dark-3: rgba(255, 255, 255, .68); --text-on-dark-4: rgba(255, 255, 255, .60); /* Marks, not words. These carry no text and are not held to a text ratio. */ --rule-on-dark: rgba(255, 255, 255, .16); /* separates two things on a dark band */ --rule-on-dark-strong: rgba(255, 255, 255, .32); /* outlines a component, e.g. a pill */ --wash-on-dark: rgba(255, 255, 255, .1); /* hover and fill */ --wash-on-dark-quiet: rgba(255, 255, 255, .06); --ghost-border-on-dark: rgba(255, 255, 255, .45); /* the Ghost button's documented 45% */ --ghost-border-on-dark-hover: rgba(255, 255, 255, .7); --text-on-amber: var(--ink); --text-link: var(--deep-green); --text-link-hover: var(--forest); --surface-page: var(--paper); --surface-card: var(--paper); --surface-raised: var(--white); --surface-dark: var(--deep-green); --surface-darker: var(--forest); --surface-quiet: var(--green-tint-3); --border-default: var(--line); /* Form controls need a boundary you can actually see. WCAG 1.4.11 asks 3:1 of any border that identifies a component, and Line manages 1.23:1 on Paper - which would be fine for a card, where the border only separates two things you can already see, and is not fine for an input, whose White fill sits at 1.04:1 against the Paper ground and marks nothing on its own. #86918C clears 3:1 on both grounds (3.12:1 on Paper, 3.26:1 on White) without turning every field into a box. */ --border-field: #86918C; --border-strong: var(--deep-green); --focus-ring: var(--deep-green); --action-primary: var(--deep-green); --action-primary-hover: var(--forest); --action-accent: var(--signal-amber); --action-accent-hover: var(--amber-deep); /* ---- typography ------------------------------------------------------- */ --text-display: 40px; --lh-display: 44px; --text-h1: 32px; --lh-h1: 38px; /* 26px, not 24px: .lb-h2 has always rendered 26px and the token said otherwise, so the editor preview and the front end disagreed by 2px on every heading. */ --text-h2: 26px; --lh-h2: 34px; --text-h3: 18px; --lh-h3: 24px; --text-body-size: 16px; --lh-body: 26px; /* Two steps the pages had been writing as literals. Both name a real role - a lede or prominent card title, and secondary body copy - so they belong on the ramp rather than being rounded away. */ --text-lede: 17px; --lh-lede: 28px; /* The standfirst step, for a lede carrying a page-opening display rather than a section title. 1.7 Bangla rhythm holds — this is a size step, not a rhythm one. */ --text-lede-lg: 19px; --lh-lede-lg: 32px; --text-body-sm: 15px; --lh-body-sm: 24px; --text-small: 14px; --lh-small: 22px; --text-caption: 12px; --lh-caption: 18px; --text-overline: 12px; --lh-overline: 16px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-wordmark: -.02em; --tracking-tight: -.01em; --tracking-overline: .08em; /* mixed-script rules: Bangla runs 1.08x Latin size, 1.7 line-height, never letter-spaced */ --bangla-scale: 1.08; --lh-bangla: 1.7; /* ---- spacing and shape ------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-sm: 4px; --radius-md: 8px; /* buttons, inputs */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; --radius-full: 999px; /* status pills */ --control-height: 44px; /* min touch target, mobile-first */ --control-height-sm: 36px; --border-width: 1px; --focus-width: 2px; --stroke-icon: 2px; --container-max: 1160px; --gutter-mobile: 20px; --gutter-desktop: 40px; --section-y: 80px; /* ---- elevation -------------------------------------------------------- */ /* cards sit flat at rest; elevation appears only on hover/overlay */ --shadow-none: none; --shadow-hover: 0 2px 8px rgba(18, 23, 28, .06), 0 8px 24px rgba(18, 23, 28, .06); --shadow-overlay: 0 12px 40px rgba(10, 51, 39, .18); --shadow-sticky: 0 1px 0 var(--line); --ring-focus: 0 0 0 var(--focus-width) var(--deep-green); --ring-focus-amber: 0 0 0 var(--focus-width) var(--amber-deep); /* ---- motion ----------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease-standard: cubic-bezier(.2, .6, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --pulse-dur: 2s; /* ---- surface pattern --------------------------------------------------- * * One 80px tile, inlined as a data URI: the ornament for the two Forest fields the * site has — the homepage hero and the login screen. It lives here rather than in * either stylesheet because the same surface printed from two places drifts, and a * pattern that differs between the page that sells the address and the page that * hands it over is two brands. * * An anchor, because half of what this company sells is sea freight. White at 5%, * which is the register the translucent white rules on those bands already use — it * is a surface, never a second colour. */ --pattern-anchor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23FFFFFF' fill-opacity='0.05' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E"); } /* The single moving element in the whole system: the current tracking step. */ @keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, .5); } 70% { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } }