/* Safety Network — Colors & Type
 * The single source of truth for brand color and typographic tokens.
 * Import this file at the root of any HTML artifact built against the brand.
 */

@font-face {
  font-family: "MomoTrust Display";
  src: url("fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───────────────────────── Brand colors ─────────────────────────
   * Two-color system: deep navy (trust, institution) + gold (value, benefit).
   * Use navy for primary actions, headlines, structure.
   * Use gold sparingly — for accents, value indicators, premium moments.
   */
  --sn-navy:            #00217e;   /* Primary brand */
  --sn-navy-700:        #001a63;   /* Hover/press for navy surfaces */
  --sn-navy-900:        #000f3d;   /* Deepest navy, body of dark UI */
  --sn-navy-100:        #e6eaf5;   /* Soft navy tint — selected/info backgrounds */
  --sn-navy-050:        #f3f5fb;

  --sn-gold:            #c18602;   /* Primary accent / benefit color */
  --sn-gold-700:        #9b6c00;   /* Hover/press for gold */
  --sn-gold-100:        #fbf1d9;   /* Soft gold tint */
  --sn-gold-050:        #fdf8ec;

  /* Text */
  --sn-text:            #484545;   /* Body text */
  --sn-text-strong:     #1f1d1d;   /* Headlines on light surfaces */
  --sn-text-muted:      #7a7676;   /* Secondary text, captions */
  --sn-text-faint:      #a8a4a4;   /* Tertiary / disabled */
  --sn-text-on-navy:    #ffffff;
  --sn-text-on-gold:    #ffffff;

  /* Surfaces */
  --sn-app-bg:          #dadada;   /* App chrome / window background */
  --sn-surface:         #ffffff;   /* Cards, panels, modals */
  --sn-surface-alt:     #f3f3f3;   /* Subdued surface, alternating rows */
  --sn-surface-sunken:  #ececec;   /* Inputs at rest, code blocks */
  --sn-divider:         #d6d4d4;
  --sn-border:          #c9c7c7;
  --sn-border-strong:   #9d9a9a;

  /* Semantic */
  --sn-success:         #1f7a4d;
  --sn-success-100:     #e1f1e9;
  --sn-danger:          #b3261e;
  --sn-danger-100:      #f8e2e0;
  --sn-warning:         #c18602;   /* Reuses gold */
  --sn-warning-100:     #fbf1d9;
  --sn-info:            #00217e;   /* Reuses navy */
  --sn-info-100:        #e6eaf5;

  /* ───────────────────────── Typography ───────────────────────── */
  --sn-font-display: "MomoTrust Display", "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sn-font-sans:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sn-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — pixel values for clarity, line-heights tuned for credible feel. */
  --sn-size-display:   64px;
  --sn-size-h1:        44px;
  --sn-size-h2:        32px;
  --sn-size-h3:        24px;
  --sn-size-h4:        20px;
  --sn-size-body-lg:   18px;
  --sn-size-body:      16px;
  --sn-size-small:     14px;
  --sn-size-caption:   12px;
  --sn-size-eyebrow:   12px;

  --sn-leading-display: 1.05;
  --sn-leading-tight:   1.2;
  --sn-leading-snug:    1.35;
  --sn-leading-normal:  1.55;
  --sn-leading-loose:   1.7;

  --sn-tracking-tight:   -0.01em;
  --sn-tracking-normal:  0em;
  --sn-tracking-eyebrow: 0.12em;

  /* ───────────────────────── Spacing & radii ───────────────────── */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-5: 24px;
  --sn-space-6: 32px;
  --sn-space-7: 48px;
  --sn-space-8: 64px;
  --sn-space-9: 96px;

  --sn-radius-sm:  4px;
  --sn-radius:     8px;
  --sn-radius-lg:  12px;
  --sn-radius-xl:  20px;
  --sn-radius-pill: 999px;

  /* Shadows — credible/institutional, not floaty. */
  --sn-shadow-sm: 0 1px 2px rgba(0, 15, 61, 0.06), 0 1px 1px rgba(0, 15, 61, 0.04);
  --sn-shadow:    0 4px 12px rgba(0, 15, 61, 0.08), 0 1px 2px rgba(0, 15, 61, 0.04);
  --sn-shadow-lg: 0 12px 32px rgba(0, 15, 61, 0.12), 0 2px 6px rgba(0, 15, 61, 0.06);
  --sn-shadow-focus: 0 0 0 3px rgba(0, 33, 126, 0.25);
}

/* ───────────────────────── Semantic element styles ───────────────────────
 * Drop-in defaults so writing semantic HTML on a Safety Network page already
 * looks like Safety Network. Override per surface as needed.
 */

html, body {
  font-family: var(--sn-font-sans);
  font-size: var(--sn-size-body);
  line-height: var(--sn-leading-normal);
  color: var(--sn-text);
  background: var(--sn-app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--sn-font-display);
  color: var(--sn-text-strong);
  font-weight: 400;        /* MomoTrust Display is heavy by default */
  letter-spacing: var(--sn-tracking-tight);
  line-height: var(--sn-leading-tight);
  margin: 0;
}

h1 { font-size: var(--sn-size-h1); line-height: var(--sn-leading-display); }
h2 { font-size: var(--sn-size-h2); }
h3 { font-size: var(--sn-size-h3); }
h4 { font-size: var(--sn-size-h4); }

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

small, .sn-caption {
  font-size: var(--sn-size-caption);
  color: var(--sn-text-muted);
}

.sn-eyebrow {
  font-family: var(--sn-font-sans);
  font-weight: 600;
  font-size: var(--sn-size-eyebrow);
  letter-spacing: var(--sn-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sn-gold);
}

code, kbd, pre, .sn-mono {
  font-family: var(--sn-font-mono);
  font-size: 0.92em;
}

a {
  color: var(--sn-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--sn-navy-700); }