/* Assembled by the docs build from packages/ui/design-system/tokens (colors, typography, spacing, effects). */
/* ============================================================
   Emailmovers, Colour tokens
   Navy carries the design. Mint is a bright accent only.
   ============================================================ */
:root {
  /* ---- Brand base ---- */
  --em-navy:        #36325E;  /* Primary, headings, body, key surfaces */
  --em-mint:        #6EEDC9;  /* Accent, buttons, highlights, callouts  */
  --em-ink:         #1E1E2D;  /* Darkest text / deep surfaces            */
  --em-cloud:       #F4F5F7;  /* Light app/section background            */
  --em-white:       #FFFFFF;

  /* ---- Navy scale (tints + shades of primary) ---- */
  --em-navy-900:    #16142B;
  --em-navy-800:    #221F40;
  --em-navy-700:    #2B284D;
  --em-navy-600:    #36325E;  /* = brand navy */
  --em-navy-500:    #494579;
  --em-navy-400:    #6B679A;
  --em-navy-300:    #9692BC;
  --em-navy-200:    #C3C0DA;
  --em-navy-100:    #E4E2EF;
  --em-navy-50:     #F2F1F8;

  /* ---- Mint scale (accent) ---- */
  --em-mint-700:    #1FB892;
  --em-mint-600:    #38D2AC;
  --em-mint-500:    #6EEDC9;  /* = brand mint */
  --em-mint-400:    #92F2D6;
  --em-mint-300:    #B6F7E3;
  --em-mint-200:    #D6FBF0;
  --em-mint-100:    #ECFEF9;

  /* ---- Neutral / grey scale ---- */
  --em-grey-900:    #1E1E2D;  /* = ink */
  --em-grey-800:    #2E2E40;
  --em-grey-700:    #44475A;
  --em-grey-600:    #5C5F72;
  --em-grey-500:    #797C8E;
  --em-grey-400:    #A0A3B2;
  --em-grey-300:    #C7C9D4;
  --em-grey-200:    #E2E4EC;
  --em-grey-150:    #ECEDF2;
  --em-grey-100:    #F4F5F7;  /* = cloud */
  --em-grey-50:     #FAFBFC;

  /* ---- Semantic status ---- */
  --em-success:     #1FB892;
  --em-success-bg:  #E7FAF3;
  --em-warning:     #E8A33D;
  --em-warning-bg:  #FCF2E1;
  --em-danger:      #E5564E;
  --em-danger-bg:   #FCE9E8;
  --em-info:        #4F6BD6;
  --em-info-bg:     #E9EDFB;

  /* ============================================================
     Semantic aliases, reference these in components
     ============================================================ */
  --color-bg:            var(--em-cloud);
  --color-surface:       var(--em-white);
  --color-surface-sunk:  var(--em-grey-50);
  --color-surface-navy:  var(--em-navy-600);
  --color-surface-ink:   var(--em-ink);

  --text-strong:   var(--em-ink);      /* primary headings */
  --text-body:     var(--em-navy-700); /* default copy */
  --text-muted:    var(--em-grey-500); /* secondary / captions */
  --text-faint:    var(--em-grey-400); /* placeholders, disabled */
  --text-on-navy:  var(--em-white);
  --text-on-mint:  var(--em-ink);
  --text-link:     var(--em-navy-600);

  --accent:        var(--em-mint-500);
  --accent-strong: var(--em-mint-700); /* mint text on light needs this for contrast */

  --border-subtle: var(--em-grey-200);
  --border-default:var(--em-grey-300);
  --border-strong: var(--em-navy-600);
  --border-focus:  var(--em-navy-500);

  --color-success: var(--em-success);
  --color-warning: var(--em-warning);
  --color-danger:  var(--em-danger);
  --color-info:    var(--em-info);
}

/* ============================================================
   Emailmovers, Typography tokens
   Red Hat Display throughout.
   ============================================================ */
:root {
  --font-sans: "Red Hat Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* ---- Type scale (px-based, 1.25 major-third-ish, tuned) ---- */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); /* @kind other */
  --fs-h1:       3rem;     /* 48 */
  --fs-h2:       2.25rem;  /* 36 */
  --fs-h3:       1.75rem;  /* 28 */
  --fs-h4:       1.375rem; /* 22 */
  --fs-h5:       1.125rem; /* 18 */
  --fs-lead:     1.25rem;  /* 20, intro paragraphs */
  --fs-body:     1rem;     /* 16 */
  --fs-sm:       0.875rem; /* 14 */
  --fs-xs:       0.75rem;  /* 12, labels, captions */

  /* ---- Line heights ---- */
  --lh-tight:    1.08; /* @kind font */
  --lh-snug:     1.25; /* @kind font */
  --lh-normal:   1.5; /* @kind font */
  --lh-relaxed:  1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:    -0.02em; /* @kind font */
  --ls-snug:     -0.01em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-wide:     0.04em; /* @kind font */
  --ls-wider:    0.12em; /* @kind font */
}

/* ---- Base element defaults ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Emailmovers, Spacing, radius, sizing tokens
   8px base grid.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Radii, soft, friendly but not pill-everything ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 4vw, 2.5rem); /* @kind other */

  /* ---- Control sizing ---- */
  --control-h-sm:  34px;
  --control-h-md:  44px;
  --control-h-lg:  54px;
}

/* ============================================================
   Emailmovers, Elevation, shadows, motion
   Shadows are soft and navy-tinted, never pure black.
   ============================================================ */
:root {
  /* ---- Shadows (navy-tinted, low spread) ---- */
  --shadow-xs:  0 1px 2px rgba(30, 30, 45, 0.06);
  --shadow-sm:  0 1px 3px rgba(30, 30, 45, 0.08), 0 1px 2px rgba(30, 30, 45, 0.04);
  --shadow-md:  0 4px 12px rgba(30, 30, 45, 0.08), 0 2px 4px rgba(30, 30, 45, 0.04);
  --shadow-lg:  0 12px 28px rgba(30, 30, 45, 0.12), 0 4px 8px rgba(30, 30, 45, 0.05);
  --shadow-xl:  0 24px 56px rgba(30, 30, 45, 0.16), 0 8px 16px rgba(30, 30, 45, 0.06);

  /* Mint glow, for the rare elevated accent element */
  --shadow-mint: 0 10px 30px rgba(56, 210, 172, 0.35);

  /* Focus ring */
  --ring-navy: 0 0 0 3px rgba(73, 69, 121, 0.35);
  --ring-mint: 0 0 0 3px rgba(110, 237, 201, 0.55);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}