/*
 * SaloonSoft design tokens — the single source of truth for the UI.
 * tk_046: shares tk_042's locked light/dark palette (light accent black,
 * dark accent violet #8B5CF6) with the auth pages. Floating panels,
 * hairline borders. Reference these custom properties everywhere; never
 * hard-code hex.
 */

/* Base reset: include padding/border in element widths so `width: 100%`
   controls (inputs, buttons) never overflow their container. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Self-hosted Inter (no CDN — works offline / under CSP). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-400-normal.da03732a27e1.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-500-normal.51205681a1ba.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-600-normal.2ede57db1a3a.woff2") format("woff2");
}

/*
 * tk_154: "Warm Professional" palette. Light = warm-paper neutrals with a
 * deep spa-teal accent (#0E7466); dark = espresso neutrals with a brighter
 * teal (#3FB8A6). Replaces the tk_046 black/violet palette. The pure-black
 * accent used to equal body text, so nothing read as interactive -- a real
 * teal accent is the modern *and* the usable fix. Variable NAMES are
 * unchanged on purpose (tk_046 contract): every consumer (components.css,
 * sidebar.css, portal.css, home.css, styleguide.css) picks up the new
 * palette with zero edits.
 */
:root {
  /* Neutrals -- warm paper */
  --color-canvas:         #F6F3EC;  /* app backdrop behind panels */
  --color-surface:        #FFFFFF;  /* cards, panels, sidebar */
  --color-surface-subtle: #F0ECE3;  /* tiles, grid area, skeletons */
  --color-surface-muted:  #E9E3D8;  /* hover, skeleton bars */
  --color-border:         #E5DFD3;  /* hairline dividers */
  --color-border-strong:  #D6CFBF;

  /* Text */
  --color-text:           #21201B;  /* primary warm near-black */
  --color-text-secondary: #5A554B;  /* labels, nav */
  --color-text-muted:     #8A847A;  /* captions, counts */

  /* Accent -- spa teal */
  --color-accent:         #0E7466;  /* price, links, active, stars, primary CTA */
  --color-accent-hover:   #0B5F54;
  --color-accent-soft:    #D8ECE7;  /* teal tint bg holding text (chips, badges) */
  --color-accent-subtle:  #ECF4F2;  /* faint tint: active pill, selected card, focus */

  /* Supporting */
  --color-btn-dark:       #2E2A22;  /* warm charcoal secondary button */
  --color-success:        #16A34A;
  --color-danger:         #DC2626;

  /* Elevation (warm-tinted shadow; redefined per theme below -- dark
     needs a more visible black shadow against a dark surface) */
  --shadow-sm: 0 1px 2px rgba(41, 37, 30, 0.06), 0 2px 6px rgba(41, 37, 30, 0.05);
  --shadow-md: 0 2px 4px rgba(41, 37, 30, 0.06), 0 8px 24px rgba(41, 37, 30, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas:         #14130F;
    --color-surface:        #1E1D18;
    --color-surface-subtle: #191813;
    --color-surface-muted:  #2A2820;
    --color-border:         #302E27;
    --color-border-strong:  #45413A;
    --color-text:           #F3EFE7;
    --color-text-secondary: #B4AFA2;
    --color-text-muted:     #847F72;
    --color-accent:         #3FB8A6;
    --color-accent-hover:   #57C4B4;
    --color-accent-soft:    #1C3D38;
    --color-accent-subtle:  rgba(63, 184, 166, 0.16);
    --color-btn-dark:       #3A362E;
    --color-success:        #22C55E;
    --color-danger:         #EF4444;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --color-canvas:         #14130F;
  --color-surface:        #1E1D18;
  --color-surface-subtle: #191813;
  --color-surface-muted:  #2A2820;
  --color-border:         #302E27;
  --color-border-strong:  #45413A;
  --color-text:           #F3EFE7;
  --color-text-secondary: #B4AFA2;
  --color-text-muted:     #847F72;
  --color-accent:         #3FB8A6;
  --color-accent-hover:   #57C4B4;
  --color-accent-soft:    #1C3D38;
  --color-accent-subtle:  rgba(63, 184, 166, 0.16);
  --color-btn-dark:       #3A362E;
  --color-success:        #22C55E;
  --color-danger:         #EF4444;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] {
  --color-canvas:         #F6F3EC;
  --color-surface:        #FFFFFF;
  --color-surface-subtle: #F0ECE3;
  --color-surface-muted:  #E9E3D8;
  --color-border:         #E5DFD3;
  --color-border-strong:  #D6CFBF;
  --color-text:           #21201B;
  --color-text-secondary: #5A554B;
  --color-text-muted:     #8A847A;
  --color-accent:         #0E7466;
  --color-accent-hover:   #0B5F54;
  --color-accent-soft:    #D8ECE7;
  --color-accent-subtle:  #ECF4F2;
  --color-btn-dark:       #2E2A22;
  --color-success:        #16A34A;
  --color-danger:         #DC2626;
  --shadow-sm: 0 1px 2px rgba(41, 37, 30, 0.06), 0 2px 6px rgba(41, 37, 30, 0.05);
  --shadow-md: 0 2px 4px rgba(41, 37, 30, 0.06), 0 8px 24px rgba(41, 37, 30, 0.08);
}

/*
 * tk_146: canonical breakpoint scale. Media queries can't consume custom
 * properties, so this is documentation, not enforceable tokens -- use these
 * literal values in @media rules everywhere so pages agree on where the
 * shell (sidebar off-canvas collapse) switches:
 *   Mobile S/M/L: up to 599px    Tablet: 600-899px
 *   Desktop:      900px+ (sidebar becomes a fixed 240px column)
 *   Wide/4K:      2560px+ (--content-max-width caps line length)
 */
:root {
  --content-max-width: 2200px;

  /* Radius */
  --radius-sm: 6px;   /* chips, inputs, buttons */
  --radius-md: 10px;  /* cards */
  --radius-lg: 16px;  /* large panels / app container */
  --radius-full: 9999px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Type */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}