/* ==========================================================================
   Contractor Trade, Design tokens
   Single source of truth for colour, type, space, radius, elevation, motion.

   Light only, with demo-selectable colour and corner presets. The current
   teal palette and pill-first shape remain the defaults.

   The greys are true neutrals: shades of black, with no blue in them. That
   matters more than it sounds: a blue-tinted grey makes every hairline border
   read as a faint blue line, which is what made the interface look washed out
   even though only one colour was ever meant to be blue.

   Exactly one thing is coloured: the teal accent. Everything else is
   charcoal, white, a warm grey, or a reserved status hue.

   The palette is the one in the social media team's proposal, liked for
   the platform (Clarification 1.7), made more vivid on 29 Sep, then unified
   on 2 Oct around the text-safe member of each theme: a deep black
   #0c0e0d, warm greys, and balanced teal #008385 as the default brand and
   action. 16 Oct (after the meeting of 12 Oct): a vibrant green in place
   of the teal: the bright green shown there, #0ac878, taken a step deeper, #03a05e, the same hue and
   vividness, so white words read on it as they did on the teal (3.4:1;
   on #0ac878 they read 2.2:1, and dark words were tried and left the same
   day: "we want like before"); its small-text ink the green 82% with the
   brand ink (4.6:1 on white); the rest of the palette is unchanged. Before it, the teal: later on 2 Oct the teal lightened to #009a9a, between that and
   the bright #00afa0 (the user: "a bit more light ... in between"), its
   shades all made from it (the ink for small text on white is the accent
   80% with the brand ink, about #027e7e), so a theme only sets the accent.
   The greener
   #007268 and brighter #00afa0 / #00c0af trials are
   retained here as history, not mixed into the live identity. Tried and left
   on 29 Sep: #008478 with a second bright teal on dark grounds; #0fa89a with
   black text on buttons; #00876e, which read green; #008585, which read dull.
   Before 29 Sep: --text, --brand, --brand-ink, --sidebar-ink-hi
   #111312; --brand-hover #1e2220; --brand-active #070908; --accent #008081;
   --accent-hover #006d6e; --accent-active #005c5d; --accent-soft #e0f5f3;
   --accent-soft-2 #b9e9e5; --accent-ink #00696a; --surface-brand #ebf8f6;
   --ring rgba(0, 128, 129, .30); --lp-ink-2 #1e2220.
   The previous V1 blue palette is preserved below as a real selectable
   preset rather than a comment that has to be applied by hand.
   Design rules: docs/planning/PHASE-1.md, 1.5 Across every screen.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Palette identities are also used by the demo configurator's swatches. */
  --palette-vivid-accent: #03a05e;
  --palette-blue-accent: #2451b8;
  --palette-purple-accent: #6d32b6;
  --palette-copper-accent: #88420f;
  --palette-green-accent: #0d5f58;
  --preview-radius-subtle: 4px;
  --preview-radius-rounded: 10px;
  --preview-radius-pill: 999px;

  /* --- Surfaces & ink ----------------------------------------------------
     Neutral greys. No blue cast anywhere in this block.                   */
  --bg:              #ffffff;
  --surface:         #ffffff;
  --surface-raised:  #fbfbfc;
  --surface-2:       #f4f5f2;   /* insets, table headers, hover wash         */
  --surface-3:       #e9eae6;   /* pressed / selected wash                   */
  --surface-brand:   color-mix(in srgb, var(--accent) 9%, var(--surface));   /* the one accent-tinted wash, used sparingly */

  --sidebar-bg:      #ffffff;
  --sidebar-ink:     #515753;
  --sidebar-ink-hi:  #0c0e0d;
  --sidebar-hover:   rgba(22, 23, 24, .05);
  --sidebar-active:  #eeefeb;

  --text:            #0c0e0d;   /* 19.5:1 on white                           */
  --text-2:          #515753;   /* strong secondary text                     */
  --text-3:          #686f6a;   /* meta text still clears AA                 */
  --text-inv:        #ffffff;

  --border:          #e3e5e1;   /* neutral hairline, no blue                 */
  --border-strong:   #c7cac6;
  --ring:            color-mix(in srgb, var(--accent) 32%, transparent);
  --ring-soft:       color-mix(in srgb, var(--accent) 18%, transparent);   /* under a focused field's own border */

  /* --- Brand -------------------------------------------------------------
     --brand is a neutral near-black, 19:1 with white. It is the ink of the
     interface: body text, the selected tab, the toast, the logo tile.

     --accent is the identity colour used by the mark, wordmark, signals
     and filled controls, with white words on it. Small accent text on
     white uses --accent-ink, the same hue deeper. Hover and pressed are darker
     states in the same hue; pale surfaces use its soft companions.        */
  --brand:           #0c0e0d;
  --brand-hover:     #1b1f1d;
  --brand-active:    #040505;
  --brand-on:        #ffffff;
  --brand-on-wash:   color-mix(in srgb, var(--brand-on) 12%, transparent);   /* a pale panel on ink */
  --brand-soft:      #eeefeb;
  --brand-soft-2:    #e0e2dd;
  --brand-ink:       #0c0e0d;

  /* Every shade below is made from --accent, so a theme sets the accent
     and the rest follows; a preset may still give its own tuned values. */
  --accent:          var(--palette-vivid-accent);
  --accent-hover:    color-mix(in srgb, var(--accent) 86%, var(--brand));
  --accent-active:   color-mix(in srgb, var(--accent) 74%, var(--brand));
  --accent-fill:     var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --accent-fill-active: var(--accent-active);
  --accent-soft:     color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-soft-2:   color-mix(in srgb, var(--accent) 30%, var(--surface));
  --accent-ink:      color-mix(in srgb, var(--accent) 82%, var(--brand));   /* small accent text on white; 4.6:1 */
  --accent-on:       #ffffff;
  /* Accent text on ink uses the same hue lifted just enough to remain clear.
     Small text on light surfaces uses --accent-ink above. */
  --accent-on-dark:  color-mix(in srgb, var(--accent) 70%, var(--brand-on));
  --accent-line:     color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-halo:     color-mix(in srgb, var(--accent) 7%, transparent);

  /* Shared translucent layers. These are named here so dialogs, media and
     dark sections never invent their own near-black or white. */
  --scrim:           rgba(13, 17, 23, .5);
  --media-label-bg:  rgba(13, 17, 23, .72);
  --image-overlay:   rgba(22, 23, 24, .72);
  --print-border:    #cccccc;

  /* --- Status ------------------------------------------------------------
     Four hues, reserved. They never appear as decoration, and they always
     ship with an icon and a word.

     Base values are for dots, icons and bars. The -ink value is text on the
     matching -soft background.                                            */
  /* Positive states use the brand accent too. The word and icon carry the
     meaning, so a separate green would only make the interface uneven. */
  --good:            var(--accent);
  --warning:         #d98407;
  --serious:         #dd6420;
  --critical:        #d92d20;

  --good-soft:       var(--accent-soft);
  --warning-soft:    #fdf3e2;
  --serious-soft:    #fdeee5;
  --critical-soft:   #fdeceb;

  --good-ink:        var(--accent-ink);
  --warning-ink:     #9a5c00;
  --serious-ink:     #b34715;
  --critical-ink:    #b42318;
  --warning-vivid:   #fdb022;
  --critical-vivid:  #f58d86;

  --neutral-soft:    #eeefeb;
  --neutral-ink:     #515753;

  /* --- Data visualisation --------------------------------------------------
     Most charts here are single-series or an ordinal ramp, so one hue carries
     them. Three categorical slots are reserved for the charts that genuinely
     need them, and no more.

     They live in their own tokens, separate from the UI palette even where
     values coincide: restyling the chrome must never silently repaint data. */
  --series-1: var(--accent);   /* the single-series mark */
  --series-2: var(--ord-2);    /* reserved, categorical, accent family */
  --series-3: #d98407;   /* reserved, categorical */

  /* Ordinal teal ramp for progressions (pipeline, funnel, verification). */
  --ord-1: color-mix(in srgb, var(--accent) 28%, var(--surface));
  --ord-2: color-mix(in srgb, var(--accent) 66%, var(--surface));
  --ord-3: var(--accent);
  --ord-4: var(--accent-active);
  --ord-track: #e9eae6;

  /* --- Chart chrome ------------------------------------------------------ */
  --grid:            #eceee9;
  --axis:            #c7cac6;
  --viz-muted:       #686f6a;

  /* Illustrations take their colours from the tokens above; skin and its
     shade are the two colours of their own. */
  --art-skin:        #f2b8a6;
  --art-skin-shade:  #dc917f;

  /* Public-site colours use the same palette rather than declaring a second
     set in public.css. */
  /* The landing uses the product's deepest neutral for a clearer, more
     current first impression (2 Oct). Its raised shade is still visibly
     separate, and neither carries a green or teal cast. */
  --lp-ink:          var(--brand);
  --lp-ink-2:        #171918;
  --lp-line:         color-mix(in srgb, var(--brand-on) 12%, transparent);
  /* A card's outline on the landing pages: a little thick, so every card
     reads clearly (10 Oct, the user: "a bit thick borders everywhere");
     on ink it is the firmer line the band cards already had (8 Oct). */
  --lp-line-2:       color-mix(in srgb, var(--brand-on) 20%, transparent);
  --lp-bw:           2px;
  /* The metal shade of Contractor Trade's hero claim (11 Oct, the user: "a
     bit metal shade of text, or basically gradient", then "a bit more
     better clean gradient"): one sweep across the whole headline, white
     running to steel, not repeated on each line. The one gradient on the
     site, made from the tokens, so a theme carries through. The homeowner
     hero's claim is plain ink (11 Oct: "like before, no gradient"). */
  --lp-metal:        linear-gradient(110deg, var(--brand-on) 0%, var(--brand-on) 30%, color-mix(in srgb, var(--brand-on) 52%, var(--lp-ink)) 100%);
  --lp-tint:         #f1f2ef;
  /* The homeowner site's soft ground (10 Oct; email, 9 Oct: "Softer look.
     Brighter colours"): the accent mixed into white, so it is the same
     colour family and a theme carries through. On Contractor Trade Direct
     it stands where the trade site has the warm grey tint. */
  --lp-soft:         color-mix(in srgb, var(--accent) 6%, var(--surface));
  --lp-soft-2:       color-mix(in srgb, var(--accent) 16%, var(--surface));
  --lp-accent:       var(--accent);
  /* The accent fills the landing's panels and signals, with white words on
     it; the check statuses keep the deeper ink. */
  --lp-vivid:        var(--accent);
  --lp-check:        var(--accent-ink);
  --lp-check-soft:   var(--accent-soft);

  /* Placeholder identities are content-neutral, but still live in the token
     layer so JavaScript does not carry visual constants. */
  --avatar-1-soft: #e7eefe; --avatar-1-line: #c4d4fc; --avatar-1-ink: #2749a2;
  --avatar-2-soft: #e2f2f8; --avatar-2-line: #b7deed; --avatar-2-ink: #085472;
  --avatar-3-soft: #e2f3f2; --avatar-3-line: #b7e2e0; --avatar-3-ink: #085854;
  --avatar-4-soft: #eeebf9; --avatar-4-line: #d4ccf1; --avatar-4-ink: #514099;
  --avatar-5-soft: #f4e9f9; --avatar-5-line: #e3c8ef; --avatar-5-ink: #6f3089;
  --avatar-6-soft: #f9e8f3; --avatar-6-line: #f1c6e1; --avatar-6-ink: #852963;

  /* --- Type ---------------------------------------------------------------
     Geist, falling back to the platform sans. The fallback is a designed
     state, not an error case: the page paints immediately and upgrades when
     the webfont lands. Tabular figures wherever numbers align in a column. */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* DIRECT, typed beside the drawn logo (shell.js): Figtree (17 Oct), the
     open face closest to the supplied lettering. */
  --brand-font: "Figtree", "Plus Jakarta Sans", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Public pages use Manrope: clear geometric letterforms with enough width
     for comfortable reading, without returning to compressed display type. */
  --public-font: "Manrope", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --public-display: "Manrope", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Display face --------------------------------------------------------
     Headlines, and only headlines.

     A serif was tried here and pulled: it read as editorial rather than as a
     tool, which is the wrong note for something people open on site. This is
     a sans with more shape than the UI face: rounder bowls, a taller
     x-height, real weight at 700, so a headline has presence without
     changing register.

     It is one token. Set --display to var(--font) and the whole product is a
     single family again, with nothing else to touch. */
  --display: "Plus Jakarta Sans", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-tr: -.022em;

  --fs-11: .6875rem;  --fs-12: .75rem;   --fs-13: .8125rem;
  --fs-14: .875rem;   --fs-15: .9375rem; --fs-16: 1rem;
  --fs-18: 1.125rem;  --fs-20: 1.25rem;  --fs-22: 1.375rem; --fs-24: 1.5rem;
  --fs-30: 1.875rem;  --fs-38: 2.375rem; --fs-48: 3rem;
  --fs-60: 3.75rem;

  --lh-tight: 1.1;     --lh-snug: 1.35;   --lh-normal: 1.55;
  --tr-tight: -.025em; --tr-normal: 0;

  /* --- Space (4px base) -------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --s11: 80px; --s12: 104px;

  /* --- Radius -------------------------------------------------------------
     Pill-first. Anything you press is a capsule; anything that holds content
     is a generously rounded rectangle.

     Change these five and the whole product follows. Nothing else hardcodes
     a corner except three things that are not style choices: circles
     (avatars, dots, toggle knobs), the 3px chart swatches, and the 4px
     rounded data-end on chart bars.                                       */
  --r-btn:  999px;   /* buttons, chips, badges, tabs, segmented             */
  --r-sm:   10px;    /* small chrome: kbd, swatches, inline tags            */
  --r-md:   14px;    /* inputs, selects, menu items, small panels           */
  --r-lg:   20px;    /* cards, panels, tables                               */
  --r-xl:   26px;    /* dialogs, sheets                                     */
  --r-full: 999px;
  --r-pill: var(--r-btn);
  --r-mark: 11px;
  --r-mark-lg: 14px;
  --r-boot: 15px;
  --r-logo: 14px;
  --r-logo-sm: 11px;
  --r-logo-lg: 18px;
  --r-logo-profile: 20px;
  --r-icon-btn: 8px;
  --r-toggle: 6px;
  --r-sample: 12px;
  --r-data: 3px;
  --r-bar: 5px;
  --r-preview: 4px;

  /* --- Elevation ----------------------------------------------------------
     Three steps, and two of them are for things that genuinely float. A card
     is read by its border, never by a shadow, and a shadow is never tinted
     with the brand colour.                                                */
  --sh-1: 0 1px 2px rgba(16, 16, 18, .05);
  --sh-2: 0 4px 12px rgba(16, 16, 18, .07);
  --sh-3: 0 16px 36px rgba(16, 16, 18, .14);

  /* --- Motion (functional only; respects prefers-reduced-motion) --------- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 320ms;

  /* --- Layout ------------------------------------------------------------ */
  --rail-inset:        12px;   /* one gutter for every row in the rail */
  --rail-w:           260px;
  --topbar-h:          64px;
  --public-header-h:   76px;   /* sticky offsets derive from this, not 76 */
  --bottom-nav-h:      60px;
  --fab-size:          46px;   /* the assistant button; the panel clears it */
  --page-max:        1400px;
  --content-max:      760px;
  --aside-w:          320px;   /* the detail column, public and in-app alike */
  --tap-min:           44px;
}

