/* ==========================================================================
   EarnCart · READY-MADE TEMPLATE SKINS
   --------------------------------------------------------------------------
   Ten ready-made store templates. All ten share ONE layout — the engine in
   furniture.css / furniture.js — and differ only in the tokens below.

   WHY SKINS AND NOT TEN TEMPLATES
   Every reference design is the same page: announcement bar, store hero,
   trust strip, featured product with gallery + buy box, tabs, "you may also
   like", reviews with rating bars, about, policies, footer. Shipping that as
   ten copies of a 1,000-line renderer would mean fixing every storefront bug
   ten times and letting the ten drift apart. So the layout is written once and
   each template is a palette.

   THE RULE FOR EDITING THIS FILE
   A skin may only set CUSTOM PROPERTIES. It must never introduce a layout
   rule, a new selector, or a hardcoded colour on a component — the moment a
   skin styles a component directly, the ten stop being one template and the
   guarantee that a seller cannot break the design goes with it.

   Tokens a skin owns (defaults live in furniture.css):
     surfaces  --ectf-bg --ectf-bg-soft --ectf-surface
     text      --ectf-ink --ectf-ink-2 --ectf-ink-3
     lines     --ectf-line --ectf-line-soft --ectf-line-2 --ectf-line-3
     accent    --ectf-g1 --ectf-g2 --ectf-g1-rgb --ectf-g2-rgb
     solids    --ectf-ink-solid --ectf-ink-solid-hover
     hero card --ectf-glass --ectf-glass-line
     type      --ectf-font-head
     shape     --ectf-r-lg --ectf-r-md --ectf-r-sm
     depth     --ectf-sh-sm --ectf-sh-md --ectf-sh-lg --ectf-sh-brand

   WHAT THE SELLER CAN CHANGE
   Exactly one thing: the ACTION COLOUR — Follow store, Add to cart, Buy now,
   the brand eyebrow, the member price, the active size, the announcement bar.
   furniture.js writes --ectf-g1/-g2 (+ their -rgb pairs) inline on the root, on
   every template and on both plans, which overrides the four accent lines in a
   skin below. Everything else here — neutrals, surfaces, radii, type, depth —
   is the template's identity and the seller cannot touch it.

   So when picking values below: the four --ectf-g* lines are a DEFAULT the
   seller may replace. The rest is what actually makes the ten look different.
   ========================================================================== */


/* ==========================================================================
   1 · TEMPLATE 1 — universal  ·  id: furniture  ·  MASTER, free forever
   The one every seller gets. Violet house accent, light neutrals, no category
   flavour of its own on purpose: it has to sit right under furniture, fashion,
   electronics or groceries. Its tokens ARE the defaults in furniture.css, so
   this block stays empty by design — do not "fill it in".
   ========================================================================== */
/* (intentionally no overrides) */


/* ==========================================================================
   2 · FASHION — "StyleFusion"  ·  id: fashion
   Editorial monochrome: near-black solids, warm sand accent, serif display.
   ========================================================================== */
.ect-furniture.ect-skin-fashion {
  --ectf-ink: #111111;
  --ectf-ink-2: #4A443C;
  --ectf-ink-3: #857C70;
  --ectf-line: #E9E4DC;
  --ectf-line-soft: #F5F1EA;
  --ectf-line-2: #D6CEC1;
  --ectf-line-3: #E2DBD0;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F5F3EF;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #B08D57;
  --ectf-g2: #D9BC94;
  --ectf-g1-rgb: 176, 141, 87;
  --ectf-g2-rgb: 217, 188, 148;

  --ectf-ink-solid: #111111;
  --ectf-ink-solid-hover: #2A2A2A;
  --ectf-glass: rgba(255, 255, 255, .88);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-font-head: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --ectf-r-lg: 18px;
  --ectf-r-md: 12px;
  --ectf-r-sm: 8px;
  --ectf-sh-brand: 0 8px 24px rgba(20, 17, 14, .22);
}

/* ==========================================================================
   3 · ELECTRONICS — "TechElectro"  ·  id: electronics
   Cool, technical, high-contrast blue on a slightly blued white.
   ========================================================================== */
