/* Design tokens · TechFrost Appliance Repair & HVAC
 * Layout language adapted from the "Fluxa" reference (see design.md); colours from the TechFrost brand palette:
 *   #123F4A primary dark teal · #3F6B73 secondary teal · #9CC3CF accent ice blue · #E8F4F6 light background
 * Every colour and font in styles.css references a token below. Add new values here first.
 */
:root {
  /* Neutrals (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --slate-950: #0b1f24;            /* ink, nudged toward the brand teal */

  /* Brand (TechFrost) */
  --brand-50:  #e8f4f6;            /* light background */
  --brand-100: #d6eaef;
  --brand-200: #c2dde4;
  --brand-300: #9cc3cf;            /* accent ice blue: decoration only, never text on white */
  --brand-600: #3f6b73;            /* secondary teal */
  --brand-800: #123f4a;            /* primary dark teal */
  --brand-900: #0d323b;
  --brand-950: #0a262d;

  /* Semantic */
  --color-paper:   #ffffff;
  --color-paper-2: var(--brand-50);
  --color-paper-3: var(--slate-100);
  --color-ink:     var(--slate-950);
  --color-ink-2:   var(--slate-600);
  --color-muted:   var(--slate-500);
  --color-rule:    rgb(226 232 240 / 0.8);   /* slate-200/80 */
  --color-rule-strong: var(--slate-300);
  --color-card-line: #c3cdd9;   /* card outlines on white: between slate-300 and slate-400 (owner, 2026-10-10) */
  --color-accent:  var(--brand-800);
  --color-accent-hover: var(--brand-600);
  --color-accent-soft:  var(--brand-50);
  --color-focus:   var(--brand-600);
  --color-on-dark:   #ffffff;
  --color-on-dark-2: rgb(255 255 255 / 0.74);
  --color-on-dark-3: rgb(255 255 255 / 0.14);
  --color-glass:   rgb(255 255 255 / 0.85);
  --color-ok:      #047857;
  --color-ok-bg:   #ecfdf5;
  --color-err:     #b91c1c;
  --color-err-bg:  #fef2f2;
  --color-star:    #f59e0b;
  --color-live:    #22c55e;
  --color-bar-1:   var(--brand-800);
  --color-bar-2:   var(--brand-600);
  --color-bar-3:   var(--brand-300);
  --color-bar-4:   var(--brand-200);
  --color-bar-5:   var(--slate-400);

  --gradient-cta: radial-gradient(circle at 90% 20%, rgb(156 195 207 / 0.35), transparent 45%),
                  linear-gradient(135deg, var(--brand-800) 0%, var(--brand-950) 56%, var(--brand-600) 100%);
  --gradient-blue-card: radial-gradient(circle at 90% 10%, rgb(156 195 207 / 0.4), transparent 50%),
                        linear-gradient(150deg, var(--brand-600) 0%, var(--brand-800) 60%, var(--brand-900) 100%);
  --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a262d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");   /* tick in booking checkboxes */
  --color-backdrop: rgb(10 38 45 / 0.55);   /* behind the booking pop-up */
  /* Home hero: shade over the background photo so white text stays readable */
  --gradient-hero-shade: linear-gradient(0deg, rgb(10 38 45 / 0.9) 0%, rgb(10 38 45 / 0) 32%), linear-gradient(90deg, rgb(10 38 45 / 0.94) 0%, rgb(10 38 45 / 0.86) 38%, rgb(10 38 45 / 0.35) 68%, rgb(10 38 45 / 0.1) 100%);
  --gradient-hero-shade-mobile: linear-gradient(180deg, rgb(10 38 45 / 0.82) 0%, rgb(10 38 45 / 0.9) 55%, rgb(10 38 45 / 0.96) 100%);
  --color-glass-dark: rgb(255 255 255 / 0.08);
  --color-glass-dark-line: rgb(255 255 255 / 0.18);
--gradient-btn-inner: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: clamp(2rem, 2.8vw + 1rem, 3.25rem);
  --text-display: clamp(2.6rem, 5.2vw + 0.6rem, 5.05rem);
  --track-display: -0.065em;
  --track-head: -0.045em;

  /* Space (4-pt) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --page-max: 80rem;
  --page-gutter: 1.25rem;          /* px-5 */

  /* Shape and depth */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 16px 44px rgb(11 31 36 / 0.07);
  --shadow-lift: 0 18px 40px -12px rgb(18 63 74 / 0.4);
  --shadow-btn:  0 10px 24px -10px rgb(18 63 74 / 0.55);
  --shadow-menu: 0 18px 44px -16px rgb(11 31 36 / 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 200ms;
  --dur-medium: 320ms;

  /* Layers */
  --z-guides: 0;
  --z-raised: 2;
  --z-sticky: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}
@media (min-width: 40rem) { :root { --page-gutter: 2.25rem; } }   /* sm:px-9 */
@media (min-width: 64rem) { :root { --page-gutter: 4rem; } }      /* lg:px-16 */