/* Master File — Design tokens & global root (mobile-first)
   - All values exposed as CSS tokens
   - Fluid font sizes (clamp), responsive spacing, and clear breakpoints
   - Uses Style OS color & typography system
*/

/* Fonts are loaded via the global head fragment (public/global.html). Remove @import to avoid duplication. */

html { scroll-behavior: smooth; }

:root {
  /* ---------- Palette (Style OS) — primitives + semantic tokens ---------- */
  /* primitive color tokens */
  --color-fg: #0f0f0f; /* Brand Black */
  --color-bg: #f5f5f5; /* Brand White */
  /* neutral accent (silver) — computed mix of body-text & body-bg so it
     stays grey regardless of palette. updated dynamically by font.js */
  --color-muted: rgba(15, 15, 15, 0.35);
  --color-accent: #bdbdbd; /* neutral accent (silver, ~2% darker) */
  /* semantic feedback colors */
  --color-success: #16a34a; /* green (keep) */
  --color-warning: #f59e0b; /* yellow/orange */
  --color-danger: #ef4444;  /* red */
  --danger: var(--color-danger);
  /* surface / card / modal background */
  --color-surface: #f9fafbff; /* Brand White */

  /* semantic aliases (use these in components/layout) */
  --color-body-text: var(--color-fg);
  --color-body-bg: var(--color-bg);
  --color-border-subtle: var(--color-muted);
  --color-focus-ring: rgba(0,133,49,0.20);

  /* ---------- Breakpoints (mobile-first) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Fonts (use local hosting in prod) ---------- */
  --font-family-heading: "Bebas Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-weight-heading: 400;
  --font-family-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* ---------- Fluid type scale (clamp) ---------- */
  /* small -> base -> display */
  --fz-0: clamp(0.75rem, 0.70rem + 0.2vw, 0.875rem); /* caption */
  --fz-sm: clamp(0.875rem, 0.84rem + 0.25vw, 0.9375rem); /* small */
  --fz-base: clamp(1rem, 0.98rem + 0.35vw, 1.0625rem); /* body */
  --fz-lg: clamp(1.125rem, 1.05rem + 0.6vw, 1.25rem); /* lead */
  --fz-xl: clamp(1.5rem, 1.35rem + 1.1vw, 1.875rem); /* h3/h2 */
  --fz-2xl: clamp(2rem, 1.6rem + 2.2vw, 2.75rem); /* h2 */
  --fz-3xl: clamp(2.75rem, 2.25rem + 3.6vw, 4rem); /* hero */

  /* ---------- Line-height & type helpers ---------- */
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* ---------- Spacing scale (mobile-first) ---------- */
  --space-0: 0.25rem; /* 4px */
  --space-1: 0.5rem;  /* 8px */
  --space-2: 0.75rem; /* 12px */
  --space-3: 1rem;    /* 16px */
  --space-4: 1.5rem;  /* 24px */
  --space-5: 2rem;    /* 32px */
  --space-6: 3rem;    /* 48px */
  --space-7: 4rem;    /* 64px */
  --space-8: 5rem;    /* 80px */
  --space-9: 6rem;    /* 96px */
  --space-10: 7rem;   /* 112px */
  --space-11: 8rem;   /* 128px */
  --space-12: 10rem;  /* 160px */

  /* ---------- Brand color shortcuts ---------- */
  --ACCENT: #bdbdbd;
  --SILVER: #dedede;
  --BLACK: #0f0f0f;
  --WHITE: #f5f5f5;

  /* ---------- Typography helpers ---------- */
  --font-weight-bold: 700;

  /* ---------- Layout, radii, elevation ---------- */
  --font-scale-factor: 1; /* multiplier for rem-based sizing, manipulated via JS */
  --container-max: 1200px;
  /* responsive padding; fluid between 1rem and 2rem depending on viewport */
  --container-pad: clamp(1rem, 2vw, 2rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --elevation-1: 0 1px 4px rgba(15,15,15,0.04);
  --elevation-2: 0 6px 18px rgba(15,15,15,0.08);
  --z-header: 100;
  --z-modal: 900;

  /* ---------- Motion / accessibility ---------- */
  --timing-fast: 120ms;
  --timing-base: 240ms;
  --timing-slow: 360ms;
  --ease-curve: cubic-bezier(.2,.9,.2,1);
  --focus-ring: 3px solid rgba(0,133,49,0.20); /* subtle ACCENT (brand green) focus */

  /* Button matte controls (tweak depth globally) */
  --btn-matte-strength: 8%;        /* used by primary color-mix */
  --btn-matte-dark-top: 0.03;      /* light overlay at top for dark buttons */
  --btn-matte-dark-bottom: 0.12;   /* darker bottom overlay for dark buttons */

  /* default internal spacing for os-btn (can be overridden per-button or
     by size modifiers). y and x are kept equal for a balanced pill shape. */
  --btn-padding-y: 1rem;
  --btn-padding-x: 1rem;
}


/* ---------- Root / base styles ---------- */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: calc(clamp(14px, 0.5rem + 0.6vw, 16px) * var(--font-scale-factor)); /* accessible root, scales lightly */
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--fz-base);
  line-height: var(--lh-normal);
  color: var(--color-body-text);
  background: var(--color-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

/* ---------- branding helper ---------- */
.bg {
  background: var(--bt-card-bg, linear-gradient(135deg, #dedede 0%, #f5f5f5 100%));
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  color: var(--bt-on-primary, inherit);
}

/* ---------- Headings using Bebas Neue ---------- */
/* Always render Bebas Neue at the normal weight (400). Never bold it. */
:where(h1,h2,h3,h4,h5,h6,
        .u-numerals,
        .amount,
        .metric,
        .appt-preview,
        .message-preview,
        .notif-badge,
        .badge,
        .widget-count,
        a.os-btn,
        button.os-btn,
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"]) {
  font-weight: 400 !important;
}

h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--space-3) 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); color: var(--color-body-text); line-height: 1; letter-spacing: 0.02em; }
h1 { font-size: var(--fz-3xl); }
h2 { font-size: var(--fz-2xl); }
h3 { font-size: var(--fz-xl); }
h4 { font-size: var(--fz-lg); }
h5 { font-size: var(--fz-base); }