.ect-furniture.ect-skin-electronics {
  --ectf-ink: #0B1B33;
  --ectf-ink-2: #38445C;
  --ectf-ink-3: #6B7690;
  --ectf-line: #E2E8F2;
  --ectf-line-soft: #EFF3F9;
  --ectf-line-2: #C3CDDE;
  --ectf-line-3: #D8E0EC;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F4F7FC;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #1A56DB;
  --ectf-g2: #3B9EFF;
  --ectf-g1-rgb: 26, 86, 219;
  --ectf-g2-rgb: 59, 158, 255;

  --ectf-ink-solid: #0B1B33;
  --ectf-ink-solid-hover: #17233D;
  --ectf-glass: rgba(255, 255, 255, .86);
  --ectf-glass-line: rgba(255, 255, 255, .94);

  --ectf-r-lg: 16px;
  --ectf-r-md: 12px;
  --ectf-r-sm: 8px;
}

/* ==========================================================================
   4 · BEAUTY — "BeautyLuxe"  ·  id: beauty
   Soft, warm, generous radii. Pink accent on a barely-there blush ground.
   ========================================================================== */
.ect-furniture.ect-skin-beauty {
  --ectf-ink: #2A1620;
  --ectf-ink-2: #6B4A57;
  --ectf-ink-3: #9C7C88;
  --ectf-line: #F5DFE7;
  --ectf-line-soft: #FCEFF3;
  --ectf-line-2: #EEC6D4;
  --ectf-line-3: #F3D7E1;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #FDF5F8;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #E5397B;
  --ectf-g2: #F9A8D4;
  --ectf-g1-rgb: 229, 57, 123;
  --ectf-g2-rgb: 249, 168, 212;

  --ectf-ink-solid: #2A1620;
  --ectf-ink-solid-hover: #43242F;
  --ectf-glass: rgba(255, 255, 255, .88);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-r-lg: 28px;
  --ectf-r-md: 20px;
  --ectf-r-sm: 14px;
  --ectf-sh-brand: 0 8px 24px rgba(219, 39, 119, .26);
}

/* ==========================================================================
   5 · SPORTS — "SportPeak"  ·  id: sports   ·  THE DARK ONE
   Full dark surface set. Every neutral flips; nothing else in the engine
   changes, which is the whole argument for tokenising the surfaces.
   Shadows are re-tuned because a black shadow is invisible on near-black —
   dark skins get a lifted border and a deeper, wider shadow instead.
   ========================================================================== */
.ect-furniture.ect-skin-sports {
  --ectf-ink: #F2F5F7;
  --ectf-ink-2: #AEB6C0;
  --ectf-ink-3: #7C8592;
  --ectf-line: #262C35;
  --ectf-line-soft: #1C222A;
  --ectf-line-2: #39424E;
  --ectf-line-3: #2E3640;
  --ectf-bg: #0A0A0C;
  --ectf-bg-soft: #121216;
  --ectf-surface: #17171C;

  --ectf-g1: #C6F432;
  --ectf-g2: #8FE04A;
  --ectf-g1-rgb: 198, 244, 50;
  --ectf-g2-rgb: 143, 224, 74;

  /* On a dark page the "solid" button must be LIGHT to stay the loud one. */
  --ectf-ink-solid: #F2F5F7;
  --ectf-ink-solid-hover: #FFFFFF;
  --ectf-glass: rgba(23, 30, 38, .88);
  --ectf-glass-line: rgba(255, 255, 255, .10);

  --ectf-r-lg: 18px;
  --ectf-r-md: 12px;
  --ectf-r-sm: 8px;
  --ectf-sh-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .4);
  --ectf-sh-md: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .55);
  --ectf-sh-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 32px 64px rgba(0, 0, 0, .6);
  --ectf-sh-brand: 0 8px 24px rgba(198, 244, 50, .26);
}
/* The one place a dark skin needs more than a token: white text on a LIGHT
   solid button would vanish. Kept here rather than in the engine so the nine
   light templates are untouched by it. */
