/* =========================================================================== Sarago Mining Limited — design tokens --------------------------------------------------------------------------- EVERY VALUE HERE IS TAKEN FROM THE COMPANY PROFILE, not chosen. Colours were sampled from the rendered pages of "Sarago Company Profile.pdf" (in reference/); the typefaces are the ones actually embedded in it — Poppins across the document, Anton on the two chart titles. Both are on Google Fonts, so the site sets in the same type as the profile. Never hardcode a colour in a page or component. If a value is needed that is not here, it is a brand decision and belongs in this file first. =========================================================================== */ :root { /* --- Brand ------------------------------------------------------------- Amber is the profile's working colour: headings' second line, card fills, outlines, the dot motifs. Purple belongs to the logo and is used sparingly beside it, exactly as the profile does on its cover. */ --color-amber: #ffa51f; --color-amber-dark: #d47b0e; /* "PRODUCTION YTD" title, hover states */ --color-amber-soft: rgba(255, 165, 31, 0.12); --color-amber-line: rgba(255, 165, 31, 0.45); --color-purple: #452566; /* logo swoosh + star, cover "Limited" */ --color-purple-mid: #624fa6; /* forecast chart, 2027 */ --color-magenta: #862e94; /* forecast chart, 2028 */ /* --- Neutrals ---------------------------------------------------------- The profile is a dark document: near-black grounds with white type. Lifted a step from the PDF's own values (#181818 / #0E0E0E). The profile is read on paper or a projector; a screen at #181818 swallowed the logo, whose wordmark is mid-grey and whose swoosh is a dark purple. This keeps the document's character and gives those two marks something to sit on. */ --color-ink: #1f2021; /* page ground */ --color-ink-deep: #17181a; /* footer, deepest sections */ --color-ink-raised: #292a2c; /* cards sitting on the ground */ --color-grey: #737477; /* the logo wordmark's grey */ --color-white: #ffffff; --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.72); --color-text-dim: rgba(255, 255, 255, 0.54); --color-on-amber: #181818; /* type on an amber fill */ --color-hairline: rgba(255, 255, 255, 0.12); --color-surface-glass: rgba(255, 255, 255, 0.04); /* Scrims for type over photography, as the profile lays type over its site pictures on nearly every page. The left scrim eases off sooner than it did, so the photograph is still legible behind the top-left corner where the logo sits, while the headline further down keeps a solid ground to read against. */ --scrim-left: linear-gradient(90deg, rgba(31, 32, 33, 0.94) 0%, rgba(31, 32, 33, 0.82) 30%, rgba(31, 32, 33, 0.12) 92%); --scrim-bottom: linear-gradient(180deg, rgba(31, 32, 33, 0) 0%, rgba(31, 32, 33, 0.86) 72%, var(--color-ink) 100%); --scrim-flat: rgba(31, 32, 33, 0.7); /* --- Type -------------------------------------------------------------- Poppins and Anton are the profile's own embedded faces. */ --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Anton", "Poppins", system-ui, sans-serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Fluid scale: each step holds its size on a phone and grows to the document's proportions on a wide screen. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem); --text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --text-2xl: clamp(1.5rem, 1.1vw + 1.25rem, 2rem); --text-3xl: clamp(1.875rem, 1.8vw + 1.45rem, 2.75rem); --text-4xl: clamp(2.25rem, 3vw + 1.6rem, 3.75rem); --text-hero: clamp(2.75rem, 5.2vw + 1.4rem, 5.75rem); --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-wider: 0.16em; /* --- Space -------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --section-y: clamp(4rem, 8vw, 7.5rem); --gutter: clamp(1.25rem, 5vw, 4rem); --max-width: 1320px; --max-prose: 68ch; /* --- Shape -------------------------------------------------------------- The profile's cards are generously rounded; its pills are fully round. */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --border-card: 1px solid var(--color-amber-line); /* --- Depth -------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55); --shadow-amber: 0 12px 32px rgba(255, 165, 31, 0.24); /* --- Motion -------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 600ms; /* --- Chrome -------------------------------------------------------------- THE BAR IS LIGHT, THE PAGE IS DARK. The logo is a light-background mark — a mid-grey wordmark over a deep purple swoosh. Both read well on white and go dim on black, which is why it disappeared into the header and why it looks flat in the profile's own dark pages too. Nudging the ground a shade lighter cannot fix that: until the ground passes the wordmark's own grey the contrast only gets worse. So the bar the logo sits in is light, and everything below it keeps the profile's dark ground. To go back to a dark bar, change these four. Nothing else needs touching. */ --nav-bg: #f5f5f6; --nav-bg-scrolled: rgba(245, 245, 246, 0.97); --nav-text: #1f2021; --nav-hairline: rgba(31, 32, 33, 0.16); --nav-height: 84px; --nav-height-scrolled: 68px; --z-nav: 100; --z-menu: 110; --z-dialog: 120; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }