/*
 * Spruce design tokens
 *
 * SURFACE HIERARCHY (light mode)
 * ─────────────────────────────
 * Pebble  → page background, sidebars, browse menu, module panels
 * Paper   → cards, list panels, tables, chart areas, entity rows, modals
 * Stone   → sidebar/menu active highlight (--surface-nav-highlight)
 * Stone-light → empty required fields, settings field fills, chip/filter hover
 *
 * SEMANTIC SURFACES
 * ─────────────────
 * context   → informational KPIs, “next appointment” badges
 * positive  → success states, attended badges
 * context   → filled required fields (light teal tint)
 * attention → outstanding items, unpaid purchase blocks, warnings that need action
 * warning   → overdue, errors, destructive emphasis
 *
 * FIELD STATES (everyday modals: .modal-form-required)
 * ─────────────────────────────────────────────────────
 * Empty required     → stone-light  (.is-field-empty, --surface-field-needed)
 * Filled required    → context      (.is-field-filled, --surface-field-complete)
 * Optional/calculated→ field-optional mix (due date, notes, disabled, readonly)
 *
 * Change hex values in “Base” and “Semantic” only; derived tokens below follow automatically.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     BASE SURFACES — edit hex values here
     ══════════════════════════════════════════════════════════════════════════ */

  --surface-paper:  #FAF3EE;  /* Cards, lists, tables, modals, entity rows */
  --surface-pebble: #EFE7E0;  /* Page bg, sidebars, browse menu, fin panels */
  --surface-stone:  #E0D1C2;  /* Full stone; menu/sidebar active highlight */

  /* Derived from base — do not edit unless changing the mix ratio */
  --surface-nav-highlight: var(--surface-stone);
  /* Menu hover & empty required fields: stone at ~42% on pebble */
  --surface-stone-light: color-mix(in srgb, var(--surface-nav-highlight) 42%, var(--surface-pebble));

  /* ══════════════════════════════════════════════════════════════════════════
     SEMANTIC SURFACES — meaning-coded tints (KPIs, badges, field fills)
     ══════════════════════════════════════════════════════════════════════════ */

  --surface-context:   #BFCFC7;  /* Info KPIs, context badges */
  --surface-positive:  #CED4BF;  /* Filled required fields, success, attended */
  --surface-attention: #EBCEAD;  /* Outstanding, unpaid blocks, needs attention */
  --surface-warning:   #E09E85;  /* Overdue, errors, GDPR due */
  --surface-context-soft: color-mix(in srgb, var(--surface-context) 50%, transparent);

  /* ══════════════════════════════════════════════════════════════════════════
     TEXT & ACCENTS
     ══════════════════════════════════════════════════════════════════════════ */

  --text-primary:   #1A3323;
  --text-secondary: #405945;
  --text-muted:     #72806B;
  --text-disabled:  #A8B5AE;

  --accent-attention: #C98B43;
  --accent-warning:   #D16E49;
  --accent-focus:     #488574;
  --accent-positive:       #405945;
  --accent-context:        #405945;
  --accent-attention-text: #7A4E1A;
  --accent-warning-text:   #5A2410;

  --border-subtle: #E0D6CC;
  --border-strong: #CDC1B2;

  /* ══════════════════════════════════════════════════════════════════════════
     FIELD SURFACES — map to classes in components.css
     ══════════════════════════════════════════════════════════════════════════ */

  --surface-field-needed:    var(--surface-stone-light);   /* Empty required */
  --surface-field-complete:  var(--surface-context);       /* Filled required */
  --surface-field-optional:  color-mix(in srgb, var(--surface-nav-highlight) 28%, var(--surface-paper)); /* Due date, notes, readonly */
  --surface-field-fill:      var(--surface-stone-light);   /* Settings/forms on paper cards */
  --surface-field-list:      var(--surface-pebble);        /* Legacy list panel tint */

  /* List layout — pebble page, paper rows (no nested pebble panel) */
  --surface-list-panel: transparent;
  --surface-list-card:  var(--surface-paper);

  /* ══════════════════════════════════════════════════════════════════════════
     APP LAYOUT SURFACES
     ══════════════════════════════════════════════════════════════════════════ */

  --background:         var(--surface-pebble);
  --light-card:         var(--surface-paper);
  --surface-card-light: var(--surface-paper);
  --overlay:            color-mix(in srgb, var(--surface-pebble) 78%, rgba(26, 24, 22, 0.22));

  --border:       var(--border-strong);
  --border-light: var(--border-subtle);

  /* KPI / metric card roles */
  --surface-metric:        var(--surface-paper);
  --surface-metric-active: var(--surface-context);
  --surface-metric-accent: var(--surface-attention);
  --surface-chip-active:   var(--surface-stone-light);

  /* Text on tinted surfaces */
  --text-on-field-needed:    var(--text-primary);
  --text-on-field-complete:  var(--text-primary);
  --text-on-field-optional:  var(--text-primary);
  --text-on-field-list:      var(--text-primary);
  --text-on-metric:          var(--text-primary);
  --text-kpi-positive:       var(--text-primary);
  --text-kpi-negative:       var(--accent-warning);

  /* ══════════════════════════════════════════════════════════════════════════
     FORM CONTROL ALIASES — consumed by .form-control, pickers, selects
     ══════════════════════════════════════════════════════════════════════════ */

  --field-bg:            var(--surface-field-needed);
  --field-bg-filled:     var(--surface-field-complete);
  --field-bg-optional:   var(--surface-field-optional);
  --field-bg-list:       var(--surface-field-list);
  --field-bg-focus:      var(--surface-field-needed);
  --field-border:        color-mix(in srgb, var(--text-primary) 10%, transparent);
  --field-border-focus:  var(--accent-focus);
  --field-border-filled: color-mix(in srgb, var(--accent-focus) 40%, transparent);
  --field-border-error:  var(--accent-warning);
  --field-text:          var(--text-primary);
  --field-text-optional: var(--text-on-field-optional);
  --field-placeholder:   var(--text-secondary);

  /* ══════════════════════════════════════════════════════════════════════════
     BUTTONS
     ══════════════════════════════════════════════════════════════════════════ */

  --button-primary-bg:         #1A3323;
  --button-primary-text:       #F6F0EC;
  --button-primary-bg-hover:   #244532;
  --button-primary-bg-active:  #0C1811;
  --button-secondary-bg:       #F6F0EC;
  --button-secondary-text:     #1A3323;
  --button-secondary-border:   #CDC1B2;
  --button-secondary-bg-hover: #EFE7E0;
  --button-secondary-border-hover: #BFAF9E;
  --button-ghost-bg:           transparent;
  --button-ghost-text:         #1A3323;
  --button-ghost-bg-hover:     var(--surface-stone);
  --button-attention-bg:       var(--surface-attention);
  --button-attention-text:     #1A3323;
  --button-attention-border:   var(--accent-attention);
  --button-attention-bg-hover: #E2C195;
  --button-warning-bg:         var(--surface-warning);
  --button-warning-text:       #1A3323;
  --button-warning-border:     var(--accent-warning);
  --button-warning-bg-hover:   #D98E72;
  --button-transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;

  /* ══════════════════════════════════════════════════════════════════════════
     FEEDBACK & CHROME
     ══════════════════════════════════════════════════════════════════════════ */

  --danger:         var(--accent-warning);
  --danger-bg:      color-mix(in srgb, var(--surface-warning) 35%, transparent);
  --danger-border:  color-mix(in srgb, var(--accent-warning) 32%, transparent);
  --error:          var(--accent-warning);
  --error-surface:  var(--surface-warning);
  --error-text:     var(--text-primary);
  --focus-ring:     0 0 0 3px color-mix(in srgb, var(--accent-focus) 18%, transparent);

  --chrome-bg:      var(--background);
  --chrome-border:  var(--border);
  --chrome-text:    var(--text-primary);
  --chrome-mid:     color-mix(in srgb, var(--text-primary) 52%, transparent);
  --chrome-surface: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --chrome-hover:   color-mix(in srgb, var(--text-primary) 10%, transparent);
  --chrome-h:       56px;
  --sb-w:           232px;
  --sb-w-mob:       62px;
  --btm-bar-h:      56px;

  /* ══════════════════════════════════════════════════════════════════════════
     COMPONENT ROLE ALIASES
     ══════════════════════════════════════════════════════════════════════════ */

  --card-bg:     var(--surface-paper);
  --card-text:   var(--text-primary);
  --card-border: var(--border-subtle);
  --badge-bg:    var(--surface-stone);
  --badge-text:  var(--text-primary);

  /* Accent shortcuts still referenced across modules */
  --primary:        var(--accent-focus);
  --primary-light:  #5A9A88;
  --primary-pale:   var(--surface-context);
  --primary-mid:    #C5DBD1;
  --accent:         var(--accent-warning);
  --accent-light:   #EE7A4F;
  --accent-pale:    var(--surface-warning);
  --gold:           var(--accent-attention);
  --gold-pale:      var(--surface-attention);
  --text:           var(--text-primary);
  --text-mid:       var(--text-secondary);
  --text-light:     var(--text-muted);
  --text-on-accent: var(--button-warning-text);

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════════════════════════ */

  --font-primary:   'Manrope', sans-serif;
  --font-secondary: 'Manrope', sans-serif;
  --font-sans:      var(--font-primary);
  --font-label:     var(--font-secondary);

  --type-h1-size:       22px;
  --type-h1-weight:     700;
  --type-h2-size:       19px;
  --type-h2-weight:     700;
  --type-h3-size:       15px;
  --type-h3-weight:     700;
  --type-body-size:     14px;
  --type-body-weight:   500;
  --type-ui-size:       13px;
  --type-ui-weight:     700;
  --type-eyebrow-size:  9px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 0.16em;
  --type-label-size:    9.5px;
  --type-label-weight:  700;
  --type-label-tracking: 0.12em;
  --type-label-metric-size:   13px;
  --type-label-metric-weight: 600;
  --type-field-size:    14px;
  --type-field-weight:  500;
  --type-caption-size:  11px;
  --type-caption-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-paper:  #141E17;
    --surface-pebble: #0A120E;
    --surface-stone:  #222219;
    --surface-nav-highlight: #222219;
    --surface-stone-light: color-mix(in srgb, var(--surface-nav-highlight) 42%, var(--surface-pebble));

    --surface-context:   #0F2E30;
    --surface-positive:  #0E3020;
    --surface-attention: #3A2C0E;
    --surface-warning:   #301610;

    --text-primary:   #EEE8E2;
    --text-secondary: #9AB8A8;
    --text-muted:     #7A9E8A;
    --text-disabled:  #2E3E36;

    --accent-attention: #D4A054;
    --accent-warning:   #D4705A;
    --accent-focus:     #5AA68A;
    --accent-positive:       #6AAE88;
    --accent-context:        #5AA8B0;
    --accent-attention-text: #D4A054;
    --accent-warning-text:   #D4705A;

    --border-subtle: #1E2E26;
    --border-strong: #2A3E32;

    --surface-field-needed:    var(--surface-stone-light);
    --surface-field-complete:  var(--surface-context);
    --surface-field-optional:  color-mix(in srgb, var(--surface-nav-highlight) 28%, var(--surface-paper));
    --surface-field-fill:      var(--surface-stone-light);
    --surface-list-card:       var(--surface-paper);
    --surface-chip-active:     var(--surface-stone-light);

    --light-card:     #152018;
    --surface-card-light: #152018;
    --overlay:        rgba(0, 0, 0, 0.65);

    --primary-pale:   color-mix(in srgb, var(--surface-context) 60%, #0C1811);
    --primary-mid:    color-mix(in srgb, var(--accent-focus) 35%, #28342D);
    --accent-pale:    var(--surface-warning);
    --gold-pale:      var(--surface-attention);

    --button-primary-bg:         #EEE8E2;
    --button-primary-text:       #0A120E;
    --button-primary-bg-hover:   #E4DDD6;
    --button-primary-bg-active:  #D4CCC4;
    --button-secondary-bg:       #111C16;
    --button-secondary-text:     #EEE8E2;
    --button-secondary-border:   #2A3E32;
    --button-secondary-bg-hover: #1C2D24;
    --button-secondary-border-hover: #3A5044;
    --button-ghost-text:         #EEE8E2;
    --button-ghost-bg-hover:     #1C2D24;
    --button-attention-bg:       #2E2412;
    --button-attention-text:     #D4A054;
    --button-attention-border:   #D4A054;
    --button-attention-bg-hover: #3A2E18;
    --button-warning-bg:         #301610;
    --button-warning-text:       #D4705A;
    --button-warning-border:     #D4705A;
    --button-warning-bg-hover:   #3C1E14;

    --field-bg:            var(--surface-field-needed);
    --field-bg-filled:     var(--surface-field-complete);
    --field-bg-optional:   var(--surface-field-optional);
    --field-bg-focus:      var(--surface-field-needed);
    --field-border:        #1E2E26;
    --field-placeholder:   #8FA899;

    --danger-bg:      color-mix(in srgb, var(--surface-warning) 40%, transparent);
    --danger-border:  color-mix(in srgb, var(--accent-warning) 42%, transparent);

    --chrome-mid:     color-mix(in srgb, var(--text-primary) 62%, transparent);
    --chrome-surface: color-mix(in srgb, var(--text-primary) 9%, transparent);
    --chrome-hover:   color-mix(in srgb, var(--text-primary) 15%, transparent);
  }
}

