/*
 * Sensr brand design tokens — source of truth.
 * All values derived from the Sensr brand guide (docs/README.md §Branding).
 */

/* ── Web font: Nunito Sans (self-hosted variable, close stand-in for Avenir Next) ── */
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand colours ──────────────────────────────────────────────────────── */
  --sensr-dark-blue:  #060628;
  --sensr-blue:       #3883ce;
  --sensr-light-grey: #ececf1;
  --sensr-white:      #ffffff;

  /* Secondary (accent / decoration) */
  --sensr-medium-green: #83cac7;
  --sensr-light-green:  #a5eac4;

  /* Gradient */
  --sensr-gradient: linear-gradient(135deg, var(--sensr-blue), var(--sensr-light-green));

  /* ── 12-swatch customer palette (anchored on brand gradient) ─────────────
     Used for customer auto-assign and project derived shades.
     The JS palette.js and domain/palette.py must stay in sync with these. */
  --swatch-01: #3883ce;  /* Sensr Blue */
  --swatch-02: #2b5fa3;  /* Deep Blue */
  --swatch-03: #5ba4d4;  /* Sky */
  --swatch-04: #83cac7;  /* Medium Green */
  --swatch-05: #a5eac4;  /* Light Green */
  --swatch-06: #2e9e9a;  /* Teal */
  --swatch-07: #1c7a8a;  /* Ocean */
  --swatch-08: #6b62c5;  /* Indigo */
  --swatch-09: #a85bbf;  /* Violet */
  --swatch-10: #d44f7a;  /* Rose */
  --swatch-11: #d4863a;  /* Amber */
  --swatch-12: #6e7e9a;  /* Slate */

  /* ── Semantic colour aliases ────────────────────────────────────────────── */
  --color-text:          var(--sensr-dark-blue);
  --color-text-muted:    rgba(6, 6, 40, 0.55);
  --color-text-inverse:  var(--sensr-white);
  --color-bg:            var(--sensr-white);
  --color-surface:       var(--sensr-light-grey);
  --color-surface-hover: #e2e2e9;
  --color-border:        #d8d8e2;
  --color-accent:        var(--sensr-blue);
  --color-accent-dark:   #2b6faf;
  --color-accent-soft:   var(--sensr-medium-green);
  --color-ok:            var(--sensr-medium-green);
  --color-warn:          #e0a800;
  --color-danger:        #d1495b;
  --color-danger-dark:   #b03347;

  /* Sidebar — light theme */
  --sidebar-bg:          #ffffff;
  --sidebar-text:        rgba(6, 6, 40, 0.60);
  --sidebar-hover:       rgba(6, 6, 40, 0.04);
  --sidebar-active:      rgba(56, 131, 206, 0.10);
  --sidebar-active-text: var(--color-accent);
  --sidebar-width:       220px;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  /* Avenir Next is the brand face (commercially licensed). Nunito Sans is the
     self-hosted stand-in; system-ui as final fallback. */
  --font-family: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui,
                 -apple-system, "Helvetica Neue", Arial, sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md:   1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.375rem;  /* 22px */
  --font-size-2xl:  1.75rem;   /* 28px */

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.7;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Spacing scale ──────────────────────────────────────────────────────── */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Elevation (box-shadow) ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(6, 6, 40, 0.08);
  --shadow:    0 1px 3px rgba(6, 6, 40, 0.12), 0 1px 2px rgba(6, 6, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(6, 6, 40, 0.12), 0 1px 4px rgba(6, 6, 40, 0.08);
  --shadow-lg: 0 8px 32px rgba(6, 6, 40, 0.20), 0 2px 8px rgba(6, 6, 40, 0.10);

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-drawer:  200;
  --z-toast:   300;
  --z-dialog:  400;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-io:   cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── Focus ring ─────────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(56, 131, 206, 0.35);
}

/* ── Global reset ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}