/* ============================================================================ ATELIER — THE LOCKED SYSTEM Tokens only. Every other stylesheet in this project reads from here and invents nothing. If a value is not in this file, it does not belong in a component. WHY THESE DECISIONS Colour. A monochrome shell at chroma 0 and one signal. The garments carry every colour on the site — forest, terracotta, cognac, burgundy, midnight — so the interface stays out of their way. The off-white is a true neutral, not a warm one: a tinted near-white is the house style of every generated page this year and it would read as such next to the photography. Signal. Oxblood, taken from the burgundy bag and the terracotta blazer in the catalogue rather than from a mood board. It appears as a rule, a mark, a validation state. It is never a fill and never decoration. Type. Archivo, one variable family, with the width axis carrying the contrast instead of a second typeface. Campaign type is set wide and heavy; interface type is set at normal width. A didone would have been the reflex for fashion and would have read as a magazine pastiche. Radius. Seven steps, 6px to 40px plus a full round. The scale is tied to object size: the hero takes 40, a card takes 24, a button takes 10, a chip takes 6. Large radii on small components is what makes an interface read as a toy, so the steps are not interchangeable. Surfaces. Three planes. The page sits at #F5F5F3, anything raised sits at white, and images rest in a well a shade below. That separation is what lets a rounded container read as an object without a heavy shadow. Motion. One easing curve for entrances, one for reversible states, and a fixed set of durations. Every animation in the project picks from this list; none defines its own. ========================================================================= */ :root { color-scheme: light; /* ------------------------------------------------------------ 1. INK --- Ratios quoted against --surface. --ink-500 is deliberately NOT a text colour: it lands at 4.07:1 and fails AA, so it is limited to rules, dividers and disabled glyphs. --ink-600 is the muted-text floor. */ --ink-900: #080808; /* 19.4:1 — display, primary text */ --ink-800: #111111; /* 17.0:1 — body */ --ink-700: #1A1A1A; /* 14.9:1 — dark surfaces */ --ink-600: #666666; /* 5.2:1 — muted text floor */ --ink-500: #777777; /* 4.1:1 — NOT for text. Rules and disabled */ --ink-300: #D5D5D5; /* hairlines on light */ /* Three planes, not one. The page ground is a shade below the surfaces that sit on it, so a rounded container reads as a raised object without needing a heavy shadow. `--ground` is the page; `--surface` is anything lifted off it; `--well` is what an image sits in before it loads. */ --ground: #F5F5F3; /* the page */ --surface: #FFFFFF; /* raised: cards, panels, the header when stuck */ --surface-2: #FAFAF9; /* a half step, for nested areas */ --well: #ECECE9; /* image wells and inset fields */ --surface-lift: var(--surface); /* retained: older rules read this name */ --surface-sink: var(--well); /* --------------------------------------------------------- 2. DARK ROOM */ --room: #0E0E0E; --room-lift: #171717; --room-lift-2: #222222; --on-room: #F4F4F4; /* 17.1:1 on --room */ --on-room-2: #A8A8A8; /* 7.9:1 on --room */ --on-room-3: #6E6E6E; /* rules only, never text */ /* ---------------------------------------------------------- 3. SIGNAL --- One accent. Oxblood. Under 3% of any screen. */ --signal: #6E1F2B; /* 10.1:1 on --surface */ --signal-lift: #C9697A; /* 5.3:1 on --room */ --signal-wash: rgba(110, 31, 43, 0.07); /* --------------------------------------------------------- 4. FEEDBACK --- Positive borrows the ink so success never introduces a second accent; only the error state gets its own hue, and it is the signal itself. */ --ok: #1F5136; /* 7.4:1 on --surface */ --ok-wash: rgba(31, 81, 54, 0.08); --warn: #6B4A10; --bad: #8A1F2B; /* 7.6:1 on --surface */ --bad-lift: #E0808C; --bad-wash: rgba(138, 31, 43, 0.08); /* ------------------------------------------------------------ 5. LINES --- Two weights on each ground. Nothing thicker than 1px anywhere in the project except a deliberate 2px focus ring. */ --line: rgba(8, 8, 8, 0.14); --line-strong: rgba(8, 8, 8, 0.26); --line-faint: rgba(8, 8, 8, 0.07); --line-room: rgba(244, 244, 244, 0.16); --line-room-strong: rgba(244, 244, 244, 0.32); --line-room-faint: rgba(244, 244, 244, 0.08); /* -------------------------------------------------------- 6. WHATSAPP --- Held here so the one non-system colour in the project is declared with the rest. Labels on it are inked: white on #25D366 is 2.0:1 and fails. */ --wa: #25D366; --wa-press: #1DB855; --on-wa: var(--ink-900); /* ------------------------------------------------------------- 7. TYPE --- One family. The width axis is the contrast: campaign type at 118, chrome at 100, dense tabular data at 92. */ --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-ar: "Noto Sans Arabic", "Archivo", Arial, sans-serif; --font-ar-display: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif; --wide: 118; /* display width */ --normal: 100; /* interface */ --narrow: 92; /* tabular, dense */ /* Interface scale. 1.25 ratio from 16 up, tight steps below it where labels live. */ --t-11: 0.6875rem; --t-12: 0.75rem; --t-13: 0.8125rem; --t-15: 0.9375rem; --t-16: 1rem; --t-20: 1.25rem; --t-25: clamp(1.125rem, 0.4vw + 1rem, 1.5625rem); /* Display scale. The ceiling is 5.25rem (84px): a heading larger than that is shouting, and the hero has a photograph to carry the drama. */ --d-1: clamp(2.375rem, 4.6vw + 0.6rem, 5.25rem); --d-2: clamp(1.75rem, 2.6vw + 0.7rem, 3rem); --d-3: clamp(1.375rem, 1.5vw + 0.8rem, 2rem); --d-4: clamp(1.125rem, 0.7vw + 0.9rem, 1.5rem); /* Tracking. The display floor is -0.035em: tighter than -0.04em and the letters touch. */ --track-display: -0.032em; --track-tight: -0.015em; --track-normal: 0; --track-label: 0.16em; /* the only wide tracking in the project */ --leading-display: 1.02; --leading-heading: 1.16; --leading-body: 1.6; --leading-loose: 1.72; /* light type on dark needs the extra */ --measure: 68ch; --measure-tight: 46ch; /* ------------------------------------------------------------ 8. SPACE --- One scale. 4px base, loosening as it climbs so large gaps stay distinct from each other. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 128px; --sp-13: 176px; --gutter: clamp(20px, 4vw, 56px); --band: clamp(72px, 7.5vw, 132px); --band-tight: clamp(48px, 4.5vw, 80px); --shell: 1480px; --shell-wide: 1720px; --shell-narrow: 720px; /* ----------------------------------------------------------- 9. RADIUS --- Seven steps, each with a job. Nothing in the project invents a radius; if a component needs a corner it picks a step from this list. The rule that keeps it from becoming bubbly: radius scales with the object. A 40px corner belongs to something the size of a hero; a 6px corner belongs to a chip. Putting the large steps on small components is what turns a considered interface into a toy. */ --r-xs: 6px; /* chips, tags, swatch outlines, small pills */ --r-sm: 10px; /* buttons, inputs, tiles, icon buttons */ --r-md: 16px; /* toasts, menus, small panels, quantity */ --r-lg: 24px; /* product media, cards, modals, drawers */ --r-xl: 32px; /* feature panels, category tiles, dark rooms */ --r-2xl: 40px; /* the hero container, full-width campaigns */ --r-full: 999px; /* counters and circular controls only */ /* Nested corners: an inner radius should equal the outer minus the gap, or the two arcs fight. Components that clip a child inside a container use this rather than repeating the arithmetic. */ --r-inner: calc(var(--r-2xl) - var(--sp-3)); /* Retained so rules written against the previous scale keep working. */ --r-0: 0px; --r-1: var(--r-sm); /* -------------------------------------------------------- 10. ELEVATION --- Long, low and almost colourless. Two steps and a panel shadow. */ /* Two-part shadows: a tight contact shadow that seats the object, and a wide soft one that gives it height. A single large blur reads as a glow; the pair reads as a physical card on a surface. */ --lift-1: 0 1px 2px rgba(8, 8, 8, 0.05), 0 0 0 1px rgba(8, 8, 8, 0.03); --lift-2: 0 2px 4px -2px rgba(8, 8, 8, 0.06), 0 12px 28px -12px rgba(8, 8, 8, 0.14); --lift-3: 0 4px 8px -4px rgba(8, 8, 8, 0.07), 0 28px 60px -24px rgba(8, 8, 8, 0.20); --lift-hero: 0 2px 6px -2px rgba(8, 8, 8, 0.05), 0 32px 72px -28px rgba(8, 8, 8, 0.22); --lift-panel: 0 0 0 1px rgba(8, 8, 8, 0.05), 0 24px 64px -12px rgba(8, 8, 8, 0.28); /* The 1px translucent highlight along a raised top edge. */ --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.6); --edge-dark: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ----------------------------------------------------------- 11. MOTION --- `--ease` is ease-out-quint: fast departure, long settle, no overshoot. Every entrance uses it. `--ease-io` is for anything that reverses. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* A softer settle for objects that scale, so a card does not snap. */ --ease-soft: cubic-bezier(0.32, 0.72, 0.24, 1); --t-press: 110ms; --t-hover: 200ms; --t-state: 280ms; --t-modal: 260ms; --t-drawer: 380ms; --t-enter: 420ms; --t-reveal: 700ms; --t-image: 900ms; --stagger: 60ms; /* ------------------------------------------------------------ 12. LAYER --- Semantic. No arbitrary values anywhere in the project. */ --z-base: 0; --z-raised: 10; --z-sticky: 60; --z-header: 100; --z-menu: 110; --z-bottom-bar: 200; --z-scrim: 900; --z-drawer: 1000; --z-overlay: 1050; --z-toast: 1200; /* ------------------------------------------------- 13. THE OFFSET FRAME --- The house signature. A hairline rectangle sitting behind and offset from an image, the way a print sits on a mat board. Components set --frame-x and --frame-y; these are the defaults. */ --frame-x: 18px; --frame-y: 18px; /* Written by the runtime. */ --header-h: 64px; } /* Arabic swaps the family and drops the tracking, which does not belong in an Arabic face, and takes a looser leading because the script needs it. */ html[dir="rtl"] { --font: var(--font-ar); --track-display: 0; --track-tight: 0; --track-label: 0; --leading-display: 1.28; --leading-heading: 1.42; --leading-body: 1.78; }