/* ==========================================================================
   Whitestone Platforms — design tokens v1
   Source of truth: Branding/brand-brief/Whitestone Brand Guide.dc.html (July 2026, v1)
   Rule: components read ONLY these variables. No raw hex in component code.
   ========================================================================== */

:root {
  /* --- Palette (guide section 3) --- */
  --ws-stone:       #D8D3C7; /* primary: surfaces, cards, feature tiles */
  --ws-olive:       #6B7A4E; /* secondary: actions, kickers, numbers, accents */
  --ws-olive-deep:  #55613B; /* dark feature backgrounds; hover for olive actions */
  --ws-sage:        #A9B494; /* soft accent, mark courses, decorative ONLY */
  --ws-pebble:      #B8B2A6; /* muted strokes, borders, dividers. NEVER text */
  --ws-ivory:       #FAF7F1; /* default background */
  --ws-ink:         #2E2D28; /* text, dark buttons */
  --ws-terracotta:  #C0764F; /* the pop. One moment per view, or none */

  /* --- Support tints (guide sections 3 and 5) --- */
  --ws-limestone:      #ECE8DF; /* light cards and panels */
  --ws-gray-warm:      #55524A; /* secondary text on light surfaces */
  --ws-sage-light:     #C9D1B4; /* STONE wordmark tone on dark bg */
  --ws-sage-lighter:   #DDE3CC; /* secondary text on olive fills only */
  --ws-terracotta-deep:#9A5B37; /* text tone for warm chips */

  /* --- Semantic aliases: light surfaces (default context) --- */
  --ws-bg:              var(--ws-ivory);
  --ws-surface:         var(--ws-stone);
  --ws-surface-light:   var(--ws-limestone);
  --ws-text:            var(--ws-ink);
  --ws-text-secondary:  var(--ws-gray-warm);
  --ws-accent:          var(--ws-olive);      /* accent text 18px+ only */
  --ws-stroke:          var(--ws-pebble);
  --ws-stroke-focus:    var(--ws-olive);
  --ws-pop:             var(--ws-terracotta);

  /* --- Actions (guide section 5) --- */
  --ws-btn-primary-bg:     var(--ws-olive);
  --ws-btn-primary-text:   var(--ws-ivory);
  --ws-btn-primary-hover:  var(--ws-olive-deep);
  --ws-btn-emphasis-bg:    var(--ws-ink);
  --ws-btn-emphasis-text:  var(--ws-ivory);
  --ws-btn-secondary-text: var(--ws-ink);
  --ws-btn-secondary-stroke: var(--ws-pebble); /* or olive */

  /* --- Status chips: tinted fill + dark text (guide section 5) --- */
  --ws-chip-positive-bg:   #E4E7D9;
  --ws-chip-positive-text: var(--ws-olive-deep);
  --ws-chip-neutral-bg:    var(--ws-limestone);
  --ws-chip-neutral-text:  var(--ws-gray-warm);
  --ws-chip-warm-bg:       #F0E3D8;
  --ws-chip-warm-text:     var(--ws-terracotta-deep);

  /* --- Typography (guide section 4) --- */
  /* Archivo Black: wordmark, titles, big numbers. ALWAYS uppercase,
     tracking +0.02 to +0.06em. Never sentences. (Akira stand-in.) */
  --ws-font-display: 'Archivo Black', sans-serif;
  /* Montserrat: everything else. Weights 300-600 in product;
     100/200 only at 34px+ display, never body. */
  --ws-font-body: 'Montserrat', sans-serif;
  --ws-tracking-display: 0.04em;
  --ws-tracking-kicker: 0.24em;

  /* --- Shape and space --- */
  --ws-radius-card: 12px;
  --ws-radius-pill: 999px;   /* primary buttons are pills */
  --ws-radius-swatch: 6px;
  --ws-stroke-width: 1.5px;  /* secondary button stroke */
  --ws-hit-target: 44px;     /* minimum */
}

/* --- Dark-fill context (olive, deep olive, ink, terracotta backgrounds).
       Apply .ws-on-dark to any dark-filled container. Inverts text and mark.
       Guide: ivory text; light-sage secondary allowed on olive only. --- */
.ws-on-dark {
  --ws-text:           var(--ws-ivory);
  --ws-text-secondary: var(--ws-sage-lighter); /* on olive fills only */
  --ws-accent:         var(--ws-sage-light);
  /* Strata courses invert to: ivory, light sage, sage (top to bottom) */
  --ws-course-1: var(--ws-ivory);
  --ws-course-2: var(--ws-sage-lighter);
  --ws-course-3: var(--ws-sage-light);
}

/* --- Strata mark courses, light context (top to bottom).
       Never recolored, never centered. Left-aligned always. --- */
:root {
  --ws-course-1: var(--ws-olive);
  --ws-course-2: #9A947F; /* pebble course tone from the guide's mark SVG */
  --ws-course-3: var(--ws-stone);
}

/* ==========================================================================
   CONTRAST RULES (guide section 3, non-negotiable)
   - Light surfaces (ivory, white, stone, sage, limestone) carry ONLY:
       ink text, warm-gray secondary text, olive/deep-olive accents at 18px+.
   - Dark fills (olive, deep olive, ink, terracotta) carry ONLY:
       ivory text; light sage secondary on olive only.
   - Pebble, stone, sage NEVER carry text and never appear AS text color.
   - Terracotta text: one emphasized word/figure, 18px+, on ivory, once per view.
   - Text never sits directly on imagery; use a solid ivory or ink panel.
   - Not in the table = not allowed. Default: ink on ivory.
   ========================================================================== */

/* --- Starter component layer (optional; delete if framework-managed) --- */
.ws-body {
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: var(--ws-font-body);
  font-weight: 400;
}
.ws-display {
  font-family: var(--ws-font-display);
  text-transform: uppercase;
  letter-spacing: var(--ws-tracking-display);
}
.ws-kicker {
  font-family: var(--ws-font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ws-tracking-kicker);
  color: var(--ws-accent);
  font-size: 13px;
}
.ws-btn-primary {
  background: var(--ws-btn-primary-bg);
  color: var(--ws-btn-primary-text);
  border: none;
  border-radius: var(--ws-radius-pill);
  min-height: var(--ws-hit-target);
  padding: 0 22px;
  font-family: var(--ws-font-body);
  font-weight: 600;
}
.ws-btn-primary:hover { background: var(--ws-btn-primary-hover); }
.ws-btn-secondary {
  background: transparent;
  color: var(--ws-btn-secondary-text);
  border: var(--ws-stroke-width) solid var(--ws-btn-secondary-stroke);
  border-radius: var(--ws-radius-pill);
  min-height: var(--ws-hit-target);
  padding: 0 22px;
  font-family: var(--ws-font-body);
  font-weight: 600;
}
.ws-card {
  background: var(--ws-surface-light);
  border-radius: var(--ws-radius-card);
}
.ws-input {
  border: 1px solid var(--ws-stroke);
  border-radius: 8px;
  min-height: var(--ws-hit-target);
  font-family: var(--ws-font-body);
  color: var(--ws-text);
  background: #FFFFFF;
}
.ws-input:focus {
  outline: none;
  border-color: var(--ws-stroke-focus);
}