.ect-furniture.ect-skin-sports .ectf-btn--buy,
.ect-furniture.ect-skin-sports .ectf-btn--primary { color: #0A0A0C; }

/* ==========================================================================
   6 · JEWELLERY — "Royal Jewels"  ·  id: jewellery
   Gold on ivory, serif display, restrained radii. Reads as fine jewellery.
   ========================================================================== */
.ect-furniture.ect-skin-jewellery {
  --ectf-ink: #1A1410;
  --ectf-ink-2: #55483A;
  --ectf-ink-3: #8A7A66;
  --ectf-line: #EDE3D3;
  --ectf-line-soft: #F8F2E7;
  --ectf-line-2: #DCCCB0;
  --ectf-line-3: #E7DAC5;
  --ectf-bg: #FDFBF7;
  --ectf-bg-soft: #F7F1E6;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #BF9B30;
  --ectf-g2: #E8CE8A;
  --ectf-g1-rgb: 191, 155, 48;
  --ectf-g2-rgb: 232, 206, 138;

  --ectf-ink-solid: #1A1410;
  --ectf-ink-solid-hover: #2E251C;
  --ectf-glass: rgba(255, 253, 249, .90);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-font-head: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --ectf-r-lg: 14px;
  --ectf-r-md: 10px;
  --ectf-r-sm: 6px;
  --ectf-sh-brand: 0 8px 24px rgba(191, 155, 48, .28);
}

/* ==========================================================================
   7 · GROCERY — "Nature's Basket"  ·  id: grocery
   Fresh green, crisp white, fast to scan. Built for large, cheap catalogues.
   ========================================================================== */
.ect-furniture.ect-skin-grocery {
  --ectf-ink: #0B1F12;
  --ectf-ink-2: #3C4C41;
  --ectf-ink-3: #6E7F73;
  --ectf-line: #DFEAE1;
  --ectf-line-soft: #EEF6F0;
  --ectf-line-2: #BFD5C5;
  --ectf-line-3: #D4E4D9;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F3F9F4;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #16A34A;
  --ectf-g2: #4ADE80;
  --ectf-g1-rgb: 22, 163, 74;
  --ectf-g2-rgb: 74, 222, 128;

  --ectf-ink-solid: #14532D;
  --ectf-ink-solid-hover: #1C6B3C;
  --ectf-glass: rgba(255, 255, 255, .88);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-r-lg: 16px;
  --ectf-r-md: 12px;
  --ectf-r-sm: 8px;
}

/* ==========================================================================
   8 · HOME DECOR — "HomeDale"  ·  id: decor
   Warm cream ground, sage/olive accent, soft serif. Calm and tactile.
   ========================================================================== */
.ect-furniture.ect-skin-decor {
  --ectf-ink: #1E1C16;
  --ectf-ink-2: #514D42;
  --ectf-ink-3: #857F70;
  --ectf-line: #E8E4D8;
  --ectf-line-soft: #F4F1E8;
  --ectf-line-2: #D2CCBA;
  --ectf-line-3: #DFDACB;
  --ectf-bg: #FDFBF6;
  --ectf-bg-soft: #F7F3E9;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #5A7247;
  --ectf-g2: #93AC6B;
  --ectf-g1-rgb: 90, 114, 71;
  --ectf-g2-rgb: 147, 172, 107;

  --ectf-ink-solid: #2D3B24;
  --ectf-ink-solid-hover: #3E5031;
  --ectf-glass: rgba(255, 253, 248, .90);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-font-head: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --ectf-r-lg: 20px;
  --ectf-r-md: 14px;
  --ectf-r-sm: 10px;
}

/* ==========================================================================
   9 · LUXURY — "PrimeLux"  ·  id: luxury
   Gold on near-black. Shares jewellery's metal but not its mood: jewellery is
   gold on warm ivory with serif headings, this is a black storefront with a
   black footer and tight, modern sans type. Watches, leather, fragrance, bags.
   ========================================================================== */
.ect-furniture.ect-skin-luxury {
  --ectf-ink: #0F0F0F;
  --ectf-ink-2: #4A4741;
  --ectf-ink-3: #837E75;
  --ectf-line: #E7E3DA;
  --ectf-line-soft: #F4F1EA;
  --ectf-line-2: #D3CCBE;
  --ectf-line-3: #E0DACE;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F6F4EF;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #B8892F;
  --ectf-g2: #E0C078;
  --ectf-g1-rgb: 184, 137, 47;
  --ectf-g2-rgb: 224, 192, 120;

  /* The mock's solids are true black, not a soft charcoal — that hard contrast
     against the gold is most of what reads as "premium" here. */
  --ectf-ink-solid: #0F0F0F;
  --ectf-ink-solid-hover: #262626;
  --ectf-glass: rgba(255, 255, 255, .90);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-r-lg: 12px;
  --ectf-r-md: 8px;
  --ectf-r-sm: 6px;
  --ectf-sh-brand: 0 8px 24px rgba(184, 137, 47, .28);
}

/* ==========================================================================
   10 · HEALTH & WELLNESS — "CareWell"  ·  id: wellness
   ⚠️ NO REFERENCE IMAGE YET — same note as above.
   Clinical calm: teal, plenty of white, tight radii, quiet shadows.
   ========================================================================== */
.ect-furniture.ect-skin-wellness {
  --ectf-ink: #0C1E20;
  --ectf-ink-2: #3A5154;
  --ectf-ink-3: #6D8386;
  --ectf-line: #DDEBEB;
  --ectf-line-soft: #EDF6F6;
  --ectf-line-2: #BBD6D6;
  --ectf-line-3: #D2E5E5;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F2F9F9;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #0D8B84;
  --ectf-g2: #45C9B0;
  --ectf-g1-rgb: 13, 139, 132;
  --ectf-g2-rgb: 69, 201, 176;

  --ectf-ink-solid: #0C1E20;
  --ectf-ink-solid-hover: #173033;
  --ectf-glass: rgba(255, 255, 255, .88);
  --ectf-glass-line: rgba(255, 255, 255, .95);

  --ectf-r-lg: 14px;
  --ectf-r-md: 10px;
  --ectf-r-sm: 8px;
  --ectf-sh-sm: 0 1px 2px rgba(12, 30, 32, .04), 0 4px 10px rgba(12, 30, 32, .04);
  --ectf-sh-md: 0 2px 4px rgba(12, 30, 32, .04), 0 10px 24px rgba(12, 30, 32, .06);
}


/* ==========================================================================
   11-14 · THE FOUR MULTI-COLUMN DESIGNS
   --------------------------------------------------------------------------
   These four pair a token block here with a STRUCTURE in layouts.css. The rule
   at the top of this file still holds without exception: everything below sets
   custom properties and nothing else. If one of these needs a layout rule it
   belongs in layouts.css behind its .ect-lay-* class, never here.

   PALETTES ARE THE EXACT VALUES OFF THE DESIGN-SYSTEM PANELS.
   The V9 skins were first picked by eye from thumbnails and every one came out
   in the right family but wrong, which the user caught. These four were read
   off the swatch rows in the reference art instead, so they are transcribed,
   not estimated. Do not "improve" them without a new reference.

   TYPEFACES — two of the four are substituted, deliberately:
     - Bebas Neue (11) and Poppins (12) are free, so the real face is used.
       Poppins is already loaded by index.html for the marketplace.
     - Clash Display (14) is free but Fontshare-only, not Google. Space Grotesk
       is the closest Google-hosted geometric display and stands in.
     - PP Neue Montreal (13) is COMMERCIALLY LICENSED. It is not loaded and must
       not be. Inter is the substitute: same neo-grotesque skeleton, already
       loaded, no licence to buy.
   Swapping a substitute for the real face later is one line here plus the
   <link> in index.html.
   ========================================================================== */


/* ==========================================================================
   11 · BOLD STREETWEAR  ·  id: streetwear  ·  layout: rail
   Poster-scale condensed caps on white, acid lime with violet and hot pink.
   Palette: #0B0B0F #FFFFFF #DEF02A #7B61FF #FF61A6 #F1F1F4
   ========================================================================== */
.ect-furniture.ect-skin-streetwear {
  --ectf-ink: #0B0B0F;
  --ectf-ink-2: #3A3A44;
  --ectf-ink-3: #6E6E7A;
  --ectf-line: #E4E4EA;
  --ectf-line-soft: #F1F1F4;
  --ectf-line-2: #C6C6D0;
  --ectf-line-3: #DEDEE6;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F1F1F4;
  --ectf-surface: #FFFFFF;

  /* Lime fills, near-flat. g2 is a deeper lime rather than the palette's
     violet on purpose: the engine paints buttons with a g1->g2 gradient, and
     no single text colour is readable across lime AND violet. Violet is not
     lost — it becomes the accent INK below, which is how the reference uses
     it (lime fills, violet links). */
  --ectf-g1: #DEF02A;
  --ectf-g2: #C8DC15;
  --ectf-g1-rgb: 222, 240, 42;
  --ectf-g2-rgb: 200, 220, 21;
  /* White on lime is unreadable. Both of these are required on a light accent
     — see the token note in furniture.css. */
  --ectf-on-accent: #0B0B0F;
  --ectf-accent-ink: #7B61FF;

  --ectf-ink-solid: #0B0B0F;
  --ectf-ink-solid-hover: #22222B;
  --ectf-glass: rgba(255, 255, 255, .9);
  --ectf-glass-line: rgba(255, 255, 255, .96);

  /* Bebas Neue is caps-only and very condensed, so it carries HEADINGS only.
     Body copy stays on the grotesque, exactly as the reference sets it. */
  --ectf-font-head: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --ectf-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Hard edges. The reference rounds nothing except its pill CTAs. */
  --ectf-r-lg: 4px;
  --ectf-r-md: 3px;
  --ectf-r-sm: 2px;
  --ectf-sh-sm: 0 1px 2px rgba(11, 11, 15, .05), 0 3px 8px rgba(11, 11, 15, .04);
  --ectf-sh-md: 0 2px 4px rgba(11, 11, 15, .05), 0 10px 26px rgba(11, 11, 15, .08);
  --ectf-sh-lg: 0 8px 20px rgba(11, 11, 15, .07), 0 28px 56px rgba(11, 11, 15, .12);
}


/* ==========================================================================
   12 · STORE EMPORIUM  ·  id: emporium  ·  layout: sidebar
   The three-column marketplace shop. Ink-navy chrome, lime actions, warm sand
   as the one non-grey. Poppins throughout, as drawn.
   Palette: #0B0D12 #1A1C22 #FFFFFF #F3F4F6 #D9FF6A #6B7280 #F7EDE0
   ========================================================================== */
.ect-furniture.ect-skin-emporium {
  --ectf-ink: #0B0D12;
  --ectf-ink-2: #3D4453;
  --ectf-ink-3: #6B7280;
  --ectf-line: #E5E7EB;
  --ectf-line-soft: #F3F4F6;
  --ectf-line-2: #CBD0D9;
  --ectf-line-3: #DDE0E6;
  --ectf-bg: #F3F4F6;       /* grey page, so every panel reads as a card */
  --ectf-bg-soft: #F7EDE0;  /* the warm sand from the palette row        */
  --ectf-surface: #FFFFFF;

  --ectf-g1: #D9FF6A;
  --ectf-g2: #A8D93A;
  --ectf-g1-rgb: 217, 255, 106;
  --ectf-g2-rgb: 168, 217, 58;
  /* Same light-accent rule as 11. The reference has no coloured TEXT anywhere
     — lime is a fill, ink is navy — so the accent ink is the palette's own
     dark rather than an invented readable green. */
  --ectf-on-accent: #0B0D12;
  --ectf-accent-ink: #1A1C22;

  --ectf-ink-solid: #1A1C22;
  --ectf-ink-solid-hover: #2A2D36;
  --ectf-glass: rgba(255, 255, 255, .92);
  --ectf-glass-line: rgba(255, 255, 255, .96);

  --ectf-font-head: 'Poppins', 'Inter', system-ui, sans-serif;
  --ectf-font-body: 'Poppins', 'Inter', system-ui, sans-serif;

  --ectf-r-lg: 12px;
  --ectf-r-md: 9px;
  --ectf-r-sm: 7px;
  --ectf-sh-sm: 0 1px 2px rgba(11, 13, 18, .05), 0 3px 8px rgba(11, 13, 18, .04);
  --ectf-sh-md: 0 2px 4px rgba(11, 13, 18, .05), 0 10px 22px rgba(11, 13, 18, .07);
}


/* ==========================================================================
   13 · MONO EDITORIAL  ·  id: mono  ·  layout: rail
   Near-black ink on warm off-white paper, one hot coral accent, teal second.
   Quiet, high-contrast, premium.
   Palette: #0D000F #F7F3ED #FF4D6D #1FD2A6 #6A6A72
   TYPE: PP Neue Montreal is licensed — Inter stands in. See the header.
   ========================================================================== */
.ect-furniture.ect-skin-mono {
  --ectf-ink: #0D000F;
  --ectf-ink-2: #3C3840;
  --ectf-ink-3: #6A6A72;
  --ectf-line: #E3DED5;
  --ectf-line-soft: #EFEAE1;
  --ectf-line-2: #CBC4B8;
  --ectf-line-3: #DED8CD;
  --ectf-bg: #F7F3ED;
  --ectf-bg-soft: #EFEAE1;
  --ectf-surface: #FFFFFF;

  /* Coral to teal is the reference's own pairing. Both are light enough that
     white text on them fails, so the fill carries the near-black ink instead —
     which is also how the reference draws its coral CTA. */
  --ectf-g1: #FF4D6D;
  --ectf-g2: #1FD2A6;
  --ectf-g1-rgb: 255, 77, 109;
  --ectf-g2-rgb: 31, 210, 166;
  --ectf-on-accent: #0D000F;
  /* Coral on the warm paper is about 2.5:1 — nowhere near readable as body
     text. The reference agrees: it sets coral on ICONS and rules, never on
     type. Text accents fall back to the ink. */
  --ectf-accent-ink: #0D000F;

  --ectf-ink-solid: #0D000F;
  --ectf-ink-solid-hover: #241F26;
  --ectf-glass: rgba(247, 243, 237, .9);
  --ectf-glass-line: rgba(255, 255, 255, .92);

  --ectf-font-head: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ectf-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ectf-r-lg: 2px;
  --ectf-r-md: 2px;
  --ectf-r-sm: 1px;
  --ectf-sh-sm: 0 1px 2px rgba(13, 0, 15, .04), 0 2px 6px rgba(13, 0, 15, .03);
  --ectf-sh-md: 0 2px 4px rgba(13, 0, 15, .04), 0 8px 20px rgba(13, 0, 15, .06);
  --ectf-sh-lg: 0 6px 16px rgba(13, 0, 15, .05), 0 24px 48px rgba(13, 0, 15, .09);
}


/* ==========================================================================
   14 · NEO FUTURE  ·  id: neo  ·  layout: rail
   Violet and hot pink with a teal third, on near-white. Soft, high-radius,
   glow-forward — the opposite end of the range from 13.
   Palette: #0D0D10 #1A1A1F #6C50D3 #FF4ECD #00E0C7 #F7F7F2
   TYPE: Clash Display is Fontshare-only — Space Grotesk stands in.
   ========================================================================== */
.ect-furniture.ect-skin-neo {
  --ectf-ink: #0D0D10;
  --ectf-ink-2: #3B3B47;
  --ectf-ink-3: #6E6E7D;
  --ectf-line: #E6E6EC;
  --ectf-line-soft: #F2F2F6;
  --ectf-line-2: #C9C9D6;
  --ectf-line-3: #DEDEE8;
  --ectf-bg: #F7F7F2;
  --ectf-bg-soft: #EFEFF6;
  --ectf-surface: #FFFFFF;

  --ectf-g1: #6C50D3;
  --ectf-g2: #FF4ECD;
  --ectf-g1-rgb: 108, 80, 211;
  --ectf-g2-rgb: 255, 78, 205;

  --ectf-ink-solid: #1A1A1F;
  --ectf-ink-solid-hover: #2C2C34;
  --ectf-glass: rgba(255, 255, 255, .86);
  --ectf-glass-line: rgba(255, 255, 255, .94);

  --ectf-font-head: 'Space Grotesk', 'Poppins', system-ui, sans-serif;
  --ectf-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ectf-r-lg: 26px;
  --ectf-r-md: 18px;
  --ectf-r-sm: 12px;
  --ectf-sh-sm: 0 1px 2px rgba(13, 13, 16, .04), 0 4px 12px rgba(108, 80, 211, .07);
  --ectf-sh-md: 0 2px 4px rgba(13, 13, 16, .04), 0 14px 34px rgba(108, 80, 211, .12);
  --ectf-sh-lg: 0 10px 28px rgba(13, 13, 16, .06), 0 36px 68px rgba(108, 80, 211, .16);
  --ectf-sh-brand: 0 10px 28px rgba(var(--ectf-g1-rgb), .34);
}