/* ============================================================================
   GlamIQ Admin Design System — tokens.css   (Stage 1 foundation, v2)
   ----------------------------------------------------------------------------
   ADMIN APP ONLY. Linked by my/app.html + admin/app.html.
   ⚠ TENANT BOUNDARY (brief 5.2): never link this from a customer-facing surface
   (booking page, widget, PWA) — those are tenant-branded. Verified: the portals
   are the only files that carry this <link>.

   ACCENT: one family built on Owen's chosen brand swatches (#957576 / #AFA3A4,
   25-Jul) — a muted rose-taupe. The ramp keeps his two values verbatim and
   derives tints + a deeper same-hue step so buttons/links pass AA. The old
   #D48CB7 pink + ad-hoc mauves are retired into this one ramp.
   Neutrals keep the previous contrast (a wholesale-lighten washed the app out);
   they only gain a faint warm-purple tint to sit with the rose. Shadows keep
   card definition.
   ============================================================================ */

/* Self-hosted Inter — matches the site's sans; no third-party font request. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/glamiq/fonts/inter-400.woff2?v=10') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/glamiq/fonts/inter-500.woff2?v=10') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/glamiq/fonts/inter-600.woff2?v=10') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/glamiq/fonts/inter-700.woff2?v=10') format('woff2'); }

:root {
  /* ---- Accent ramp (Owen's chosen brand swatches 25-Jul: #957576 + #AFA3A4;
          tints + a deeper same-hue step derived for AA text/buttons) ---- */
  --accent-50:  #F7F4F4;   /* tint backgrounds, tag fills */
  --accent-100: #EAE3E4;   /* hover tints, selected/active pills */
  --accent-300: #AFA3A4;   /* Owen's light swatch — decorative, chart fills */
  --accent-500: #957576;   /* Owen's mid swatch — dots, strips, icons */
  --accent-600: #7D6263;   /* deeper mid */
  --accent-700: #6B5455;   /* buttons, links, accent text (AA 6.94 on white) */
  --accent-800: #574445;   /* pressed / hover-darken */
  --accent-tint: #FBF9FA;  /* barely-there wash (today column etc.) */

  /* ---- Neutrals (original contrast preserved; faint warm-purple tint) ---- */
  --ink-900: #1E1B24;   /* headings, primary + body text */
  --ink-800: #2E2A36;   /* strong text */
  --ink-700: #3A3643;   /* secondary-strong */
  --ink-600: #514D5A;   /* secondary text */
  --ink-500: #6C6875;   /* labels, muted text */
  --ink-400: #9A96A3;   /* tertiary, placeholders, disabled */
  --line-300: #D4D0DA;  /* input borders */
  --line-200: #E5E2EA;  /* borders, dividers */
  --line-100: #F2F0F5;  /* subtle fills, hover, faint dividers */
  --surface-0:  #FFFFFF; /* cards */
  --surface-50: #FAF7F6; /* page background — warmed toward the accent hue */
  --wash:       #F4ECEB; /* soft blush wash for the top-of-page gradient */

  /* ---- Semantic (muted to sit in the calm palette) ---- */
  --success: #2E7D4F;  --success-bg: #E9F4EE;
  --danger:  #B54545;  --danger-bg:  #FAEBEB;
  --warning: #A87A25;  --warning-bg: #FAF3E3;

  /* ---- Typography ---- */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-display: 700 26px/32px var(--font);
  --text-h1:      700 20px/26px var(--font);
  --text-h2:      600 17px/24px var(--font);
  --text-body:    400 14px/21px var(--font);
  --text-body-md: 500 14px/21px var(--font);
  --text-sm:      400 13px/18px var(--font);

  /* ---- Spacing (4px scale) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ---- Radius ---- */
  --radius-sm: 10px; --radius-lg: 20px; --radius-full: 999px;   /* rounded like the reference apps */

  /* ---- Elevation (defined enough to keep card separation) ---- */
  --shadow-rest:   0 1px 3px rgb(30 27 36 / 9%);
  --shadow-raised: 0 8px 28px rgb(30 27 36 / 13%);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: 150ms; --dur-modal: 200ms;

  /* ---- Legacy-alias remap (aliases only, no hex → single-sourced) ---- */
  --brand:       var(--accent-700);
  --brand-dark:  var(--accent-800);
  --brand-light: var(--accent-50);
  --brand-50:    var(--accent-50);
  --accent:      var(--accent-700);

  --green:  var(--success);
  --red:    var(--danger);
  --orange: var(--warning);

  --grey-50:  var(--surface-50);
  --grey-100: var(--line-100);
  --grey-200: var(--line-200);
  --grey-300: var(--line-300);
  --grey-400: var(--ink-400);
  --grey-500: var(--ink-500);
  --grey-600: var(--ink-600);
  --grey-700: var(--ink-700);
  --grey-800: var(--ink-900);
  --grey-900: var(--ink-900);

  --radius:    var(--radius-sm);
  /* NB: --radius-lg needs no alias — same name as the token itself; a
     self-reference (var(--radius-lg)) is a cycle and voids the property,
     which silently squared every card. */
  --shadow:    var(--shadow-rest);
  --shadow-lg: var(--shadow-raised);
}

