/* ============================================================================
   Vendra One — design tokens
   Derived from the "V-kærven" brand sheet. This file is the single source of
   truth for colour, spacing, radius, shadow and type across the website, the
   CRM, the dialer, the admin panel and the customer portal.

   Two layers, on purpose:
     1. BRAND    — the raw palette. Four colours and their neutrals. Nothing else.
     2. SEMANTIC — what a component actually asks for (--color-primary, --surface).
   Components reference layer 2 only. Re-theming then means editing layer 1, and
   a component never hardcodes #2F6D93.
   ========================================================================= */

:root {
  /* ---- 1. BRAND ---------------------------------------------------------
     Straight from the brand sheet. Do not add to this list: the rules are
     explicit that there are no gradients and no new colours. */
  --brand-ink:          #15171B;   /* the mark, and every piece of primary text */
  --brand-accent:       #2F6D93;   /* the dot, links, primary actions           */
  --brand-accent-light: #7FB2CE;   /* the dot on dark ground                    */
  --brand-paper:        #FAF9F6;   /* cards and sheets                          */
  --brand-canvas:       #EFEDE7;   /* the ground the paper sits on              */
  --brand-line:         #E4E1DA;   /* hairlines and dividers                    */
  --brand-mute:         #6E7278;   /* secondary text and labels                 */

  /* Derived accent steps. Hover and pressed states need somewhere to go, and
     an ad-hoc darken at each call site drifts. */
  --brand-accent-strong: #275B79;
  --brand-accent-deep:   #1E4A63;
  --brand-accent-soft:   #EAF2F7;  /* tinted background for selected rows, badges */

  /* Status. The brand sheet does not define these, so they are taken from the
     sanctioned alternate accents (green / amber-brown / indigo) rather than
     stock traffic-light colours — a saturated #22C55E next to #2F6D93 would
     read as a different product. Red has no brand equivalent; this brick is
     the least foreign thing that still reads as danger. */
  --brand-ok:    #3F6B4E;  --brand-ok-soft:    #EDF3EE;
  --brand-warn:  #8A5A3B;  --brand-warn-soft:  #F6F0EA;
  --brand-bad:   #A34A3C;  --brand-bad-soft:   #F7EDEB;
  --brand-info:  #4A4E8C;  --brand-info-soft:  #EEEFF6;

  /* ---- 2. SEMANTIC ------------------------------------------------------ */
  --bg:              var(--brand-canvas);
  --surface:         var(--brand-paper);
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #F4F2EC;
  --surface-inverse: var(--brand-ink);

  --fg:            var(--brand-ink);
  --fg-muted:      var(--brand-mute);
  --fg-subtle:     #9A9DA3;
  --fg-inverse:    var(--brand-paper);
  --fg-on-accent:  var(--brand-paper);

  --border:        var(--brand-line);
  --border-strong: #D3CFC6;
  --border-focus:  var(--brand-accent);

  --color-primary:        var(--brand-accent);
  --color-primary-hover:  var(--brand-accent-strong);
  --color-primary-active: var(--brand-accent-deep);
  --color-primary-soft:   var(--brand-accent-soft);

  --color-ok:   var(--brand-ok);   --color-ok-soft:   var(--brand-ok-soft);
  --color-warn: var(--brand-warn); --color-warn-soft: var(--brand-warn-soft);
  --color-bad:  var(--brand-bad);  --color-bad-soft:  var(--brand-bad-soft);
  --color-info: var(--brand-info); --color-info-soft: var(--brand-info-soft);

  /* ---- 3. SPACING -------------------------------------------------------
     The 4 px system from the spec. Every margin and padding in the product
     comes from this list — there are no in-between values. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  /* 20px was already in use in eighteen places, written as
     var(--space-5, 20px) — it worked only because every call site
     remembered the fallback. One that forgets loses the whole
     declaration silently, which is how the footer row-gap and the
     hero column-gap quietly stopped applying earlier. It is 4×5 and
     belongs on the scale. */
  /* ---- warm accent ----
     The one warm colour in the palette, and the reason a primary button pulls
     the eye on a page that is otherwise cool. Its text is ink rather than
     white: white on this coral measures 3.01 against a 4.5 requirement, and
     darkening the coral enough to fix that takes the warmth out of the only
     warm thing here. */
  /* The page's own curve. Used by the hero's lower edge and, quartered, by the
     bubble's squared corner — one value, so the page has a shape. */
  --curve-page: clamp(28px, 5vw, 56px);

  --accent-warm:       #E8734A;
  --accent-warm-lift:  #F08055;
  --accent-warm-on:    #15171B;

  /* ---- depth ----
     Two levels, used everywhere something is meant to sit above the page
     rather than in it. Written once so a card in the hero and a card on the
     trust page cannot drift into different amounts of lift. */
  --lift-rest:  0 14px 34px -22px rgba(21, 23, 27, .40);
  --lift-hover: 0 26px 56px -26px rgba(21, 23, 27, .55);
  --lift-dark:  0 18px 44px -26px rgba(0, 0, 0, .70);

  /* ---- organic shapes ----
     The lopsided radius that reads as a blob rather than a bubble, and the
     pace the shapes move at. Slow on purpose: motion you notice is motion that
     competes with the text. */
  --blob-a: 58% 42% 47% 53% / 46% 52% 48% 54%;
  --blob-b: 44% 56% 62% 38% / 55% 40% 60% 45%;
  --blob-c: 46% 54% 52% 48% / 52% 46% 54% 48%;
  --drift-slow: 34s;
  --drift-slower: 38s;

  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- 4. RADIUS --------------------------------------------------------
     Taken off the brand sheet: 22 on outer cards, 16 inside them, smaller for
     controls. The icon tile uses 22/96 of its side, which is --radius-tile. */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-pill: 999px;
  --radius-tile: 22.9%;

  /* ---- 5. SHADOW --------------------------------------------------------
     Paper on canvas, not glass on glass. Tinted with the ink so shadows read
     as warm rather than the usual cold grey. */
  --shadow-sm: 0 1px 2px rgba(21, 23, 27, .05);
  --shadow-md: 0 2px 4px rgba(21, 23, 27, .05), 0 4px 12px rgba(21, 23, 27, .06);
  --shadow-lg: 0 8px 28px rgba(21, 23, 27, .12);
  --shadow-focus: 0 0 0 3px rgba(47, 109, 147, .18);

  /* ---- 6. TYPE ----------------------------------------------------------
     Schibsted Grotesk for everything the customer reads; IBM Plex Mono for
     labels, IDs, money columns and anything that should line up. */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  42px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.55;
  --leading-loose: 1.65;

  /* The lockup and display sizes are tracked −3%; body text is not. */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-label:    0.14em;

  /* ---- 7. MOTION --------------------------------------------------------
     Short and unshowy. Anything longer than 240ms starts to feel like waiting. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* Motion is decoration. If the reader has asked the OS to stop it, stop it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   LOCKUP
   The wordmark is rendered as live text next to the SVG mark rather than baked
   into one image. It stays sharp at any size, it is selectable and readable to
   a screen reader, and "Vendra One" in the page is real text for search.
   ========================================================================= */

.v-lockup {
  display: inline-flex;
  align-items: center;
  gap: .31em;                    /* the brand sheet's gap, relative to mark height */
  font-family: var(--font-sans);
  font-size: 32px;               /* drives everything below it */
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  /* The mark's body is currentColor and its dot is this variable, so a variant
     re-colours both by setting two properties instead of shipping another SVG. */
  --lockup-dot: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.v-lockup:hover { text-decoration: none; }

/* Clear space: x = 60% of the mark height, all the way round. */
.v-lockup--padded { padding: .6em; }

.v-lockup .v-mark {
  width: 1.53em;                 /* mark height ÷ wordmark size, from the sheet */
  height: 1.53em;
  flex: none;
  display: block;
}

.v-lockup .v-word { display: inline-flex; gap: .26em; }
.v-lockup .v-word b { font-weight: var(--weight-semi); }
.v-lockup .v-word span {
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

/* Sizes. Below 110px wide the sheet says drop the words and show the mark
   alone — that is what .v-lockup--mark-only is for. */
.v-lockup--sm { font-size: 17px; }
.v-lockup--md { font-size: 25px; }
.v-lockup--lg { font-size: 42px; }
.v-lockup--mark-only .v-word { display: none; }

/* On ink, on the accent, or as a sub-brand (Vendra CRM / Vendra Dial — only the
   master brand carries the accent dot, so the sub-brand drops it to the mark's
   own colour and the product word steps back to mute). */
.v-lockup--negative {
  color: var(--fg-inverse);
  --lockup-dot: var(--brand-accent-light);
}
.v-lockup--negative .v-word span { color: var(--brand-accent-light); }

.v-lockup--on-accent {
  color: var(--fg-on-accent);
  --lockup-dot: rgba(250, 249, 246, .5);
}
.v-lockup--on-accent .v-word span { color: rgba(250, 249, 246, .72); }

.v-lockup--sub { --lockup-dot: var(--surface-raised); }
.v-lockup--sub .v-word span { color: var(--fg-muted); }

/* ============================================================================
   PRIMITIVES
   Small shared pieces so a button looks the same in the portal and the CRM.
   ========================================================================= */

.v-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.v-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.v-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.v-btn--primary { background: var(--color-primary); color: var(--fg-on-accent); }
.v-btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.v-btn--primary:active:not(:disabled) { background: var(--color-primary-active); }
.v-btn--ghost {
  background: var(--surface-raised);
  color: var(--fg);
  border-color: var(--border);
}
.v-btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); }
.v-btn:disabled { opacity: .55; cursor: not-allowed; }
.v-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.v-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.v-badge--ok   { background: var(--color-ok-soft);   color: var(--color-ok); }
.v-badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.v-badge--bad  { background: var(--color-bad-soft);  color: var(--color-bad); }
.v-badge--info { background: var(--color-info-soft); color: var(--color-info); }
.v-badge--mute { background: var(--surface-sunken);  color: var(--fg-muted); }