/* ==========================================================================
   SETTORA design tokens
   Sampled from the approved dashboard mockups in docs/mockups/.

   Hand-written CSS, not Tailwind. This host has no Node, so the only
   Tailwind option would be the CDN build, which compiles at runtime and
   ships ~400KB. This palette is bespoke anyway — utilities would be more
   code, not less.

   The dashboards are a committed dark product surface. They do not follow
   the OS theme; a med spa owner opening this on a bright monitor should
   still see the same deep navy the mockups specify. Marketing pages and
   auth screens use the light set below.
   ========================================================================== */

:root {
  /* ---- dashboard surface (dark, committed) ---- */
  --canvas:        #0A1017;
  --canvas-2:      #0D141C;
  --surface:       #121A23;
  --surface-2:     #18222D;
  --surface-3:     #1E2A36;
  --border:        #1F2A36;
  --border-2:      #2A3846;

  /* ---- semantic state ----
     advantage / exposure / watch are SEPARATE from brand accent.
     Never use mint to mean "primary button"; it means "you are winning". */
  --advantage:     #5EEAD4;
  --advantage-2:   #34D399;
  --advantage-dim: rgba(94, 234, 212, .12);
  --exposure:      #FB7185;
  --exposure-2:    #F43F5E;
  --exposure-dim:  rgba(251, 113, 133, .12);
  --watch:         #FBBF24;
  --watch-dim:     rgba(251, 191, 36, .12);
  --neutral:       #64748B;

  /* ---- text ---- */
  --text:          #F1F5F9;
  --text-2:        #94A3B8;
  --text-3:        #64748B;
  --text-inverse:  #0A1017;

  /* ---- brand ---- */
  --brand:         #5EEAD4;
  --brand-deep:    #0E7C86;

  /* ---- type ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- scale ---- */
  --step--1: 13px;
  --step-0:  15px;
  --step-1:  17px;
  --step-2:  21px;
  --step-3:  26px;
  --step-4:  34px;
  --hero:    clamp(56px, 7vw, 96px);   /* the big score numerals */

  /* ---- space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;

  /* ---- shape ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.18);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.3),  0 12px 32px rgba(0,0,0,.28);

  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
}

/* ---- light surface, for marketing / auth only ---- */
.theme-light {
  --canvas:     #FAFAF9;
  --canvas-2:   #F4F4F2;
  --surface:    #FFFFFF;
  --surface-2:  #F4F4F2;
  --surface-3:  #EBEBE8;
  --border:     #E4E4E1;
  --border-2:   #D2D2CE;
  --text:       #14171A;
  --text-2:     #565B62;
  --text-3:     #868C94;
  --text-inverse: #FFFFFF;
  --advantage:  #0F766E;
  --exposure:   #BE123C;
  --watch:      #A16207;
  --shadow-card: 0 1px 2px rgba(20,23,26,.06), 0 4px 14px rgba(20,23,26,.05);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

img, svg { max-width: 100%; display: block; }

table { border-collapse: collapse; width: 100%; }

/* Digits that line up in columns, everywhere. */
.tnum, td, th, .metric-value, .score-value {
  font-variant-numeric: tabular-nums;
}

/* Keyboard focus is always visible. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

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

/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}