/* ============================================================================ GREEN PLANET TRADING — DESIGN TOKENS "One planet, four ribbons." A light, luminous, botanical system. Every colour, measure and duration in the site resolves to a token here. ========================================================================== */ :root { /* ---- Surface: unbleached paper, morning mist, warm oat ------------------ */ --paper: #FBFAF5; /* base canvas — unbleached paper */ --paper-warm: #F7F3E9; /* warmer sheet, used for banded sections */ --mist: #EEF2EA; /* pale sage mist */ --mist-deep: #E2E9DD; /* mist with weight, for wells and insets */ --oat: #E9DFC9; /* warm oat — the "harvest" surface */ --oat-soft: #F2EADA; --linen: #FFFDF8; /* raised card surface — lighter than the canvas */ /* ---- Ink: the mark's deep forest green, never pure black --------------- */ --ink: #0E3A24; /* headline ink — sampled from the logo arch */ --ink-2: #334A3B; /* body copy */ --ink-3: #667A6C; /* secondary / captions */ --ink-4: #94A395; /* tertiary / placeholder / hairline text */ /* ---- Sage: the connective tissue --------------------------------------- */ --sage-100: #EFF4EA; --sage-200: #DAE5D2; --sage-300: #C0D1B5; --sage-400: #9FB794; --sage-500: #79936C; --sage-600: #56744B; --sage-700: #2F5A38; /* the logo's mid green — links, marks, buttons */ /* ---- The four seams of the mark ---------------------------------------- */ /* The logo is a sprout rising out of banded soil. Each division takes one */ /* band of that section: the shoot, the grain, the water, the deep earth. */ --ribbon-leaf: #5CA83C; /* Fertilizers — the shoot */ --ribbon-harvest: #C2842F; /* Edible Products — grain, roast, gold */ --ribbon-mineral: #4F8A9E; /* Chemicals — water, solution, clarity */ --ribbon-clay: #8B5430; /* Polymers — the deep band, built earth */ /* Tinted washes of each seam, for panels and glows */ --wash-leaf: #EDF5E6; --wash-harvest: #F9F1E0; --wash-mineral: #EAF1F4; --wash-clay: #F5EAE1; /* ---- Single warm accent, used with restraint --------------------------- */ --terracotta: #B4643F; /* soil-rooted; error and warning states only */ --terracotta-soft: #F5E4DA; /* ---- Lines, edges, shadow ---------------------------------------------- */ --rule: color-mix(in oklab, var(--ink) 12%, transparent); --rule-soft: color-mix(in oklab, var(--ink) 7%, transparent); --rule-strong: color-mix(in oklab, var(--ink) 22%, transparent); /* Shadows are sunlight through leaves: long, soft, faintly green. */ --shadow-xs: 0 1px 2px color-mix(in oklab, var(--sage-700) 6%, transparent); --shadow-sm: 0 2px 6px color-mix(in oklab, var(--sage-700) 7%, transparent), 0 1px 2px color-mix(in oklab, var(--sage-700) 5%, transparent); --shadow-md: 0 10px 30px -12px color-mix(in oklab, var(--sage-700) 22%, transparent), 0 2px 8px color-mix(in oklab, var(--sage-700) 7%, transparent); --shadow-lg: 0 32px 64px -32px color-mix(in oklab, var(--sage-700) 30%, transparent), 0 8px 24px -12px color-mix(in oklab, var(--sage-700) 14%, transparent); --shadow-xl: 0 60px 120px -48px color-mix(in oklab, var(--sage-700) 34%, transparent), 0 16px 40px -20px color-mix(in oklab, var(--sage-700) 14%, transparent); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.9); /* ---- Glass ------------------------------------------------------------- */ --glass: color-mix(in oklab, var(--paper) 72%, transparent); --glass-strong: color-mix(in oklab, var(--paper) 88%, transparent); --glass-blur: saturate(1.4) blur(20px); /* ---- Typography -------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale — a 1.28 ratio, tuned per step so nothing collapses. */ --t-micro: clamp(0.66rem, 0.63rem + 0.14vw, 0.74rem); --t-caption:clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem); --t-small: clamp(0.88rem, 0.85rem + 0.18vw, 0.97rem); --t-body: clamp(1.0rem, 0.96rem + 0.24vw, 1.14rem); --t-lead: clamp(1.14rem, 1.05rem + 0.46vw, 1.44rem); --t-h4: clamp(1.28rem, 1.16rem + 0.6vw, 1.72rem); --t-h3: clamp(1.6rem, 1.36rem + 1.15vw, 2.5rem); --t-h2: clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem); --t-h1: clamp(2.9rem, 1.9rem + 4.6vw, 6.2rem); --t-mega: clamp(3.6rem, 1.7rem + 8.6vw, 11rem); --lh-tight: 1.02; --lh-snug: 1.14; --lh-normal: 1.42; --lh-loose: 1.68; --tr-tight: -0.03em; --tr-snug: -0.018em; --tr-normal: 0em; --tr-wide: 0.06em; --tr-mono: 0.14em; /* ---- Space: an 8px base with a golden drift at the top end ------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --s-13: 10rem; --s-14: 13rem; /* Section rhythm — the page breathes on this measure. */ --section-y: clamp(5rem, 3.4rem + 7.4vw, 11rem); --section-y-lg: clamp(7rem, 4.2rem + 11vw, 15rem); /* ---- Layout ------------------------------------------------------------ */ --shell: min(1320px, 100% - clamp(1.5rem, 5vw, 7rem)); --measure: 62ch; --measure-sm: 46ch; --rail: clamp(0px, -6rem + 9vw, 7rem); /* left margin rail on desktop */ --header-h: 78px; /* ---- Radius: organic, never uniform ------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-2xl: 52px; --r-pill: 999px; /* Leaf: one sharp corner, three soft — the botanical signature radius. */ --r-leaf: var(--r-2xl) var(--r-sm) var(--r-2xl) var(--r-sm); /* ---- Motion ------------------------------------------------------------ */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* settle */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* travel */ --e-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* springs back */ --e-soft: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 160ms; --d-base: 280ms; --d-slow: 520ms; --d-lazy: 900ms; --d-drift: 1400ms; --z-canvas: 0; --z-raise: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-cursor: 900; } /* A theme hook: each division scopes its own ribbon colour so cards, glows, icons and rules all recolour from one custom property. */ [data-ribbon="leaf"] { --ribbon: var(--ribbon-leaf); --wash: var(--wash-leaf); } [data-ribbon="harvest"] { --ribbon: var(--ribbon-harvest); --wash: var(--wash-harvest); } [data-ribbon="mineral"] { --ribbon: var(--ribbon-mineral); --wash: var(--wash-mineral); } [data-ribbon="clay"] { --ribbon: var(--ribbon-clay); --wash: var(--wash-clay); } @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-lazy: 1ms; --d-drift: 1ms; } }