/*
 * Unavoidable CRM - Brand tokens v2
 * Single source of truth for palette, typography, spacing.
 * Loaded via layout_head.php + site_layout.php BEFORE all other styles.
 *
 * v2 launched 21 July 2026. Replaces terracotta/cream + Bricolage direction.
 */

:root {
  /* -- Surface palette (light theme) -- */
  --bg:            #FAFAF9;   /* app background - warm off-white */
  --bg-2:          #F5F5F4;   /* subtle raised surface */
  --surface:       #FFFFFF;   /* card, panel */
  --surface-2:    rgba(255,255,255,0.75); /* frosted glass */

  /* -- Ink (text) -- */
  --ink:           #0A0A0B;   /* primary text */
  --ink-2:         #52525B;   /* secondary text */
  --ink-3:         #A1A1AA;   /* tertiary / muted */
  --ink-soft:      #52525B;   /* legacy alias */
  --text-heading:  #0A0A0B;   /* legacy alias */
  --text-muted:    #A1A1AA;   /* legacy alias */

  /* -- Lines / borders -- */
  --line:          rgba(10,10,11,0.08);
  --line-strong:   rgba(10,10,11,0.14);

  /* -- Brand accents -- */
  --violet:        #7C3AED;   /* primary accent */
  --violet-2:      #6D28D9;   /* accent hover / pressed */
  --violet-soft:   #F3EEFF;   /* accent tinted background */
  --violet-ink:    #4C1D95;   /* accent text on light bg */

  --cyan:          #0891B2;   /* secondary accent */
  --cyan-soft:     #E0F7FA;

  /* -- Legacy alias so terracotta-referencing modules keep working -- */
  --accent:        var(--violet);
  --accent-soft:   var(--violet-soft);
  --accent-hover:  var(--violet-2);
  --accent-dim:    var(--violet-soft);
  --primary:       var(--violet);
  --purple:        var(--violet);
  --purple-light:  #A78BFA;

  /* -- Semantic (status) -- */
  --success:       #059669;
  --success-soft:  #E9F7EC;
  --warning:       #D97706;
  --warning-soft:  #FEF3C7;
  --danger:        #DC2626;
  --danger-soft:   #FEF2F2;
  --info:          #2563EB;
  --info-soft:     #EFF3FE;

  /* -- Radius scale -- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* -- Shadow scale -- */
  --shadow-1: 0 1px 2px rgba(10,10,11,0.05);
  --shadow-2: 0 4px 12px rgba(10,10,11,0.06);
  --shadow-3: 0 12px 30px rgba(10,10,11,0.08);
  --shadow-accent: 0 12px 30px rgba(124,58,237,0.15);

  /* -- Typography (font stacks) -- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Legacy aliases so components that reference the old fonts still resolve to Inter */
  --font-head: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* -- Type scale (in rem) -- */
  --t-xs: 0.75rem;    /* 12 */
  --t-sm: 0.875rem;   /* 14 */
  --t-base: 1rem;     /* 16 */
  --t-lg: 1.125rem;   /* 18 */
  --t-xl: 1.375rem;   /* 22 */
  --t-2xl: 1.75rem;   /* 28 */
  --t-3xl: 2.25rem;   /* 36 */
  --t-4xl: 3rem;      /* 48 */
  --t-5xl: 4rem;      /* 64 */
  --t-6xl: 5.5rem;    /* 88 */

  /* -- Spacing -- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
}

/* -- Base reset -- */
html { font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); }

/* -- Selection colour -- */
::selection { background: var(--violet-soft); color: var(--violet-ink); }

/* -- Focus ring -- */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }

/* -- Scrollbar (webkit) -- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* -- Utility: brand gradient text -- */
.brand-gradient {
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Brand mark (the 'U' square logo, reusable) -- */
.brand-mark {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--violet), var(--violet-2));
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.brand-mark.lg { width: 40px; height: 40px; font-size: 19px; border-radius: 8px; }
.brand-mark.xl { width: 56px; height: 56px; font-size: 26px; border-radius: 12px; }


/* logo-06c-v1-css */
.ulog{display:inline-flex;align-items:baseline;font-family:var(--font-sans);font-weight:600;letter-spacing:-0.045em;color:var(--ink);text-decoration:none;line-height:1;white-space:nowrap}
.ulog .slash{color:var(--violet);font-weight:400;opacity:0.6;margin:0 2px}
.ulog .dot{display:inline-block;width:0.22em;height:0.22em;background:var(--violet);border-radius:50%;margin-left:0.06em;vertical-align:baseline;align-self:flex-end;margin-bottom:0.08em}
.ulog.on-dark{color:#FFFFFF}
.ulog.on-dark .slash{color:#A78BFA}
.ulog.on-dark .dot{background:#A78BFA}
.ulog.xs{font-size:14px}.ulog.sm{font-size:16px}.ulog.md{font-size:18px}.ulog.lg{font-size:24px}.ulog.xl{font-size:40px}.ulog.hero{font-size:72px;letter-spacing:-0.055em}

/* logo-06c-css-v2 dot render fix */
a.ulog,span.ulog{display:inline-flex!important;align-items:baseline!important;text-decoration:none!important}
a.ulog:hover,a.ulog:focus,a.ulog:visited{text-decoration:none!important;color:inherit}
.ulog>.slash{color:var(--violet)!important;font-weight:400!important;opacity:0.6!important;margin:0 2px!important}
.ulog>.dot{display:inline-block!important;width:0.22em!important;height:0.22em!important;background:var(--violet)!important;border-radius:50%!important;margin-left:0.06em!important;margin-bottom:0.08em!important;align-self:flex-end!important}
.ulog.on-dark>.slash{color:#A78BFA!important}.ulog.on-dark>.dot{background:#A78BFA!important}

/* usage-included: constrain the unbounded .container */
#usage-included .container,
.usage .container,
#byo-container .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  #usage-included .container,
  .usage .container,
  #byo-container .container {
    padding: 0 16px;
  }
}