:root {
  /* ── Conceptable teal — sampled from the butterfly mark and wordmark ── */
  --teal-950:#00293A; --teal-900:#003D51; --teal-800:#005B78; --teal-700:#00769B;
  --teal-600:#008DB9; /* brand core: "able" + mark body */
  --teal-500:#0CA2D0; /* mark highlight */
  --teal-400:#3FB9DE; /* mark upper wings */
  --teal-300:#7FD0E9; --teal-200:#B5E4F2; --teal-100:#DDF2F9; --teal-50:#F0F9FC;

  /* ── Ink / cool grey — wordmark black #1F2227 down to page tints ── */
  --ink-950:#14171B; --ink-900:#1F2227; --ink-800:#2E333A; --ink-700:#444B54;
  --ink-600:#5C646F; --ink-500:#78818D; --ink-400:#99A1AC; --ink-300:#BAC1C9;
  --ink-200:#D8DCE1; --ink-100:#EBEDF0; --ink-75:#F2F4F6; --ink-50:#F7F8FA;

  /* ── Tan / warm neutral — the "warmth" half of the brand ── */
  --tan-800:#5E4B34; --tan-700:#7A6244; --tan-600:#9A7C55; --tan-500:#B99A6E;
  --tan-400:#D2B78F; --tan-300:#E3CFB0; --tan-200:#EFE2CD; --tan-100:#F7EFE2; --tan-50:#FBF7F0;
  --paper:#FAF8F4; /* warm page ground */

  /* ── Green — from the original Conceptable mark (#9ECC3B is the heritage mid) ── */
  --green-900:#2E3D11; --green-800:#45591A; --green-700:#5E7A25; --green-600:#7FA82F;
  --green-500:#9ECC3B; /* heritage green, sampled from the older logo */
  --green-400:#B2D962; --green-300:#C7E58C; --green-200:#DCEEB8; --green-100:#EDF7DC; --green-50:#F6FBEE;

  /* ── Charcoal — the older mark's body colour, kept for heritage lockups ── */
  --charcoal-600:#3F3F3E;

  /* ── Semantic hues ── */
  --amber-700:#B26A00; --amber-500:#E79119; --amber-100:#FBEEDA;
  --red-700:#C23A2E; --red-500:#D64B3E; --red-100:#FAE5E2;

  /* ── Group brand accents (use only when representing that company) ── */
  --brand-conceptable:#008DB9;
  --brand-itsfashion:#2FB0CE; --brand-itsfashion-dark:#258EA6; --brand-itsfashion-navy:#1E293B;
  --brand-progressed:#4B54C6; --brand-progressed-dark:#3B44B4;

  --white:#FFFFFF; --black:#000000;
}
:root {
  /* Families */
  --font-sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-display:var(--font-sans);
  --font-text:var(--font-sans);

  /* Scale — 1.25 major third, tuned to the family's live sites */
  --text-2xs:11px; --text-xs:12.5px; --text-sm:14px; --text-base:16px;
  --text-md:17px; --text-lg:19px; --text-xl:22px; --text-2xl:27px;
  --text-3xl:33px; --text-4xl:41px; --text-5xl:52px; --text-6xl:64px; --text-7xl:80px;

  /* Weights */
  --weight-light:300;  --weight-regular:400;  --weight-medium:500; 
  --weight-semibold:600;  --weight-bold:700;  --weight-black:800; 

  /* Line heights */
  --leading-tight:1.08;  --leading-snug:1.18;  --leading-heading:1.28; 
  --leading-normal:1.5;  --leading-relaxed:1.62;  --leading-loose:1.75; 

  /* Tracking */
  /* Width — Archivo's variable width axis. 92% is the brand default. */
  --width-sans:92%; 
  --width-sans-narrow:84%; 

  --tracking-tighter:-0.03em;  --tracking-tight:-0.018em;  --tracking-normal:0; 
  --tracking-wide:0.04em;  --tracking-wider:0.09em;  --tracking-widest:0.16em; 
}
:root {
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px;
  --space-24:96px; --space-28:112px; --space-32:128px;

  /* Layout */
  --container:1160px; --container-narrow:760px; --container-wide:1320px;
  --gutter:24px; --gutter-lg:32px;
  --section-y:80px; --section-y-lg:112px;
  --measure:34em;      /* body copy max width */
  --measure-lead:36em; /* lead paragraph max width */
}
:root {
  --radius-none:0px; --radius-xs:3px; --radius-sm:4px; --radius:6px;
  --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-2xl:16px;
  --radius-3xl:24px; --radius-pill:999px; --radius-circle:50%;

  --border-width:1px; --border-width-thick:2px;
}
:root {
  /* Shadows are cool-tinted (ink-950 at low alpha), never pure black */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,23,27,.06);
  --shadow-sm:0 1px 2px rgba(20,23,27,.10);
  --shadow-card:0 1px 3px rgba(20,23,27,.07), 0 1px 2px rgba(20,23,27,.04);
  --shadow-md:0 4px 12px rgba(20,23,27,.08);
  --shadow-lg:0 12px 28px rgba(20,23,27,.12);
  --shadow-pop:0 10px 34px rgba(20,23,27,.18);
  --shadow-hero:0 24px 60px rgba(20,23,27,.16);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-focus:0 0 0 3px rgba(0,141,185,.28);

  /* Protection gradients for text over imagery */
  --scrim-bottom:linear-gradient(to top, rgba(20,23,27,.78) 0%, rgba(20,23,27,.42) 45%, rgba(20,23,27,0) 100%); 
  --scrim-full:linear-gradient(to bottom, rgba(20,23,27,.55) 0%, rgba(20,23,27,.72) 100%); 
  --scrim-side:linear-gradient(to right, rgba(20,23,27,.72) 0%, rgba(20,23,27,0) 70%); 
  --fade-mask:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); 
}
:root {
  --dur-instant:80ms;  --dur-fast:150ms;  --dur:220ms;  --dur-slow:320ms;  --dur-slower:500ms; 
  --ease:cubic-bezier(.4,0,.2,1); 
  --ease-out:cubic-bezier(.16,1,.3,1); 
  --ease-in:cubic-bezier(.4,0,1,1); 
  --lift:-2px;             /* card / button hover translate */
  --press:translateY(1px); /* active state */
}
:root {
  /* Surfaces */
  --surface-page:var(--white);
  --surface-page-warm:var(--paper);
  --surface-card:var(--white);
  --surface-sunk:var(--ink-50);
  --surface-alt:var(--ink-75);
  --surface-warm:var(--tan-50);
  --surface-warm-alt:var(--tan-100);
  --surface-inverse:var(--ink-900);
  --surface-inverse-alt:var(--ink-800);
  --surface-brand:var(--teal-600);
  --surface-brand-soft:var(--teal-50);
  --surface-brand-deep:var(--teal-900);

  /* Text */
  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-inverse-muted:rgba(255,255,255,.72);
  /* Always light, in both themes — for text on an ink/dark section or an inverse card */
  --text-on-dark:var(--white);
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-on-dark-faint:rgba(255,255,255,.50);
  --text-brand:var(--teal-700);
  --text-link:var(--teal-700);
  --text-link-hover:var(--teal-900);
  --text-on-brand:var(--white);

  /* Borders */
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-warm:var(--tan-200);
  --border-inverse:rgba(255,255,255,.14);
  --border-brand:var(--teal-400);

  /* Interactive — teal is the resting brand, green is the hover accent */
  --accent-hover:var(--green-600);
  --accent-hover-strong:var(--green-700);
  --accent-hover-soft:var(--green-100);
  --border-hover-warm:var(--green-500);
  --surface-warm-hover:var(--green-50);
  --icon-hover:var(--green-600);

  /* Interactive */
  --action-primary:var(--teal-600);
  --action-primary-hover:var(--teal-700);
  --action-primary-active:var(--teal-800);
  --action-primary-soft:var(--teal-50);
  --action-secondary:var(--ink-900);
  --action-secondary-hover:var(--ink-800);
  --action-disabled:var(--ink-200);
  --focus-ring:var(--teal-600);

  /* Status */
  --status-ok:var(--green-700); --status-ok-bar:var(--green-500); --status-ok-soft:var(--green-100);
  --status-warn:var(--amber-700); --status-warn-bar:var(--amber-500); --status-warn-soft:var(--amber-100);
  --status-danger:var(--red-700); --status-danger-bar:var(--red-500); --status-danger-soft:var(--red-100);
  --status-info:var(--teal-700); --status-info-bar:var(--teal-500); --status-info-soft:var(--teal-100);
  --status-neutral:var(--ink-500); --status-neutral-soft:var(--ink-100);
}
/* Dark mode — set data-theme="dark" on <html> (or any wrapper).
   Only the semantic aliases are remapped; the base ramps are untouched.
   Ground is neutral dark grey — the charcoal of the heritage mark (#3F3F3E), not the
   blue-tinted ink ramp. Cards lift one step off the page. */
