/* ==========================================================================
   DMCG (D. Mack Consulting Group) — design tokens
   Consumed by the shared app chrome (@whitestone/core/styles/app.css), which
   reads ONLY these variables. Variable NAMES stay `--ws-*`; the VALUES are
   DMCG's. Same structure as whitestone-hub-tokens.css, which it was cloned
   from (Oct 14, 2026); every token name kept.

   Every value here is literal. No token aliases another token: an alias
   resolves where it is DECLARED, not where it is used, which has silently
   broken a themed surface before (see beyond-letters-tokens.css's own
   header). Repetition is the cheaper mistake.

   Palette (the DMCG brand): navy #01203C (brand, headings, the rail, the
   primary button), teal #339999 (accent fill), deep teal #1F6F6F (accent
   TEXT: 5.9:1 on white), ink #1C2733, slate #5D758A (secondary text: 4.8:1 on
   white, 4.4:1 on the #F3F5F7 band, so keep it off the band for small text),
   mist #C5CDD5, line #DCE1E6, band #F3F5F7, white, alert brick #B5533C.
   Teal #339999 is a FILL (3.4:1 on white); anywhere it would carry words on
   a light surface it drops to the deep teal. On the navy rail it is text
   (4.8:1). Corners are square (0 to 2px). Figtree throughout.
   Tints and hovers that are not in the brand list (the lighter teal wash, the
   navy hover, the warm chip's text) are derived from it and marked below.
   ========================================================================== */