/* The CSCS card colours, for the dot on the ID card: the scheme's own. */
:root { --cscs-green: #2f7d3a; --cscs-blue: #1f5fbf; --cscs-black: #16181b; --cscs-gold: #b38b2d; --cscs-red: #c0392b; }

/* The V1 palette, kept for client comparison. On 30 Sep the blue and purple
   presets were warmed a touch: every coloured value turned a few degrees
   toward red (blue 4, purple 6; was #2563e8 and #7b4ce0), lightness and
   saturation kept, so the shades still match their accent. */
:root[data-theme="blue"] {
  --surface-2: #f7f7f8;
  --surface-3: #ededee;
  --surface-brand: #f2f6ff;
  --sidebar-ink: #52525b;
  --sidebar-ink-hi: #101012;
  --sidebar-hover: rgba(16, 16, 18, .05);
  --sidebar-active: #f2f2f3;
  --text: #101012;
  --text-2: #52525b;
  --text-3: #71717a;
  --border: #e6e6e8;
  --border-strong: #c9c9cd;
  --ring: rgba(36, 81, 184, .28);
  --ring-soft: rgba(36, 81, 184, .16);
  --brand: #101012;
  --brand-hover: #26262a;
  --brand-active: #000000;
  --brand-soft: #f2f2f3;
  --brand-soft-2: #e2e2e4;
  --brand-ink: #101012;
  --accent: var(--palette-blue-accent);
  --accent-on: #ffffff;
  --accent-ink: #1d46a2;
  --accent-hover: #1d46a2;
  --accent-active: #173b89;
  --accent-soft: #eef1fa;
  --accent-soft-2: #d7def2;
  --accent-line: rgba(36, 81, 184, .24);
  --accent-halo: rgba(36, 81, 184, .07);
  --neutral-soft: #f2f2f3;
  --neutral-ink: #52525b;
  --ord-1: #cfddfc;
  --ord-2: #7d9bf2;
  --ord-track: #ededee;
  --grid: #efeff1;
  --axis: #c9c9cd;
  --viz-muted: #71717a;
  --lp-ink-2: #1d1d20;
  --lp-tint: #f5f5f6;
}

/* The colour presets change the accent and its own washes only. The light
   tint of the public pages (footer, feature panel) stays the neutral grey in
   every one, so no preset turns the page a pale lilac, peach or sage. */

:root[data-theme="purple"] {
  --surface-brand: #f8f2ff;
  --ring: rgba(109, 50, 182, .28);
  --ring-soft: rgba(109, 50, 182, .16);
  --accent: var(--palette-purple-accent);
  --accent-hover: #5f2aa1;
  --accent-active: #52238d;
  --accent-soft: #f4ebfe;
  --accent-soft-2: #e2d1fb;
  --accent-on: #ffffff;
  --accent-line: rgba(109, 50, 182, .24);
  --accent-halo: rgba(109, 50, 182, .07);
  --ord-1: #e2d1fb;
  --ord-2: #b38cf4;
}

:root[data-theme="copper"] {
  --surface-brand: #fff3ea;
  --ring: rgba(136, 66, 15, .28);
  --ring-soft: rgba(136, 66, 15, .16);
  --accent: var(--palette-copper-accent);
  --accent-hover: #75380b;
  --accent-active: #622f08;
  --accent-soft: #fff1e7;
  --accent-soft-2: #f6d5bf;
  --accent-on: #ffffff;
  --accent-line: rgba(136, 66, 15, .24);
  --accent-halo: rgba(136, 66, 15, .07);
  --ord-1: #f6d5bf;
  --ord-2: #df8d54;
}

:root[data-theme="green"] {
  --surface-brand: #e9f7f3;
  --ring: rgba(13, 95, 88, .3);
  --ring-soft: rgba(13, 95, 88, .17);
  --accent: var(--palette-green-accent);
  --accent-hover: #0a514b;
  --accent-active: #07443e;
  --accent-soft: #e2f5f1;
  --accent-soft-2: #b9e4dd;
  --accent-on: #ffffff;
  --accent-line: rgba(13, 95, 88, .24);
  --accent-halo: rgba(13, 95, 88, .07);
  --ord-1: #b9e4dd;
  --ord-2: #55b6ab;
}

/* Shape presets affect components, while true circles continue to use
   --r-full. Pill is the current design and therefore needs no override. */
:root[data-radius="rounded"] {
  --r-btn: 14px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-mark: 9px;
  --r-mark-lg: 12px;
  --r-boot: 12px;
  --r-logo: 11px;
  --r-logo-sm: 9px;
  --r-logo-lg: 15px;
  --r-logo-profile: 16px;
  --r-icon-btn: 7px;
  --r-toggle: 6px;
  --r-sample: 10px;
}

:root[data-radius="subtle"] {
  --r-btn: 8px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-mark: 7px;
  --r-mark-lg: 9px;
  --r-boot: 9px;
  --r-logo: 9px;
  --r-logo-sm: 7px;
  --r-logo-lg: 12px;
  --r-logo-profile: 12px;
  --r-icon-btn: 6px;
  --r-toggle: 4px;
  --r-sample: 8px;
}

/* -------------------------------------------------------------------------
   Reduced motion, honoured alongside the in-app setting.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}
:root[data-motion="reduced"] { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }