/* =============================================================
   Treatlly Practice OS — Design Tokens (CSS variables only)
   Component classes are composed from Tailwind utilities; this
   file holds the design tokens for light + dark mode, fonts,
   and a few base resets that aren't easily expressed inline.
   ============================================================= */

:root {
  /* Brand — Treatlly Teal */
  --brand-50:  #E6F2EF;
  --brand-100: #C2DED7;
  --brand-200: #8EC1B5;
  --brand-300: #4F9F8E;
  --brand-400: #1F7E6B;
  --brand-500: #0E5F52;
  --brand-600: #0A4D43;
  --brand-700: #073B33;
  --brand-800: #062E28;
  --brand-900: #04201C;

  /* Neutrals (warm) */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFAF9;
  --ink-50:  #F5F5F4;
  --ink-100: #EDEDEB;
  --ink-150: #E2E2DF;
  --ink-200: #D4D4D0;
  --ink-300: #B6B5B0;
  --ink-400: #8E8D87;
  --ink-500: #6E6D67;
  --ink-600: #50504B;
  --ink-700: #3A3A36;
  --ink-800: #232320;
  --ink-900: #131311;

  /* Semantic (low-chroma) */
  --success:    #156D50;
  --success-bg: #E5F1EC;
  --warning:    #8A5A0B;
  --warning-bg: #FBF3DF;
  --danger:     #B33636;
  --danger-bg:  #FBE9E9;
  --info:       #1F4F94;
  --info-bg:    #E8EFFB;

  /* Brand foreground for soft pills (`bg-brand-50` text). Light mode uses
     brand-600; dark mode flips to brand-300 (see dark block). */
  --brand-fg: #0A4D43;

  /* Surfaces (light) */
  --bg-app:      #F7F7F5;
  --bg-card:     #FFFFFF;
  --bg-sunken:   #F2F2EF;
  --bg-elevated: #FFFFFF;
  --bg-inverted: #131311;

  --border-subtle: #ECECE9;
  --border:        #E2E2DE;
  --border-strong: #CFCFCA;

  --text-primary:   #131311;
  --text-secondary: #50504B;
  --text-tertiary:  #8E8D87;

  /* Type families */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 320ms;
}

/* Tailwind class-based dark mode is `.dark` (already configured). The
   styleguide also accepts `[data-theme="dark"]` so we mirror both. */
.dark,
[data-theme="dark"] {
  --bg-app:      #0C0C0B;
  --bg-card:     #161614;
  --bg-sunken:   #0F0F0E;
  --bg-elevated: #1C1C1A;
  --bg-inverted: #FAFAF9;

  --border-subtle: #232320;
  --border:        #2D2D2A;
  --border-strong: #3A3A36;

  --text-primary:   #FAFAF9;
  --text-secondary: #B6B5B0;
  --text-tertiary:  #8E8D87;

  --ink-25:  #1C1C1A;
  --ink-50:  #232320;
  --ink-100: #2D2D2A;
  --ink-150: #3A3A36;

  --success-bg: #0F2A22;
  --warning-bg: #2A1F0A;
  --danger-bg:  #2A1414;
  --info-bg:    #0F1A2E;

  /* Lift the semantic foregrounds in dark mode so they read on the dark
     soft surfaces above. The light-mode values (#156D50 etc.) sit too close
     to their dark backgrounds — these lighter hues mirror the kpi_hero
     delta colours (#7BD3A8 / #F09A9A) that the styleguide already uses on
     dark surfaces. */
  --success: #7BD3A8;
  --warning: #E5B96A;
  --danger:  #F09A9A;
  --info:    #7DA8E5;

  /* Brand-foreground for soft pills (`bg-brand-50` text). brand-600 is too
     dark on the dark-mode brand-50 fill; brand-300 is the styleguide's
     "brand on dark" choice (see hero-eyebrow override). */
  --brand-fg: #4F9F8E;
}

/* Force light mode when [data-theme="light"] is set — public-facing pages
   (storefront, OTP login, doctor booking) opt out of theme switching so the
   tenant's brand renders consistently regardless of OS / dashboard preference.
   Placed after the .dark block so it wins on equal specificity. */
[data-theme="light"] {
  --bg-app:      #F7F7F5;
  --bg-card:     #FFFFFF;
  --bg-sunken:   #F2F2EF;
  --bg-elevated: #FFFFFF;
  --bg-inverted: #131311;

  --border-subtle: #ECECE9;
  --border:        #E2E2DE;
  --border-strong: #CFCFCA;

  --text-primary:   #131311;
  --text-secondary: #50504B;
  --text-tertiary:  #8E8D87;

  --ink-25:  #FAFAF9;
  --ink-50:  #F5F5F4;
  --ink-100: #EDEDEB;
  --ink-150: #E2E2DF;

  --success:    #156D50;
  --success-bg: #E5F1EC;
  --warning:    #8A5A0B;
  --warning-bg: #FBF3DF;
  --danger:     #B33636;
  --danger-bg:  #FBE9E9;
  --info:       #1F4F94;
  --info-bg:    #E8EFFB;

  --brand-fg: #0A4D43;
}

/* Anchor jump fix used by section/tab targets */
[id^="tt-sec-"] { scroll-margin-top: 80px; }

/* The body opt-in class — applied on layouts that should pick up the new
   design system. Existing pages still render against Tailwind defaults. */
body.tt-app {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}