/* ==========================================================================
   SANDIVERS — theme + UI primitives
   Generated from brand/design-tokens.json. This is the single source of truth
   for the website and the admin area; the native app mirrors the same tokens.

   Rule: no hard-coded colours, radii, shadows or type sizes outside this file.
   ========================================================================== */

/* --- Nunito, self-hosted -------------------------------------------------
   Deliberately NOT loaded from Google Fonts: that ships every visitor's IP to
   Google, which German courts have ruled a GDPR breach. Same typeface, served
   from our own origin. ------------------------------------------------------ */
/* latin-ext MUST come first: it carries the Romanian ă â î ș ț. Without it the
   browser silently falls back for those glyphs and diacritics render in a
   different typeface mid-word. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;                 /* variable font: one file, all weights */
  font-display: swap;
  src: url('/static/fonts/nunito-latin-ext.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/nunito-latin.woff2') format('woff2');
  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 {
  /* Core palette */
  --sv-cream:        #F7F3EC;
  --sv-dune:         #E9DBC4;
  --sv-sand:         #D7C09A;
  --sv-terracotta:   #E08C6E;
  --sv-sage:         #A9B79B;
  --sv-blue:         #A7BDCC;
  --sv-brown:        #8E6E53;

  /* Accessible production shades — the pastels above fail contrast for text */
  --sv-ink:          #46362B;
  --sv-deep-brown:   #6B4F3A;
  --sv-action:       #B85535;
  --sv-action-hover: #9E472B;
  --sv-deep-sage:    #5E7355;
  --sv-deep-blue:    #4F6F83;

  /* Semantic */
  --sv-bg:            var(--sv-cream);
  --sv-surface:       #FFFFFF;
  --sv-surface-sand:  #F1E6D4;
  --sv-surface-muted: var(--sv-dune);
  --sv-text:          var(--sv-ink);
  --sv-text-2:        var(--sv-deep-brown);
  --sv-text-muted:    #7A685A;
  --sv-border:        #DDC9AA;
  --sv-border-subtle: #EDE1D0;
  --sv-focus:         var(--sv-deep-blue);
  --sv-success:       var(--sv-deep-sage);
  --sv-warning:       #9A6524;
  --sv-error:         #A63D32;
  --sv-info:          var(--sv-deep-blue);

  /* Type */
  --sv-font: 'Nunito', 'Arial Rounded MT Bold', system-ui, -apple-system, sans-serif;

  /* Radii — generous and soft; never sharp */
  --sv-r-sm: .75rem;
  --sv-r-md: 1rem;
  --sv-r-lg: 1.5rem;
  --sv-r-xl: 2rem;
  --sv-r-2xl: 3rem;
  --sv-r-pill: 999px;

  /* Shadows — warm brown, never neutral grey */
  --sv-sh-sm: 0 4px 14px rgba(107,79,58,.08);
  --sv-sh-md: 0 12px 30px -8px rgba(107,79,58,.12);
  --sv-sh-lg: 0 24px 60px -16px rgba(107,79,58,.14);

  /* Sizing */
  --sv-touch: 44px;
  --sv-btn-h: 52px;
  --sv-input-h: 48px;
  --sv-header-h: 76px;
  --sv-content-max: 1280px;

  /* Motion */
  --sv-fast: 150ms;
  --sv-normal: 250ms;
  --sv-ease: cubic-bezier(.2,.8,.2,1);
  --sv-ease-gentle: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }

html {
  color: var(--sv-text);
  background: var(--sv-bg);
  /* Stop iOS inflating text when a phone is rotated to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;              /* disabled again under reduced-motion */
}

body {
  margin: 0;
  font-family: var(--sv-font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Faint warm bloom, top-left, per the brand's "warm Scandinavian" direction */
  background:
    radial-gradient(circle at 12% 8%, rgba(215,192,154,.18), transparent 24rem),
    var(--sv-bg);
  min-height: 100vh;
  min-height: 100dvh;                   /* avoids the iOS URL-bar height jump */
}

/* Anything linked to by a fragment must clear the sticky header, or the heading
   lands underneath it. Applies site-wide so new pages get it for free. */
[id] { scroll-margin-top: calc(var(--sv-header-h) + 1rem); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--sv-text);
}

p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

/* 20px gutters on mobile, 48px from tablet up — brand/ui-components.md §2. */
.sv-wrap {
  width: min(calc(100% - 2.5rem), var(--sv-content-max));
  margin-inline: auto;
}
@media (min-width: 780px) {
  .sv-wrap { width: min(calc(100% - 6rem), var(--sv-content-max)); }
}