[data-theme="dark"] {
  --surface-paper:  #141E17;
  --surface-pebble: #0A120E;
  --surface-stone:  #222219;
  --surface-nav-highlight: #222219;
  --surface-stone-light: color-mix(in srgb, var(--surface-nav-highlight) 42%, var(--surface-pebble));

  --surface-context:   #0F2E30;
  --surface-positive:  #0E3020;
  --surface-attention: #3A2C0E;
  --surface-warning:   #301610;

  --text-primary:   #EEE8E2;
  --text-secondary: #9AB8A8;
  --text-muted:     #7A9E8A;
  --text-disabled:  #2E3E36;

  --accent-attention: #D4A054;
  --accent-warning:   #D4705A;
  --accent-focus:     #5AA68A;
  --accent-positive:       #6AAE88;
  --accent-context:        #5AA8B0;
  --accent-attention-text: #D4A054;
  --accent-warning-text:   #D4705A;

  --border-subtle: #1E2E26;
  --border-strong: #2A3E32;

  --surface-field-needed:    var(--surface-stone-light);
  --surface-field-complete:  var(--surface-context);
  --surface-field-optional:  color-mix(in srgb, var(--surface-nav-highlight) 28%, var(--surface-paper));
  --surface-field-fill:      var(--surface-stone-light);
  --surface-list-card:       var(--surface-paper);
  --surface-chip-active:     var(--surface-stone-light);

  --light-card:     #152018;
  --surface-card-light: #152018;
  --overlay:        rgba(0, 0, 0, 0.65);

  --primary-pale:   color-mix(in srgb, var(--surface-context) 60%, #0C1811);
  --primary-mid:    color-mix(in srgb, var(--accent-focus) 35%, #28342D);
  --accent-pale:    var(--surface-warning);
  --gold-pale:      var(--surface-attention);

  --button-primary-bg:         #EEE8E2;
  --button-primary-text:       #0A120E;
  --button-primary-bg-hover:   #E4DDD6;
  --button-primary-bg-active:  #D4CCC4;
  --button-secondary-bg:       #111C16;
  --button-secondary-text:     #EEE8E2;
  --button-secondary-border:   #2A3E32;
  --button-secondary-bg-hover: #1C2D24;
  --button-secondary-border-hover: #3A5044;
  --button-ghost-text:         #EEE8E2;
  --button-ghost-bg-hover:     #1C2D24;
  --button-attention-bg:       #2E2412;
  --button-attention-text:     #D4A054;
  --button-attention-border:   #D4A054;
  --button-attention-bg-hover: #3A2E18;
  --button-warning-bg:         #301610;
  --button-warning-text:       #D4705A;
  --button-warning-border:     #D4705A;
  --button-warning-bg-hover:   #3C1E14;

  --field-bg:            var(--surface-field-needed);
  --field-bg-filled:     var(--surface-field-complete);
  --field-bg-optional:   var(--surface-field-optional);
  --field-bg-focus:      var(--surface-field-needed);
  --field-border:        #1E2E26;
  --field-placeholder:   #8FA899;

  --danger-bg:      color-mix(in srgb, var(--surface-warning) 40%, transparent);
  --danger-border:  color-mix(in srgb, var(--accent-warning) 42%, transparent);

  --chrome-mid:     color-mix(in srgb, var(--text-primary) 62%, transparent);
  --chrome-surface: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --chrome-hover:   color-mix(in srgb, var(--text-primary) 15%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content-card,
  :root:not([data-theme="light"]) .stat-card,
  :root:not([data-theme="light"]) .kpi-card,
  :root:not([data-theme="light"]) .report-card,
  :root:not([data-theme="light"]) .account-card { box-shadow: none; }
}
[data-theme="dark"] .content-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .report-card,
[data-theme="dark"] .account-card { box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* iOS Safari zooms when font-size < 16px on inputs */
input, textarea, select { font-size: 16px !important; }
.form-control, .bdt-input, .precise-time-input { font-size: var(--type-field-size); }

html, body {
  font-family: var(--font-primary);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  background: var(--background);
  color: var(--text);
}

/* ── Typography roles ── */
.text-h1,
.content-title,
.modal-title,
.auth-gate-title {
  font-family: var(--font-primary);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  color: var(--text);
  line-height: 1.15;
}

.text-h2,
.hdr-title,
.staff-modal-title {
  font-family: var(--font-primary);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  color: var(--text);
  line-height: 1.2;
}

.text-h3 {
  font-family: var(--font-primary);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  color: var(--text);
  line-height: 1.25;
}

.text-eyebrow,
.modal-eyebrow,
.staff-modal-eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-light);
}

.text-label,
.form-label,
.settings-section-title,
.fp-group-label,
.uc-period-preview-label {
  font-family: var(--font-secondary);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-label-metric,
.kpi-label,
.stat-label {
  font-family: var(--font-primary);
  font-size: var(--type-label-metric-size);
  font-weight: var(--type-label-metric-weight);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
  line-height: 1.3;
}

.text-field,
.form-control,
.filter-select,
.search-input {
  font-family: var(--font-primary);
  font-size: var(--type-field-size);
  font-weight: var(--type-field-weight);
  color: var(--field-text);
}

.text-ui,
.btn {
  font-family: var(--font-primary);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
}

.text-body { font-family: var(--font-primary); font-size: var(--type-body-size); font-weight: var(--type-body-weight); color: var(--text); }
.text-muted { color: var(--text-mid); }
.text-subtle { color: var(--text-light); }
.text-caption { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); color: var(--text-light); }

.text-accent-attention { color: var(--accent-attention); }
.text-accent-warning { color: var(--accent-warning); }