/* Tabular figures so times, prices, counts and stat columns align. */
.u-tnum, time, .stat-value, .kpi-value, .kpi-cmp, .sched-hour, .cal-hlabel,
.bk-c-date, .bk-c-time, .act-time, .next-time { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.u-caption { font: 600 11px/16px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============================================================================
   Component + motion layer (Stage 2). `html`-prefixed so these outrank the
   portals' inline <style> (which loads after this sheet).
   ============================================================================ */

/* One accent for every native control — kills the default blue checkbox/radio. */
html input[type="checkbox"], html input[type="radio"], html progress { accent-color: var(--accent-700); }
::selection { background: var(--accent-100); }

/* Focus ring (keyboard) */
html .btn:focus-visible, html .filter-btn:focus-visible, html .tab:focus-visible,
html button:focus-visible { outline: 2px solid var(--accent-300); outline-offset: 2px; }

/* Buttons — motion + press; colours flow from the token aliases. */
html .btn { border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
html .btn:active { transform: translateY(1px); }
html .btn-primary:disabled { background: var(--accent-100); color: var(--ink-400); }

/* Filter pills — active goes tint + deep text (replaces the solid fill). */
html .filter-btn { border-radius: var(--radius-full); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
html .filter-btn.active { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-300); font-weight: 600; }

/* Sidebar / tab nav (light portal) — tint active; smooth hover. */
html .tabs .tab { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }

/* Cards — premium radius + soft rest shadow. */
html .card { border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }

/* Rows */
html .act-row-link, html .booking-main, html .cl-item { transition: background var(--dur-fast) var(--ease); }

/* Modals — fade + 8px rise; ink backdrop with the one permitted glass pixel. */
@keyframes dsRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dsFade { from { opacity: 0; } to { opacity: 1; } }
html .cal-modal-ov, html .cust-overlay, html .help-overlay, html .ab-overlay,
html [id$="-overlay"].open, html .modal-ov {
  background: rgb(30 27 36 / 42%) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: dsFade var(--dur-modal) var(--ease);
}
html .cal-modal, html .cust-modal, html .help-modal, html .ab-modal, html .ms-modal {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  animation: dsRise var(--dur-modal) var(--ease);
}

/* Tags */
html .act-tag-new { background: var(--accent-50); color: var(--accent-700); }

/* Status badges — semantic tint + deep text. */
html .badge-active { background: var(--success-bg); color: var(--success); }
html .badge-inactive { background: var(--danger-bg); color: var(--danger); }

/* Table headers read as captions. */
html .booking-head, html .treatments-table th { font: 600 11px/16px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }

/* Typography refinements — tighter display tracking reads more designed. */
html h1, html h2, html h3 { letter-spacing: -0.01em; }
html .greeting { font: var(--text-display); letter-spacing: -0.02em; }
html .card h3 { font-size: 16px; font-weight: 600; }
html .page-header h2 { letter-spacing: -0.015em; }

/* Primary FILLED controls wear Owen's swatch (#957576 = accent-500) verbatim.
   (4.13:1 with white — passes AA-large/UI; small accent TEXT keeps the deeper
   accent-700 step for body-size legibility.) */
html .btn-primary, html .ca-btn-primary, html .ab-fab, html .admin-badge,
html .toast-info, html .seg-opt.active, html .step-dot.active {
  background: var(--accent-500);
}
html .btn-primary:hover, html .ca-btn-primary:hover, html .ab-fab:hover {
  background: var(--accent-600);
}


/* Warm canvas (ref: wellness-app tinted washes) — two soft blush radials at the
   top of the page fading into the warmed surface; cards stay white and pop gently. */
html body {
  background-color: var(--surface-50);
  background-image:
    radial-gradient(900px 400px at 30% -100px, var(--wash), transparent 70%),
    radial-gradient(700px 320px at 92% -140px, #F6F0EE, transparent 70%);
  background-repeat: no-repeat;
}


/* ---- Gradient accents (Owen: lean into the reference gradients) ---- */
/* Next up = the hero of the dashboard: soft blush gradient card, bigger time. */
html .next-up {
  background: linear-gradient(115deg, #F1E6E5 0%, #F8F2F1 45%, #FFFFFF 100%);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-rest);
}
html .next-up .next-time { font-size: 30px; color: var(--accent-700); min-width: 88px; }
/* Day-progress fill takes the accent gradient. */
html .dp-fill { background: linear-gradient(90deg, var(--accent-300), var(--accent-500)); opacity: .5; }

/* ---- Dashboard right rail (desktop): mini month calendar + coming up ---- */
html .dash-grid { display: block; }
@media (min-width: 1100px) {
  html .dash-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
}
html .dash-rail .rail-card { margin-bottom: 16px; }
html .rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
html .rail-month { font-weight: 600; font-size: 14px; }
html .mc-nav { border: none; background: none; color: var(--ink-400); font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
html .mc-nav:hover { background: var(--line-100); color: var(--ink-600); }
html .mc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
html .mc-dow { font-size: 10px; font-weight: 600; color: var(--ink-400); padding: 2px 0; text-transform: uppercase; }
html .mc-day { position: relative; border: none; background: none; font: 500 12px/1 var(--font); color: var(--ink-700); padding: 7px 0 9px; border-radius: 8px; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
html .mc-day:hover { background: var(--line-100); }
html .mc-today { color: var(--accent-700); font-weight: 700; }
html .mc-sel { background: var(--accent-500); color: #fff; }
html .mc-sel:hover { background: var(--accent-600); }
html .mc-dot { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-300); }
html .mc-sel .mc-dot { background: #fff; }
html .cu-day { font: 600 11px/16px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); margin: 10px 0 4px; }
html .cu-row { display: flex; gap: 10px; font-size: 13px; padding: 3px 0; }
html .cu-time { color: var(--ink-500); font-variant-numeric: tabular-nums; flex: 0 0 42px; }
html .cu-name { color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---- Rounding pass (Owen: references are soft, we'd gone angular) ---- */
/* Buttons go pill, like the reference CTAs. */
html .btn { border-radius: var(--radius-full); }
/* Containers that were still sitting square pick up the card radius. */
html .kpi-card, html .stat-card, html .an-notice, html .cal-scroll,
html .booking-detail, html .act-card, html .cust-notes, html .snippet,
html .sched-detail-inner, html .rail-card { border-radius: var(--radius-lg); }
/* Search hero + inputs soften a touch more. */
html .bk-search-wrap .bk-search-hero { border-radius: var(--radius-full); }
html input[type="text"], html input[type="email"], html input[type="url"], html input[type="number"],
html input[type="time"], html input[type="tel"], html input[type="datetime-local"], html input[type="date"],
html select, html textarea { border-radius: 12px; }
html .tabs .tab { border-radius: 12px; }


/* Jump-to-date popover (calendar header) — the rail mini-calendar as a branded
   dropdown, replacing the unstylable native date picker. */
html .cal-jump-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: 12px; width: 272px; animation: dsRise var(--dur-modal) var(--ease); text-align: left; font-weight: 400; }
html .mc-inview { background: var(--accent-50); }
html .mc-inview:hover { background: var(--accent-100); }


/* ============================================================================
   Mobile pass (brief Part 3): bottom-sheet modals, 44px targets, tighter gutter.
   ============================================================================ */
@keyframes dsSheet { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 768px) {
  /* Modals present as bottom sheets: full width, drag handle, 90vh internal scroll.
     z-index must beat the mobile bottom nav (1200) — it was covering the sheets' action buttons. */
  html .cal-modal-ov, html .cust-overlay, html .help-overlay { align-items: flex-end !important; padding: 0 !important; }
  html .cal-modal-ov, html .cust-overlay.open, html .help-overlay.open { z-index: 2000 !important; }
  html .cal-modal, html .cust-modal, html .help-modal {
    width: 100% !important; max-width: none !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh; overflow-y: auto;
    animation: dsSheet var(--dur-modal) var(--ease);
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
  html .cal-modal::before, html .cust-modal::before, html .help-modal::before {
    content: ''; display: block; width: 44px; height: 4px; border-radius: 999px;
    background: var(--line-300); margin: 0 auto 14px;
  }
  /* 44px touch targets */
  html .btn { min-height: 44px; }
  html .btn-sm, html .filter-btn, html .range-btn { min-height: 38px; }
  html .mobile-botnav button { min-height: 44px; }
  /* Base cushion + safe area — bare env() zeroed the padding in regular Safari and the
     labels clipped into the phone's curved corners (Owen's iPhone, 27-Jul). */
  html .mobile-botnav { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  html .mc-day { padding: 9px 0 11px; }
  /* Tighter page gutter — cards go full-bleed-ish. */
  html .container { padding-left: 12px; padding-right: 12px; }
}