/* --- Eyebrow / label ----------------------------------------------------- */
.sv-kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-deep-brown);
}

/* --- Buttons ------------------------------------------------------------- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--sv-btn-h);
  padding: 0 1.75rem;
  border: none;
  border-radius: var(--sv-r-pill);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--sv-fast) var(--sv-ease),
              box-shadow var(--sv-fast) var(--sv-ease),
              background-color var(--sv-fast) var(--sv-ease);
}
.sv-btn--primary {
  background: var(--sv-action);
  color: #fff;
  box-shadow: var(--sv-sh-sm);
}
.sv-btn--primary:hover { background: var(--sv-action-hover); transform: translateY(-1px); box-shadow: var(--sv-sh-md); }
.sv-btn--ghost {
  background: transparent;
  color: var(--sv-deep-brown);
  border: 1px solid var(--sv-border);
}
.sv-btn--ghost:hover { background: var(--sv-surface-sand); }
.sv-btn--block { width: 100%; }
.sv-btn:active { transform: translateY(0); }
.sv-btn[disabled] { opacity: .55; cursor: default; transform: none; }
/* A long Romanian label must wrap inside the pill rather than push the page
   sideways — horizontal scroll on a phone is the classic symptom. */
.sv-btn { max-width: 100%; text-align: center; }
@media (max-width: 420px) {
  .sv-btn { padding: 0 1.25rem; font-size: .90625rem; }
}

/* --- Social sign-in buttons --------------------------------------------- */
.sv-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  min-height: var(--sv-btn-h);
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-r-pill);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--sv-text);
  cursor: pointer;
  transition: background var(--sv-fast) var(--sv-ease);
}
.sv-social:hover { background: var(--sv-surface-sand); }

/* --- Inputs -------------------------------------------------------------- */
.sv-field { display: block; margin-bottom: 1rem; }
.sv-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sv-text-2);
}
.sv-input, .sv-select {
  width: 100%;
  min-height: var(--sv-input-h);
  padding: .75rem 1rem;
  font: inherit;
  font-size: 1rem;                      /* 16px minimum stops iOS zoom-on-focus */
  color: var(--sv-text);
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-r-sm);
  transition: border-color var(--sv-fast), box-shadow var(--sv-fast);
}
.sv-input::placeholder { color: var(--sv-text-muted); }
.sv-input:focus, .sv-select:focus, .sv-btn:focus-visible, .sv-social:focus-visible {
  outline: none;
  border-color: var(--sv-focus);
  box-shadow: 0 0 0 3px rgba(79,111,131,.22);
}
.sv-hint { margin-top: .375rem; font-size: .8125rem; color: var(--sv-text-muted); }
.sv-input[aria-invalid="true"] { border-color: var(--sv-error); }

/* Checkbox row */
.sv-check { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; color: var(--sv-text-2); }
.sv-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sv-action); }

/* --- Cards --------------------------------------------------------------- */
.sv-card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-r-lg);
  padding: 1.75rem;
  box-shadow: var(--sv-sh-sm);
}
.sv-card--sand { background: var(--sv-surface-sand); border-color: var(--sv-border); }

/* --- Badges -------------------------------------------------------------- */
.sv-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--sv-r-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.sv-badge--ok    { background: rgba(94,115,85,.14);  color: var(--sv-deep-sage); }
.sv-badge--warn  { background: rgba(154,101,36,.14); color: var(--sv-warning); }
.sv-badge--error { background: rgba(166,61,50,.12);  color: var(--sv-error); }
.sv-badge--info  { background: rgba(79,111,131,.14); color: var(--sv-deep-blue); }

/* --- Alerts -------------------------------------------------------------- */
.sv-alert {
  padding: .8125rem 1rem;
  border-radius: var(--sv-r-sm);
  font-size: .9375rem;
  font-weight: 600;
}
.sv-alert--ok    { background: rgba(94,115,85,.12);  color: var(--sv-deep-sage); }
.sv-alert--error { background: rgba(166,61,50,.10);  color: var(--sv-error); }

/* --- Divider with centred text ------------------------------------------ */
.sv-or {
  display: flex; align-items: center; gap: .875rem;
  margin: 1.25rem 0;
  font-size: .8125rem; color: var(--sv-text-muted);
}
.sv-or::before, .sv-or::after {
  content: ''; flex: 1; height: 1px; background: var(--sv-border-subtle);
}

/* --- Sand wave divider (the brand's primary owned graphic device) -------- */
.sv-wave { display: block; width: 100%; height: auto; }

/* --- Motion: honour the user's preference ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}