/* numbers should always render in the heading font (Bebas Neue) for
   consistent emphasis.  use the utility class or include one of the
   selectors below when generating numeric output. */
.u-numerals { font-family: var(--font-family-heading); }

/* common elements that contain counts/dates/times */
.amount,
.metric,
.appt-preview,
.message-preview,
.notif-badge,
.badge,
.widget-count {
  font-family: var(--font-family-heading);
}

p { margin: 0 0 var(--space-3) 0; font-size: var(--fz-base); }

/* global anchor defaults */
a {
  /* anchors should follow the body text colour so that they flip along
     with headings, nav links, and other copy when the palette changes. */
  color: var(--color-body-text);
  text-decoration: none;
  transition: color var(--timing-fast) var(--ease-curve),
              transform var(--timing-fast) var(--ease-curve);
}

/* buttons should not inherit the text-scale from anchors */
a.os-btn:hover,
a.os-btn:focus,
.os-btn:hover,
.os-btn:focus {
  transform: none;
}

/* anchors styled as buttons should behave exactly like normal buttons */
a.os-btn,
button.os-btn {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading,400);
}

/* Danger / destructive buttons */
.os-btn--danger,
.db-nav-link--danger {
  color: var(--danger);
  border-color: var(--danger);
}

.os-btn--danger:hover,
.db-nav-link--danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, var(--color-bg));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--color-border-subtle));
}

.os-btn--danger:focus-visible,
.db-nav-link--danger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--danger) 60%, transparent);
  outline-offset: 2px;
}

/* ---------- Container & spacing utilities ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; gap: var(--space-3); align-items: center; }

/* ---------- Interactive & accessibility helpers ---------- */
:focus { /* keep a visible outline-color but don't fully remove UA focus */
  outline-color: transparent;
}
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(125,0,234,0.08), var(--elevation-1);
  border-radius: var(--radius-sm);
}

/* Opt-in utility for components that need the same focus style */
.u-focus-ring { outline: none; }
.u-focus-ring:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(125,0,234,0.08), var(--elevation-1);
  border-radius: var(--radius-sm);
}

