/* ============================================================
   TASTE COMPASS — design tokens
   The single source of truth for colour, radius and elevation.
   Every view imports this file; no view redefines these values.

   Two surface sets, one brand:
     · dark   — navy ground, sage accent  (marketing site, taste journey, members app)
     · light  — cream ground, moss accent (login, account, kit registration, onboarding)
   ============================================================ */

:root {
  /* ---------- Brand core ---------- */
  --navy:        #002B45;
  --navy-deep:   #001E32;
  --navy-deeper: #001523;
  --navy-mid:    #003A5C;
  --navy-panel:  #04263b;
  --sage:        #9BB8A6;
  --sage-light:  #cfe0d6;
  --sage-dark:   #6a9278;
  --amber:       #E8B86A;
  --cream:       #F7F6F2;
  --stone:       #E8E3DC;
  --ink:         #2E3A3F;

  /* Sage is the accent on navy; on a light ground it fails contrast,
     so the same hue family darkens to moss for text and filled buttons. */
  --moss:        #2F6F5A;
  --moss-deep:   #1F4E3E;
  --moss-tint:   rgba(47,111,90,.10);

  /* ---------- Text & lines on dark ---------- */
  --tx:          rgba(255,255,255,.92);
  --tx-soft:     rgba(255,255,255,.58);
  --tx-faint:    rgba(255,255,255,.36);
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.16);

  /* ---------- Radius / elevation / motion ---------- */
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow:    0 18px 50px rgba(0,0,0,.35);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.45);
  --ease:  cubic-bezier(.22,1,.36,1);
  --maxw:  1240px;

  /* ---------- Light surfaces ----------
     Consumed by the auth, kit-registration and onboarding views under the
     --tc-* names those views already use, so the ground under a customer
     stays the same brand from the homepage through to the members area. */
  --tc-bg:           var(--cream);
  --tc-card:         #ffffff;
  --tc-input-bg:     #ffffff;
  --tc-text:         var(--ink);
  --tc-heading:      var(--navy);
  --tc-muted:        #6b7f88;
  --tc-border:       rgba(0,43,69,.14);
  --tc-border-hover: rgba(0,43,69,.24);
  --tc-border-focus: rgba(47,111,90,.55);
  --tc-ring:         0 0 0 .22rem rgba(47,111,90,.18);

  /* One primary. Flat moss, no gradients. */
  --tc-accent:        var(--moss);
  --tc-accent-strong: var(--moss-deep);
  --tc-link:          var(--moss);

  /* Feedback */
  --tc-error:    #C0433A;
  --tc-error-bg: rgba(192,67,58,.10);
  --tc-success:  var(--moss);

  --tc-shadow:    0 26px 70px rgba(0,43,69,.10);
  --tc-shadow-sm: 0 10px 28px rgba(0,43,69,.08);

  /* Radius scale for light surfaces — three steps, not nine. */
  --tc-radius-lg: 24px;
  --tc-radius-md: 16px;
  --tc-radius-sm: 12px;

  /* The atmospheric wash behind light-surface cards, in brand hues. */
  --tc-page-wash:
    radial-gradient(900px 600px at 10% 0%, rgba(0,43,69,.07), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(155,184,166,.20), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--tc-bg) 60%, #ffffff 100%);
}