/* Fair Trade Real Estate — website design system
   Extracted 2026-09-19 from the live site at ft.coolrunnings.io.
   The site ships as a single bundled page; this is the authored stylesheet
   recovered verbatim from that bundle, comments and all.
   The Claude Design project that held it (1112c980-…) was deleted 2026-09-17. */

:root{
/* Brand */
--ft-orange-500:#FF871E; /* brand orange from the logo/site; buttons + one accent per screen only */
--ft-orange-600:#E8741A; /* hover */
--ft-orange-700:#B85300; /* orange as TEXT on light grounds (4.9:1 on white) */
--ft-orange-100:#FFF0E3; /* tiny tint for badges only, never a section fill */
--ft-navy-900:#00263D; /* headlines, footer, nav text (sampled from site) */
--ft-navy-800:#0B3A57;
--ft-navy-700:#1F4D6B;
--ft-navy-950:#001B2C; /* footer legal strip */
--ft-charcoal:#1D2A33;
--ft-tan-400:#D2B58D; /* legacy logo arc color; heritage reference only */
--ft-sand-100:#F1E6D4; /* secondary tint: investor door, panels */
--ft-sand-400:#D6B48C; /* secondary: rules, tints */
--ft-sand-600:#B8935F; /* secondary deep: italic headline accents, eyebrows (4.5:1 on paper at 18px+) */
/* Neutrals: warm paper for pages, cool grays for cards */
--ft-paper-50:#FAF8F4;
--ft-paper-100:#F3F1EA;
--ft-white:#FFFFFF;
--ft-gray-50:#F5F7FA;
--ft-gray-100:#EEF2F6;
--ft-gray-200:#DDE3E9;
--ft-gray-300:#C5CED6;
--ft-gray-400:#98A6B2;
--ft-gray-500:#6B7A86;
--ft-gray-600:#5B6B78;
--ft-gray-700:#3F4F5B;
/* Live data */
--ft-teal-500:#167C78; /* stats, map pins, live counts (4.7:1 on paper) */
--ft-teal-600:#0F5F5C;
--ft-teal-100:#E1F2F0;
/* Semantic */
--ft-green-600:#1E7F4F;
--ft-green-100:#E3F3EA;
--ft-red-600:#B42318;
--ft-red-100:#FBE9E7;
/* Semantic aliases */
--bg-page:var(--ft-paper-50);
--bg-page-alt:var(--ft-white);
--bg-dark:var(--ft-navy-900);
--bg-dark-deep:var(--ft-navy-950);
--surface-card:var(--ft-gray-100);
--surface-card-raised:var(--ft-white);
--surface-input:var(--ft-white);
--surface-inverse:var(--ft-navy-900);
--border-default:var(--ft-gray-200);
--border-strong:var(--ft-gray-300);
--border-inverse:rgba(255,255,255,.18);
--text-heading:var(--ft-navy-900);
--text-body:var(--ft-gray-700);
--text-muted:var(--ft-gray-600);
--text-subtle:var(--ft-gray-500);
--text-inverse:var(--ft-white);
--text-inverse-muted:rgba(255,255,255,.72);
--text-on-action:var(--ft-navy-900); /* navy on orange = 6.5:1 AA */
--text-link:var(--ft-navy-800);
--text-link-hover:var(--ft-orange-700);
--action-primary:var(--ft-orange-500);
--action-primary-hover:var(--ft-orange-600);
--action-primary-active:#D4680F;
--action-secondary:var(--ft-navy-900);
--action-secondary-hover:var(--ft-navy-800);
--accent:var(--ft-orange-500);
--accent-text:var(--ft-orange-700);
--secondary:var(--ft-sand-400);--secondary-deep:var(--ft-sand-600);--secondary-tint:var(--ft-sand-100);
--data-live:var(--ft-teal-500);
--data-live-bg:var(--ft-teal-100);
--status-success:var(--ft-green-600);
--status-success-bg:var(--ft-green-100);
--status-warning:var(--ft-orange-700);
--status-warning-bg:var(--ft-orange-100);
--status-error:var(--ft-red-600);
--status-error-bg:var(--ft-red-100);
--focus-ring:0 0 0 2px var(--ft-paper-50),0 0 0 4px var(--ft-navy-900);
}