button, a[role="button"] { cursor: pointer; }

/* use heading font for all form buttons by default */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: var(--font-family-heading);
}

.u-kbd { font-family: var(--font-family-body); font-size: var(--fz-0); padding: 0.125rem 0.35rem; border-radius: 6px; background: var(--color-border-subtle); color: var(--color-body-text); }

/* ---------- Desktop overrides (larger rhythm) ---------- */
@media (min-width: 1024px) {
  :root {
    --space-3: 1.25rem; /* 20px */
    --space-4: 2rem;    /* 32px */
    --space-5: 2.5rem;  /* 40px */
    --container-pad: calc(var(--space-4) * 1.25);
  }

  /* subtle desktop increase for body and headings where needed */
  body { font-size: calc(var(--fz-base) * 1.02); }
  h1 { font-size: clamp(2.75rem, 2rem + 4vw, 5rem); }
  h2 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); }
}

/* ---------- Small helpers for code/monospace ---------- */
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size: 0.9em; background: transparent; }

/* ---------- Utilities (prefixed: u-*) ---------- */
/* Spacing — margin (u-m-*) + logical helpers for inline/block where appropriate */
.u-m-0 { margin: 0; }
.u-m-1 { margin: var(--space-1); }
.u-m-2 { margin: var(--space-2); }
.u-m-3 { margin: var(--space-3); }
.u-m-4 { margin: var(--space-4); }
.u-m-5 { margin: var(--space-5); }
.u-m-6 { margin: var(--space-6); }
.u-m-7 { margin: var(--space-7); }
.u-mt-0 { margin-block-start: 0; }
.u-mt-1 { margin-block-start: var(--space-1); }
.u-mt-2 { margin-block-start: var(--space-2); }
.u-mt-3 { margin-block-start: var(--space-3); }
.u-mt-4 { margin-block-start: var(--space-4); }
.u-mb-0 { margin-block-end: 0; }
.u-mb-1 { margin-block-end: var(--space-1); }
.u-mb-2 { margin-block-end: var(--space-2); }
.u-mb-3 { margin-block-end: var(--space-3); }
.u-ml-0 { margin-inline-start: 0; }
.u-ml-1 { margin-inline-start: var(--space-1); }
.u-ml-2 { margin-inline-start: var(--space-2); }
.u-ml-3 { margin-inline-start: var(--space-3); }
.u-mx-0 { margin-inline: 0; }
.u-mx-1 { margin-inline: var(--space-1); }
.u-mx-2 { margin-inline: var(--space-2); }
.u-mx-3 { margin-inline: var(--space-3); }
.u-my-0 { margin-block: 0; }
.u-my-1 { margin-block: var(--space-1); }
.u-my-2 { margin-block: var(--space-2); }
.u-my-3 { margin-block: var(--space-3); }

/* Padding — use logical properties for inline/block variants */
.u-p-0 { padding: 0; }
.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-pt-1 { padding-block-start: var(--space-1); }
.u-pb-1 { padding-block-end: var(--space-1); }
.u-pl-1 { padding-inline-start: var(--space-1); }
.u-pr-1 { padding-inline-end: var(--space-1); }
.u-px-0 { padding-inline: 0; }
.u-px-1 { padding-inline: var(--space-1); }
.u-px-2 { padding-inline: var(--space-2); }
.u-px-3 { padding-inline: var(--space-3); }
.u-py-0 { padding-block: 0; }
.u-py-1 { padding-block: var(--space-1); }
.u-py-2 { padding-block: var(--space-2); }

/* Gap utilities */
.u-gap-0 { gap: var(--space-0); }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

