/*
 * 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;

  --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:  #0C1811;
    --surface-pebble: #0C1811;
    --surface-stone:  #28342D;
    --surface-nav-highlight: #28342D;
    --surface-stone-light: color-mix(in srgb, var(--surface-nav-highlight) 42%, var(--surface-pebble));

    --surface-context:   #28413B;
    --surface-positive:  #334436;
    --surface-attention: #4A3A1E;
    --surface-warning:   #5A2F23;

    --text-primary:   #F6F0EC;
    --text-secondary: #A8B5AE;
    --text-muted:     #7D8A82;
    --text-disabled:  #455047;

    --accent-attention: #E1B26A;
    --accent-warning:   #E07A5F;
    --accent-focus:     #488574;

    --border-subtle: #2F3D35;
    --border-strong: #3E4C44;

    --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:     #1A2620;
    --surface-card-light: #1A2620;
    --overlay:        rgba(0, 0, 0, 0.55);

    --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:         #F6F0EC;
    --button-primary-text:       #0C1811;
    --button-primary-bg-hover:   #EFE7E0;
    --button-primary-bg-active:  #E0D1C2;
    --button-secondary-bg:       #1A2620;
    --button-secondary-text:     #F6F0EC;
    --button-secondary-border:   #3E4C44;
    --button-secondary-bg-hover: #28342D;
    --button-secondary-border-hover: #4A5A50;
    --button-ghost-text:         #F6F0EC;
    --button-ghost-bg-hover:     #28342D;
    --button-attention-bg:       #4A3A1E;
    --button-attention-text:     #F6F0EC;
    --button-attention-border:   #E1B26A;
    --button-attention-bg-hover: #5A4A28;
    --button-warning-bg:         #5A2F23;
    --button-warning-text:       #F6F0EC;
    --button-warning-border:     #E07A5F;
    --button-warning-bg-hover:   #6A3A2C;

    --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:        var(--border-subtle);
    --field-placeholder:   var(--text-secondary);

    --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:  #0C1811;
  --surface-pebble: #0C1811;
  --surface-stone:  #28342D;
  --surface-nav-highlight: #28342D;
  --surface-stone-light: color-mix(in srgb, var(--surface-nav-highlight) 42%, var(--surface-pebble));

  --surface-context:   #28413B;
  --surface-positive:  #334436;
  --surface-attention: #4A3A1E;
  --surface-warning:   #5A2F23;

  --text-primary:   #F6F0EC;
  --text-secondary: #A8B5AE;
  --text-muted:     #7D8A82;
  --text-disabled:  #455047;

  --accent-attention: #E1B26A;
  --accent-warning:   #E07A5F;
  --accent-focus:     #488574;

  --border-subtle: #2F3D35;
  --border-strong: #3E4C44;

  --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:     #1A2620;
  --surface-card-light: #1A2620;
  --overlay:        rgba(0, 0, 0, 0.55);

  --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:         #F6F0EC;
  --button-primary-text:       #0C1811;
  --button-primary-bg-hover:   #EFE7E0;
  --button-primary-bg-active:  #E0D1C2;
  --button-secondary-bg:       #1A2620;
  --button-secondary-text:     #F6F0EC;
  --button-secondary-border:   #3E4C44;
  --button-secondary-bg-hover: #28342D;
  --button-secondary-border-hover: #4A5A50;
  --button-ghost-text:         #F6F0EC;
  --button-ghost-bg-hover:     #28342D;
  --button-attention-bg:       #4A3A1E;
  --button-attention-text:     #F6F0EC;
  --button-attention-border:   #E1B26A;
  --button-attention-bg-hover: #5A4A28;
  --button-warning-bg:         #5A2F23;
  --button-warning-text:       #F6F0EC;
  --button-warning-border:     #E07A5F;
  --button-warning-bg-hover:   #6A3A2C;

  --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:        var(--border-subtle);
  --field-placeholder:   var(--text-secondary);

  --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); }