/* Brand fonts, self-hosted (latin subsets extracted from the shipped site bundle) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/Manrope-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/Manrope-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/SourceSans3-latin.woff2") format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/SourceSans3-latin-italic.woff2") format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/LibreCaslonText-latin.woff2") format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/LibreCaslonText-latin-bold.woff2") format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/LibreCaslonText-latin-italic.woff2") format('woff2')}

:root{
--font-display:"Manrope",ui-sans-serif,system-ui,sans-serif; /* UI headings, numbers, buttons, nav */
--font-serif:"Libre Caslon Text",Georgia,"Times New Roman",serif; /* marketing display headlines (Direction A) */
--type-serif-display:400 84px/1.02 var(--font-serif);--ls-serif-display:-0.025em;/* @kind font */
--type-serif-h2:400 44px/1.08 var(--font-serif);--ls-serif-h2:-0.02em;/* @kind font */
--type-serif-h3:400 28px/1.2 var(--font-serif);/* @kind font */
--font-body:"Source Sans 3","Source Sans Pro",ui-sans-serif,system-ui,sans-serif; /* body, forms, tables */
--font-mono:ui-monospace,"SF Mono",Menlo,monospace; /* IDs, DRE numbers only */
/* Scale (px) */
--text-display:56px;--lh-display:1.04;/* @kind font */--ls-display:-0.02em;/* @kind font */
--text-h1:44px;--lh-h1:1.08;/* @kind font */--ls-h1:-0.02em;/* @kind font */
--text-h2:36px;--lh-h2:1.12;/* @kind font */--ls-h2:-0.015em;/* @kind font */
--text-h3:28px;--lh-h3:1.2;/* @kind font */--ls-h3:-0.01em;/* @kind font */
--text-h4:22px;--lh-h4:1.3;/* @kind font */--ls-h4:0;/* @kind font */
--text-h5:18px;--lh-h5:1.35;/* @kind font */
--text-body-lg:19px;--lh-body-lg:1.55;/* @kind font */
--text-body:17px;--lh-body:1.55;/* @kind font */
--text-body-sm:15px;--lh-body-sm:1.5;/* @kind font */
--text-caption:13px;--lh-caption:1.45;/* @kind font */
--text-eyebrow:13px;--ls-eyebrow:0.08em;/* @kind font */
--text-stat:40px;--lh-stat:1;/* @kind font */
/* Weights */
--weight-display:800;/* @kind font */--weight-heading:700;/* @kind font */--weight-semibold:600;/* @kind font */--weight-medium:500;/* @kind font */--weight-regular:400;/* @kind font */
/* Composite shorthands */
--type-display:var(--weight-display) var(--text-display)/var(--lh-display) var(--font-display);
--type-h1:var(--weight-heading) var(--text-h1)/var(--lh-h1) var(--font-display);
--type-h2:var(--weight-heading) var(--text-h2)/var(--lh-h2) var(--font-display);
--type-h3:var(--weight-heading) var(--text-h3)/var(--lh-h3) var(--font-display);
--type-h4:var(--weight-semibold) var(--text-h4)/var(--lh-h4) var(--font-display);
--type-h5:var(--weight-semibold) var(--text-h5)/var(--lh-h5) var(--font-display);
--type-body-lg:var(--weight-regular) var(--text-body-lg)/var(--lh-body-lg) var(--font-body);
--type-body:var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-body);
--type-body-sm:var(--weight-regular) var(--text-body-sm)/var(--lh-body-sm) var(--font-body);
--type-caption:var(--weight-regular) var(--text-caption)/var(--lh-caption) var(--font-body);
--type-eyebrow:var(--weight-semibold) var(--text-eyebrow)/1.2 var(--font-display);
--type-button:var(--weight-semibold) 16px/1 var(--font-display);
--type-stat:var(--weight-heading) var(--text-stat)/var(--lh-stat) var(--font-display);
}

:root{
/* Spacing, 4px base */
--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;--space-30:120px;
--section-y:var(--space-20); /* 80px default section rhythm */
--section-y-lg:var(--space-30); /* 120px for hero/major breaks */
/* Layout */
--container-max:1200px;--container-pad:24px;--grid-cols:12;/* @kind other */--grid-gap:24px;
--nav-height:72px;
/* Radii */
--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
--radius-card:var(--radius-lg);--radius-button:var(--radius-md);--radius-input:var(--radius-md);
/* Borders */
--border-width:1px;/* @kind other */--border-card:1px solid var(--border-default);/* @kind other */
/* Shadows: none by design. Depth comes from borders and surface shifts. */
--shadow-none:none;
--highlight-inner:inset 0 1px 0 rgba(255,255,255,.7);/* @kind shadow */ /* soft inner highlight on cards, the only 'depth' besides the border */
--lift-hover:translateY(-3px);/* @kind other */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");/* @kind other */
--shadow-overlay:0 24px 60px rgba(0,38,61,.18); /* dialogs only */
/* Motion */
--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */--ease-in-out:cubic-bezier(.4,0,.2,1);/* @kind other */
--duration-fast:150ms;/* @kind other */--duration-base:240ms;/* @kind other */--duration-slow:400ms;/* @kind other */
/* Controls */
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;
--control-pad-x-sm:14px;--control-pad-x-md:20px;--control-pad-x-lg:28px;
--z-nav:100;/* @kind other */--z-dropdown:200;/* @kind other */--z-dialog:300;/* @kind other */--z-toast:400;/* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{margin:0;color:var(--text-heading);text-wrap:pretty}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ft-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.ft-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gap)}
.ft-tnum{font-variant-numeric:tabular-nums}
@keyframes ft-spin{to{transform:rotate(360deg)}}
@keyframes ft-pulse{0%,100%{opacity:1}50%{opacity:.35}}

body{background:var(--bg-page)}@media (max-width:900px){.ft-grid>*{grid-column:1/-1!important}}