/* Display & layout helpers */
.u-d-block { display: block; }
.u-d-inline { display: inline; }
.u-d-inline-block { display: inline-block; }
.u-d-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-d-grid { display: grid; }
.u-d-none { display: none !important; }
.u-w-full { width: 100%; }
.u-w-auto { width: auto; }
.u-max-w-container { max-width: var(--container-max); }
.u-h-fit { height: auto; }
.u-overflow-hidden { overflow: hidden; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flex helpers */
.u-items-start { align-items: flex-start; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-justify-start { justify-content: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-flex-column { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }

/* Text & color helpers */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
/* slightly darker muted tone for better contrast */
.u-text-muted { color: rgba(15, 15, 15, 0.55); }
.u-lead { font-size: var(--fz-lg); line-height: var(--lh-snug); }
.u-text-sm { font-size: var(--fz-sm); }
.u-text-cap { font-size: var(--fz-0); text-transform: uppercase; letter-spacing: 0.08em; }

/* Radius & elevation helpers */
.u-rounded-sm { border-radius: var(--radius-sm); }
.u-rounded-md { border-radius: var(--radius-md); }
.u-rounded-lg { border-radius: var(--radius-lg); }
.u-shadow-1 { box-shadow: var(--elevation-1); }
.u-shadow-2 { box-shadow: var(--elevation-2); }
.u-border { border: 1px solid var(--color-border-subtle); }

/* Accessibility helpers */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.u-sr-only--focusable:active, .u-sr-only--focusable:focus {
  position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* Responsive utility variants (use tokenized breakpoints) */
@media (min-width: 480px) { /* sm - large phones */
  .sm\:u-p-3 { padding: var(--space-3); }
  .sm\:u-p-4 { padding: var(--space-4); }
  .sm\:u-px-4 { padding-inline: var(--space-4); }
  .sm\:u-py-4 { padding-block: var(--space-4); }
  .sm\:u-m-3 { margin: var(--space-3); }
  .sm\:u-mx-3 { margin-inline: var(--space-3); }
  .sm\:u-d-flex { display: flex; }
  .sm\:u-d-block { display: block; }
  .sm\:u-d-none { display: none !important; }
  .sm\:u-items-center { align-items: center; }
  .sm\:u-justify-between { justify-content: space-between; }
  .sm\:u-gap-3 { gap: var(--space-3); }
  .sm\:u-w-full { width: 100%; }
  .sm\:u-text-center { text-align: center; }
  .sm\:u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 768px) { /* md - tablet */
  .md\:u-p-3 { padding: var(--space-3); }
  .md\:u-p-4 { padding: var(--space-4); }
  .md\:u-p-5 { padding: var(--space-5); }
  .md\:u-px-4 { padding-inline: var(--space-4); }
  .md\:u-mx-4 { margin-inline: var(--space-4); }
  .md\:u-d-flex { display: flex; }
  .md\:u-d-grid { display: grid; }
  .md\:u-d-none { display: none !important; }
  .md\:u-flex-row { flex-direction: row; }
  .md\:u-flex-column { flex-direction: column; }
  .md\:u-items-center { align-items: center; }
  .md\:u-justify-between { justify-content: space-between; }
  .md\:u-gap-4 { gap: var(--space-4); }
  .md\:u-w-auto { width: auto; }
  .md\:u-w-full { width: 100%; }
}

@media (min-width: 1024px) { /* lg - desktop */
  .lg\:u-p-4 { padding: var(--space-4); }
  .lg\:u-p-5 { padding: var(--space-5); }
  .lg\:u-px-6 { padding-inline: var(--space-6); }
  .lg\:u-m-5 { margin: var(--space-5); }
  .lg\:u-d-flex { display: flex; }
  .lg\:u-d-none { display: none !important; }
  .lg\:u-gap-5 { gap: var(--space-5); }
  .lg\:u-items-center { align-items: center; }
  .lg\:u-justify-between { justify-content: space-between; }
  .lg\:u-max-w-container { max-width: var(--container-max); }
  .lg\:u-text-left { text-align: left; }
}

@media (min-width: 1280px) { /* xl - large desktop */
  .xl\:u-p-5 { padding: var(--space-5); }
  .xl\:u-p-6 { padding: var(--space-6); }
  .xl\:u-m-6 { margin: var(--space-6); }
  .xl\:u-d-flex { display: flex; }
  .xl\:u-gap-6 { gap: var(--space-6); }
  .xl\:u-items-center { align-items: center; }
  .xl\:u-justify-between { justify-content: space-between; }
  .xl\:u-w-full { width: 100%; }
}

/* End of utilities */