/* =========================================================================== BestAccessoriesIndia.in - design tokens The single source of colour, type, spacing and shape for this project. Both stylesheets read from here and neither declares its own palette, so changing a brand value once changes it on the public site and in the admin at the same time. Before this file those two :root blocks were separate copies that had already drifted. Every colour below is either sampled from the supplied logo or derived from one of those samples, and every value that carries text has been measured against the surface it sits on. The ratios in the comments are real; they are what keeps a later "just make it a bit brighter" honest. =========================================================================== */ :root { /* --- Brand ----------------------------------------------------------- Sampled from the logo artwork itself. #FD3C00 is the orange of the wordmark's leading letters and the ribbon's hot end; #FD7501 is the amber it fades into; #161D28 is the charcoal of "Best" and the bag; #01992F is the green of the tricolour flourish. -------------------------------------------------------------------- */ --brand-orange: #FD3C00; --brand-amber: #FD7501; --brand-dark: #161D28; --brand-dark-2: #232832; --brand-green: #01992F; /* The logo's orange is 3.61:1 on white - enough for a large fill or a 3px rule, not enough for a label or a link. These two are the same hue walked down until they carry text: 5.39:1 and 7.29:1 on white, 4.98:1 and 6.71:1 on the canvas. They are what buttons, links and active states actually use. */ --brand-orange-ink: #CC2A00; --brand-orange-ink-2: #A82100; /* The logo orange at 7%, for a soft fill that accent text sits on at 4.89:1. */ --brand-orange-soft: #FFF1ED; /* For the rare case where the tricolour green has to carry text rather than decorate: 5.15:1 on white and 4.76:1 on the canvas. The first attempt, #08872C, cleared white at 4.65 and then missed the canvas at 4.30 - which is the whole reason these ratios are measured against both surfaces rather than just the brighter one. */ --brand-green-ink: #077F29; /* --- Ink ------------------------------------------------------------- --ink-900 is the brand charcoal, so body text and the logo are the same colour rather than two near-blacks. 16.93 / 13.38 / 6.93 / 5.07 against white. -------------------------------------------------------------------- */ --ink-900: #161D28; --ink-700: #24303F; --ink-500: #4C5B6E; --ink-300: #646F82; /* On the dark brand surface - the footer, the sign-in panel. Measured against #161D28: 16.93, 12.22, 10.86, 9.58 and 4.88. The last is the smallest type there, and it clears AA with nothing to spare, which is why it is written down. */ --ink-on-dark: #FFFFFF; --ink-on-dark-link: #D3DCE7; --ink-on-dark-strong: #C6D0DD; --ink-on-dark-body: #B9C4D2; --ink-on-dark-muted: #7D8B9D; /* --- Surfaces -------------------------------------------------------- */ --surface: #FFFFFF; --canvas: #F4F6FA; --line: #E1E6ED; --line-soft: #EDF0F5; --line-dark: #2C3444; /* --- Interactive accent ---------------------------------------------- One accent, used by links, primary buttons, active navigation and focus. It is the brand orange walked into readable range, so the interface agrees with the logo instead of introducing a second identity. Section 50: change these three and everything follows. -------------------------------------------------------------------- */ --accent: var(--brand-orange-ink); --accent-strong: var(--brand-orange-ink-2); --accent-soft: var(--brand-orange-soft); /* The hairline that frames an --accent-soft panel. It used to be a cobalt rgba() literal, which stayed blue when the accent moved and drew a cold line around a warm result card. */ --accent-line: rgba(253, 60, 0, .22); /* The undiluted logo orange, for rules, underlines and indicators - shapes, not text. 4.69:1 on the dark surface, where it may carry a label. */ --accent-vivid: var(--brand-orange); /* --- Commerce -------------------------------------------------------- Affiliate and monetization calls to action, kept distinct from the editorial accent so a reader can tell paid from written. White on it is 4.70:1. -------------------------------------------------------------------- */ --commerce: #B35C22; --commerce-soft: #FBF1E8; /* --- Status ---------------------------------------------------------- Semantic, never decorative, and never replaced by orange. Each is measured against white and against its own 8% tint, which is the background the alerts use. -------------------------------------------------------------------- */ --success: #0E7A56; /* 5.33 on white, 4.77 on its tint */ --success-soft: #ECF4F1; --warning: #8C6206; /* 5.43 / 4.87 */ --warning-soft: #F6F2EB; --danger: #B3322F; /* 6.15 / 5.45 */ --danger-soft: #F9EFEE; --info: #1C4FD8; /* 6.65 / 5.88 */ --info-soft: #EDF1FC; /* The hairline each status draws. --info-line was the only one of these that existed, so the admin wrote the other three inline: --danger alone appeared as an rgba() literal at six different alphas in seven places, --success and --warning at four each. A change to --danger left every one of them behind, which is the bug the --accent-line comment above records happening once already. One line per status now, so an alert, a flash message and a pill cannot disagree about how strong a warning looks. Backgrounds use the opaque --*-soft values above rather than a fourth set of alphas. An alpha wash composites over whatever is behind it, so the same alert read one way on white and another on the admin's canvas: at .08 over the canvas, an --accent link inside a warning alert measured 4.49:1 against the 4.5 it needs. The opaque tints are fixed, and every text colour the alerts use clears AA on all four of them - the tightest is an --accent link on --danger-soft at 4.77:1. */ --info-line: rgba(28, 79, 216, .25); --success-line: rgba(14, 122, 86, .32); --warning-line: rgba(140, 98, 6, .32); --danger-line: rgba(179, 50, 47, .32); /* Hairlines on the admin's charcoal top bar, where --line would vanish. */ --line-on-dark: rgba(255, 255, 255, .22); --line-on-dark-strong: rgba(255, 255, 255, .45); /* --- Type ------------------------------------------------------------ Instrument Sans throughout, a serif for long-form article body, mono for figures and identifiers. The scale is deliberately short: display down to caption and nothing in between to argue about. -------------------------------------------------------------------- */ --sans: "Instrument Sans", ui-sans-serif, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Fluid, but with a ceiling: a 44px hero is a heading, not a banner. */ --t-display: clamp(28px, 6.2vw, 44px); --t-h1: clamp(26px, 5.4vw, 40px); --t-h2: clamp(20px, 3.4vw, 27px); --t-h3: clamp(17px, 2.2vw, 20px); --t-body: 15.5px; --t-small: 13.5px; --t-caption: 12.5px; --t-label: 11.5px; /* The same scale, at the sizes a dense interface works at. --t-display down to --t-label is the public site's voice: fluid, display led, sized for a reading column. The admin is a control surface at about two thirds of that, and it had been writing its own sizes inline - twenty distinct values between 10px and 26px, none of them declared anywhere. These are the four rungs the admin needed that the list above did not carry; --t-small, --t-caption and --t-label already matched it exactly and are shared rather than duplicated. Fixed rather than fluid, because a toolbar button should not grow with the window. --t-ui-display a screen title, or the one figure a panel is about --t-ui-figure a secondary figure beside it --t-ui-field anything typed into at full width --t-ui-body body, table cells, navigation --t-small buttons, field labels, tabs (shared) --t-caption secondary text and captions (shared) --t-label uppercase eyebrows, badges, counts (shared) --t-ui-micro the smallest uppercase label there is -------------------------------------------------------------------- */ --t-ui-display: 22px; --t-ui-figure: 18px; /* 16px is a threshold rather than a taste: below it Safari on iOS zooms the page when a field takes focus, and the reader then has to pinch back out to see the form they were filling in. --t-body is the nearest existing rung and it is 15.5px, half a pixel short, so it cannot stand in here. */ --t-ui-field: 16px; --t-ui-body: 14.5px; --t-ui-micro: 10.5px; --lh-tight: 1.22; --lh-body: 1.6; --lh-read: 1.75; --tracking-label: .085em; /* --- Space ----------------------------------------------------------- A 2px grid. The eight numbered steps are the 4px scale this file has always declared; the five half-steps are the values the interface was already built on - 6, 10, 14 and 18 were the four most common spacing values in admin.css, ahead of every step on the 4px scale, and 2px is the optical nudge under a checkbox or between toolbar buttons. Adding them is what let 245 hard-coded values become tokens without moving a single pixel; forcing 10 to 8 and 14 to 12 would have been a redesign. -------------------------------------------------------------------- */ --s-0: 2px; --s-1: 4px; --s-1h: 6px; --s-2: 8px; --s-2h: 10px; --s-3: 12px; --s-3h: 14px; --s-4: 16px; --s-4h: 18px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* --- Shape ----------------------------------------------------------- Restrained on purpose. A 10px card and a 6px control read as software; a 24px card reads as a marketing page. -------------------------------------------------------------------- */ --r-chip: 2px; --r-ctrl: 6px; --r-card: 10px; --r-panel: 14px; /* A chip that is meant to read as fully round, whatever its height. */ --r-pill: 999px; --sh-sm: 0 1px 2px rgba(22, 29, 40, .06); --sh-md: 0 4px 16px rgba(22, 29, 40, .10); --sh-lg: 0 6px 24px rgba(22, 29, 40, .10); /* A dialog sits above everything and needs more separation than a panel. Kept as its own step rather than reaching for --sh-lg, which is tuned for something still on the page. */ --sh-dialog: 0 24px 60px rgba(22, 29, 40, .30); /* Behind a dialog. The brand charcoal, not the near-black it used to be. */ --scrim: rgba(22, 29, 40, .55); /* --- Layout ----------------------------------------------------------- */ --gutter: 16px; --wrap: 1280px; --read: 46rem; --sidebar: 216px; --topbar: 56px; } @media (min-width: 600px) { :root { --gutter: 24px; } } @media (min-width: 900px) { :root { --gutter: 32px; } }