/* ==========================================================================
   Happy UI tokens: Valley Tree Care / Happy Labs dashboards and portals
   Palette = the official brand guide (Pantone Color Bridge → hex). Purple is the brand,
   canopy green is health/success, gold is the action + wordmark color.
   Derived from happy-website/src/styles/tokens.css (contrast-checked there), tuned for
   app screens: a fixed type scale instead of a fluid marketing one, plus dark mode.

   Use the SEMANTIC tokens (--color-*) in components. The brand palette is only here so the
   semantic tokens have something to point at. Never type a hex value in a component.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* --- brand palette (official values; do not tint these in components) --- */
  --purple-500: #833177;  /* PMS 512  primary badge purple */
  --purple-600: #6A2A5B;  /* PMS 7651 deep */
  --purple-700: #4B3048;  /* PMS 518  darkest / text */
  --purple-50:  #F6EEF5;
  --purple-100: #EAD9E7;
  --green-500:  #84BD00;  /* PMS 376  canopy */
  --green-400:  #97D700;  /* PMS 375  highlight */
  --green-700:  #467000;  /* AA-safe green text on white and on the light tints */
  --green-50:   #F2F8E4;
  --gold-400:   #FFC845;  /* PMS 1225 wordmark + outlines */
  --gold-500:   #F5B92E;
  --gold-50:    #FFF7E0;
  --cream-500:  #ECD898;  /* PMS 7402 */
  --cream-50:   #FBF7EA;
  --brown-500:  #A7662B;  /* PMS 7573 trunk */

  /* --- semantic: surfaces and ink --- */
  --color-bg:            #FFFDF9;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F7F3EC;          /* table stripes, wells, code */
  --color-surface-brand: var(--purple-700); /* sidebar, top bar */
  --color-on-brand:      #FFFFFF;
  --color-on-brand-muted:#D9C9D6;
  --color-ink:           var(--purple-700);
  --color-ink-2:         #6A5B68;
  --color-muted:         #756876;          /* AA at any size on white and surface-2 */
  --color-border:        #E8E1D8;
  --color-border-strong: #D4CBC0;

  /* --- semantic: actions --- */
  --color-primary:       var(--purple-500);
  --color-primary-hover: var(--purple-600);
  --color-on-primary:    #FFFFFF;
  --color-accent:        var(--gold-400);  /* the ONE most important action on a screen */
  --color-accent-hover:  var(--gold-500);
  --color-on-accent:     var(--purple-700);
  --color-link:          var(--purple-500);
  --focus-ring:          0 0 0 3px var(--color-bg), 0 0 0 6px var(--purple-500);

  /* --- semantic: status (text color on its own bg; both pass AA) --- */
  --color-success:    var(--green-700);  --color-success-bg: var(--green-50);
  --color-warning:    #7A4A00;           --color-warning-bg: var(--gold-50);
  --color-danger:     #B3261E;           --color-danger-bg:  #FCEBEA;
  --color-danger-solid: #B3261E;         /* fill behind white text (Delete buttons) */
  --color-info:       var(--purple-500); --color-info-bg:    var(--purple-50);
  --color-neutral:    #5E525C;           --color-neutral-bg: #F1ECE6;

  /* --- charts: categorical order, brand first. Pair with a label, never color alone. --- */
  --chart-1: var(--purple-500);
  --chart-2: var(--green-500);
  --chart-3: var(--gold-400);
  --chart-4: var(--brown-500);
  --chart-5: #3E7CB1;
  --chart-6: #9C8A99;

  /* --- typography --- */
  --font-body: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 0.78rem;  --text-sm: 0.875rem; --text-base: 1rem;  --text-md: 1.125rem;
  --text-lg: 1.3rem;   --text-xl: 1.6rem;   --text-2xl: 2.1rem;
  --weight-body: 450;  --weight-medium: 550; --weight-bold: 700; --weight-heavy: 800;
  --leading-tight: 1.15; --leading-body: 1.55;
  --tracking-caps: 0.08em;

  /* --- spacing (4px base) --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem;  --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;

  /* --- shape and elevation --- */
  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(75, 48, 72, 0.06), 0 1px 3px rgba(75, 48, 72, 0.08);
  --shadow-md: 0 4px 12px rgba(75, 48, 72, 0.08), 0 2px 4px rgba(75, 48, 72, 0.06);
  --shadow-lg: 0 18px 40px rgba(75, 48, 72, 0.14), 0 6px 12px rgba(75, 48, 72, 0.06);

  /* --- layout --- */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --content-max: 1280px;
  --tap: 44px;            /* minimum touch target: crews use these on phones, outdoors */

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms; --dur: 250ms;

  color-scheme: light;
}

/* --- dark mode: follows the device unless the page pins data-theme --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1A1219; --color-surface: #241A23; --color-surface-2: #2D212C;
    --color-surface-brand: #2A1B28; --color-on-brand-muted: #BFAEBB;
    --color-ink: #F4EEF3; --color-ink-2: #D2C4CF; --color-muted: #AE9EAB;
    --color-border: #3D2F3B; --color-border-strong: #54424F;
    --color-primary: #9A3F8C; --color-primary-hover: #B04FA1;
    --color-link: #E0A6D5; --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px #E0A6D5;
    --color-success: #B5E550; --color-success-bg: #1F2A10;
    --color-warning: #FFD77A; --color-warning-bg: #33280F;
    --color-danger:  #F4B4AF; --color-danger-bg:  #3A1715; --color-danger-solid: #C2352B;
    --color-info:    #E0A6D5; --color-info-bg:    #34202F;
    --color-neutral: #CFC2CC; --color-neutral-bg: #2F252D;
    --chart-1: #C46BB5; --chart-6: #8C7C89;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 18px 40px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #1A1219; --color-surface: #241A23; --color-surface-2: #2D212C;
  --color-surface-brand: #2A1B28; --color-on-brand-muted: #BFAEBB;
  --color-ink: #F4EEF3; --color-ink-2: #D2C4CF; --color-muted: #AE9EAB;
  --color-border: #3D2F3B; --color-border-strong: #54424F;
  --color-primary: #9A3F8C; --color-primary-hover: #B04FA1;
  --color-link: #E0A6D5; --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px #E0A6D5;
  --color-success: #B5E550; --color-success-bg: #1F2A10;
  --color-warning: #FFD77A; --color-warning-bg: #33280F;
  --color-danger:  #F4B4AF; --color-danger-bg:  #3A1715; --color-danger-solid: #C2352B;
  --color-info:    #E0A6D5; --color-info-bg:    #34202F;
  --color-neutral: #CFC2CC; --color-neutral-bg: #2F252D;
  --chart-1: #C46BB5; --chart-6: #8C7C89;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 18px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}