[data-theme="dark"] {
  /* Dark-mode neutrals — true greys, built up from the heritage charcoal #3F3F3E */
  --dark-950:#101010; --dark-900:#161616; --dark-850:#1C1C1C; --dark-800:#242424;
  --dark-750:#2E2E2E; --dark-700:#383838; --dark-600:#454545; --dark-500:#565656;
  --dark-warm-900:#1E1C18; --dark-warm-800:#26221C; --dark-warm-border:#3A3428;

  /* Surfaces */
  --surface-page:var(--dark-850);
  --surface-page-warm:var(--dark-warm-900);
  --surface-card:var(--dark-800);
  --surface-sunk:var(--dark-900);
  --surface-alt:var(--dark-750);
  --surface-warm:var(--dark-warm-800);
  --surface-warm-alt:var(--dark-warm-900);
  --surface-inverse:var(--dark-950);
  --surface-inverse-alt:var(--dark-800);
  --surface-brand:var(--teal-600);
  --surface-brand-soft:#0E313C;
  --surface-brand-deep:var(--teal-950);

  /* Text — teal-400 carries brand emphasis; teal-600 is too dark on this ground */
  --text-heading:#F4F4F4;
  --text-body:#C9C9C9;
  --text-muted:#9A9A9A;
  --text-faint:#757575;
  --text-inverse:var(--dark-950);
  --text-inverse-muted:rgba(16,16,16,.72);
  --text-on-dark:#F4F4F4;
  --text-on-dark-muted:rgba(255,255,255,.68);
  --text-on-dark-faint:rgba(255,255,255,.46);
  --text-brand:var(--teal-400);
  --text-link:var(--teal-300);
  --text-link-hover:var(--teal-200);
  --text-on-brand:#FFFFFF;

  /* Borders */
  --border-subtle:var(--dark-700);
  --border-default:var(--dark-600);
  --border-strong:var(--dark-500);
  --border-warm:var(--dark-warm-border);
  --border-inverse:rgba(255,255,255,.10);
  --border-brand:var(--teal-500);

  /* Interactive — teal still rests, green still responds */
  --accent-hover:var(--green-400);
  --accent-hover-strong:var(--green-300);
  --accent-hover-soft:#242C16;
  --border-hover-warm:var(--green-600);
  --surface-warm-hover:#20240F;
  --icon-hover:var(--green-400);

  --action-primary:var(--teal-600);
  --action-primary-hover:var(--teal-500);
  --action-primary-active:var(--teal-400);
  --action-primary-soft:#10333E;
  --action-secondary:#F4F4F4;
  --action-secondary-hover:#FFFFFF;
  --action-disabled:var(--dark-700);
  --focus-ring:var(--teal-400);

  /* Status — the lighter ramp steps, soft grounds mixed into the dark ground */
  --status-ok:var(--green-400); --status-ok-bar:var(--green-500); --status-ok-soft:#1D2712;
  --status-warn:#E9A845; --status-warn-bar:var(--amber-500); --status-warn-soft:#2E2312;
  --status-danger:#E8776B; --status-danger-bar:var(--red-500); --status-danger-soft:#2E1B18;
  --status-info:var(--teal-400); --status-info-bar:var(--teal-500); --status-info-soft:#10333E;
  --status-neutral:var(--text-muted); --status-neutral-soft:var(--dark-750);

  /* Elevation — shadows read as depth, not as drop shadows; borders do more work */
  --shadow-xs:0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-card:0 1px 3px rgba(0,0,0,.36), 0 1px 2px rgba(0,0,0,.24);
  --shadow-md:0 4px 12px rgba(0,0,0,.42);
  --shadow-lg:0 12px 28px rgba(0,0,0,.50);
  --shadow-pop:0 10px 34px rgba(0,0,0,.60);
  --shadow-hero:0 24px 60px rgba(0,0,0,.55);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --ring-focus:0 0 0 3px rgba(63,185,222,.30);

  --scrim-bottom:linear-gradient(to top, rgba(12,12,12,.86) 0%, rgba(12,12,12,.50) 45%, rgba(12,12,12,0) 100%); 
  --scrim-full:linear-gradient(to bottom, rgba(12,12,12,.66) 0%, rgba(12,12,12,.82) 100%); 
  --scrim-side:linear-gradient(to right, rgba(12,12,12,.82) 0%, rgba(12,12,12,0) 70%); 
}
[data-theme="dark"] body { background:var(--surface-page); color:var(--text-body); }
[data-theme="dark"] ::selection { background:var(--teal-800); color:#FFFFFF; }
[data-theme="dark"] .cds-icon-hover { color:var(--teal-400); }
[data-theme="dark"] img.cds-photo { filter:brightness(.88) contrast(1.04); }