:root {
  /* --- Palette --- */
  --ws-stone:       #F3F5F7; /* panels, table headers: the band */
  --ws-olive:       #1F6F6F; /* fills with a light label (avatar, active chip, done dot): deep teal, 5.9:1 with white */
  --ws-olive-deep:  #1F6F6F; /* small accent text: links, success, "current" meta. 5.9:1 on white */
  --ws-sage:        #339999; /* teal: decorative fills only, never small text on light */
  --ws-pebble:      #DCE1E6; /* strokes, dividers: line. NEVER text */
  --ws-ivory:       #FFFFFF; /* default background: white */
  --ws-ink:         #1C2733; /* text: ink */
  --ws-terracotta:  #B5533C; /* the pop: alert brick. Errors, "needs a look" */

  /* --- Support tints --- */
  --ws-limestone:      #F3F5F7; /* cards, hover, light panels: the band */
  --ws-gray-warm:      #5D758A; /* secondary text: slate. 4.8:1 on white */
  --ws-sage-light:     #66B2B2; /* derived: teal, one step lighter */
  --ws-sage-lighter:   #E3F1F1; /* derived: teal wash (chips, selected rows) */
  --ws-terracotta-deep:#B5533C; /* the text-safe alert: 4.9:1 on white */

  --ws-cream:  #FFFFFF; /* same white as --ws-ivory: one ground colour, two names */
  --ws-paper:  #FFFFFF;

  /* --- Semantic aliases (literal values, deliberately not var()) --- */
  --ws-bg:              #FFFFFF;
  --ws-surface:         #F3F5F7;
  --ws-surface-light:   #F3F5F7;
  --ws-text:            #1C2733;
  --ws-text-secondary:  #5D758A;
  --ws-accent:          #1F6F6F;
  --ws-accent-bright:   #339999;
  --ws-stroke:          #DCE1E6;
  --ws-stroke-focus:    #1F6F6F;
  --ws-pop:             #B5533C;

  /* --- Actions --- */
  --ws-btn-primary-bg:     #01203C; /* navy fill... */
  --ws-btn-primary-text:   #FFFFFF; /* ...white label (16.5:1) */
  --ws-btn-primary-hover:  #0B3357; /* derived: navy, one step lighter */
  /* The emphasis button is the teal fill with the navy ink label (4.8:1). */
  --ws-btn-emphasis-bg:    #339999;
  --ws-btn-emphasis-text:  #01203C;
  --ws-btn-secondary-text: #01203C;
  --ws-btn-secondary-stroke: #C5CDD5;

  /* --- Status chips: tinted fill + dark text --- */
  --ws-chip-positive-bg:   #E3F1F1;
  --ws-chip-positive-text: #1F6F6F;
  --ws-chip-neutral-bg:    #F3F5F7;
  --ws-chip-neutral-text:  #4F6579; /* derived: slate, darkened to clear AA on the band (5.5:1) */
  --ws-chip-stroke:        #DCE1E6;
  --ws-chip-warm-bg:       #F7E6E1;
  --ws-chip-warm-text:     #8E3D29; /* derived: brick, darkened for text on its tint */

  /* Not part of core's --ws-chip-* vocabulary today (app.css only styles
     .chip / .chip.positive / .chip.warm), kept as literal reference values
     so whoever adds those chip variants to core does not have to re-derive
     them. Not wired into any component class by this file. */
  --ws-chip-urgent-bg:     #F7E6E1;
  --ws-chip-urgent-text:   #8E3D29;
  --ws-chip-info-bg:       #E3EAF1;
  --ws-chip-info-text:     #01203C;

  /* Navy: the secondary accent, for rules and underlines. */
  --ws-navy:       #01203C;
  --ws-navy-2:     #0B3357;
  --ws-navy-soft:  #F3F5F7;

  /* --- Typography ---
     Figtree for display and text (linked in app/layout.tsx), set in sentence
     case rather than the platform's default uppercase drafting-office
     headings (see app/globals.css's typography override). */
  --ws-font-display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-tracking-display: 0em;
  --ws-tracking-kicker: 0.14em;

  /* --- Shape and space: square corners --- */
  --ws-radius-card: 2px;
  --ws-radius-pill: 2px;
  --ws-radius-swatch: 0;
  --ws-stroke-width: 1px;
  --ws-hit-target: 44px;

  /* --- Elevation. Navy-based, never neutral gray. --- */
  --ws-shadow-sm: 0 1px 2px rgba(1, 32, 60, 0.06);
  --ws-shadow-md: 0 2px 4px rgba(1, 32, 60, 0.05), 0 12px 28px -10px rgba(1, 32, 60, 0.14);
  --ws-shadow-lg: 0 4px 10px rgba(1, 32, 60, 0.06), 0 28px 56px -16px rgba(1, 32, 60, 0.2);

  /* --- Motion. Platform defaults, restated literally rather than left to
     inherit. Same numbers as packages/core/styles/app.css's own :root
     scale, so this is value-neutral. --- */
  --ws-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ws-ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --ws-dur-fast: 130ms;
  --ws-dur: 200ms;
  --ws-dur-slow: 320ms;

  /* --- Strata mark courses, light context --- */
  --ws-course-1: #1F6F6F;
  --ws-course-2: #339999;
  --ws-course-3: #F3F5F7;
  /* "Powered by Whitestone" cairn (teal, mist wash, mist); see core powered-by.tsx.
     The two mist stones are light by design: on a white page they read at
     about 1.6:1, so the cairn stays quiet there and is clearest on the navy rail. */
  --ws-pwd-1: #339999;
  --ws-pwd-2: rgba(197, 205, 211, .55);
  --ws-pwd-3: #C5CDD5;

  /* -------------------------------------------------------------------
     THEME STRUCTURE TOKENS (packages/core/styles/app.css)
     Every token in core's WS-THEME-STRUCTURE-TOKENS block, restated here
     (tools/fixtures/theme-tokens-fixture.mjs's rule: "a client file
     overrides every token core declares, not just colour"). Square corners.
     ------------------------------------------------------------------- */
  --ws-radius: 2px;
  --ws-radius-sm: 2px;
  --ws-radius-avatar: 2px;

  --ws-btn-transform: none;
  --ws-btn-tracking: normal;
  --ws-btn-weight: 700;

  --ws-input-border-sides: 1px;
  --ws-input-border-bottom: 1px;
  --ws-input-bg: #FFFFFF;
  --ws-input-radius: 2px;
  --ws-input-padding-x: 14px;

  --ws-font-label: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-label-tracking: 0.04em;
  --ws-body-weight: 400;

  --ws-hairline: 1px solid #DCE1E6;
  --ws-elevation: 0 8px 24px rgba(1, 32, 60, 0.12);
}

/* Dark-fill context: the hub's navy rail (the sidenav; see app/globals.css).
   Literal values, restated for the same reason as above: on navy the accent
   is the teal fill colour (4.8:1) rather than the deep teal, which would
   disappear into its own background. */
.ws-on-dark {
  --ws-text:           #F3F5F7;
  --ws-text-secondary: #C5CDD5;
  --ws-accent:         #339999;
  --ws-accent-bright:  #339999;
  --ws-stroke:         rgba(197, 205, 211, 0.22);
  --ws-course-1: #339999;
  --ws-course-2: #C5CDD5;
  --ws-course-3: #5D758A;
  --ws-pwd-1: #339999;
  --ws-pwd-2: rgba(197, 205, 211, .55);
  --ws-pwd-3: #C5CDD5;
  color: #F3F5F7;
}