/* =========================================================
   Deefa Design System — Colors & Type
   For the love of Dog
   =========================================================
   BRAND RULES (do not break):
   1. The line "For the love of Dog" is NEVER followed by a
      full stop and is ALWAYS set in Fields (the bolder serif),
      not Fields Display, not the sans. Use the .for-love-of-dog
      class — it locks the family, weight, and removes any
      trailing punctuation drift.
   2. White is the canonical page background. Deefa Blue and
      Deefa Yellow are reserved for the Curve device and their
      named tints (--deefa-blue-tint / --deefa-yellow-tint).
      Never use the saturated blue or yellow as a section fill
      behind copy.
   =========================================================
   NOTE on fonts: the supplied Fields/Fields Display files are
   Fontspring DEMO files (free, non-licensed). They render
   beautifully in the browser but are not for production. Ask
   the user to drop in licensed copies under fonts/ keeping
   the same filenames.
   ========================================================= */

/* ---------- Fields (display / brand voice) ---------- */
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields Display";
  src: url("fonts/FieldsDisplay-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fields";
  src: url("fonts/Fields-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Google Sans Flex (UI / body) ---------- */
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ===== Brand colors (from Brand Book v1.0, p.27) ===== */
  --deefa-navy:        #001851;   /* Deefa Navy   — primary surface, body copy */
  --deefa-blue:        #165CFF;   /* Trusted Blue — primary action / display */
  --deefa-yellow:      #FFCD38;   /* Deefa Yellow — accent, pills, highlights */
  --deefa-white:       #FFFFFF;

  --deefa-blue-tint:   #ECF8FF;   /* Trusted Blue Tint 2 — blue-bg sections */
  --deefa-yellow-tint: #FFF9E7;   /* Yellow Tint 2 — warm cream sections */
  --deefa-cool-gray:   #E5E7ED;   /* Cool Gray — dividers, low-emphasis fills */

  /* The brandbook defines exactly the seven colors above. No tints, shades,
     or ramps beyond these are part of the system. UI states (hover, disabled,
     etc.) should be expressed through opacity, the cool-gray, or the
     existing tints — not by inventing new hues. */

  /* ===== Semantic tokens ===== */
  --bg:           var(--deefa-white);
  --bg-soft:      var(--deefa-blue-tint);     /* hero washes, cards */
  --bg-warm:      var(--deefa-yellow-tint);   /* warm sections */
  --bg-inverse:   var(--deefa-navy);          /* dark sections */
  --bg-muted:     var(--deefa-blue-tint);

  --fg:           var(--deefa-navy);          /* primary text */
  --fg-muted:     #4A5778;                    /* secondary text on light */
  --fg-subtle:    #6E7A95;                    /* tertiary, captions */
  --fg-on-dark:   var(--deefa-white);
  --fg-on-dark-muted: #B7C0DA;

  --border:       var(--deefa-cool-gray);
  --border-strong:var(--deefa-cool-gray);
  --divider:      var(--deefa-cool-gray);

  --accent:       var(--deefa-blue);          /* primary action */
  --accent-fg:    var(--deefa-white);
  --accent-soft:  var(--deefa-blue-tint);

  --highlight:    var(--deefa-yellow);        /* yellow pills / underlines */
  --highlight-fg: var(--deefa-navy);
  --highlight-soft: var(--deefa-yellow-tint);

  /* No semantic status colors — Deefa speaks in plain language and uses
     navy / blue / yellow only. For success states use yellow tint; for
     errors use navy on yellow tint or red copy without a brand color. */

  /* ===== Type families ===== */
  --font-display: "Fields Display", "Fields", "Source Serif Pro", Georgia, serif;
  --font-serif:   "Fields", "Source Serif Pro", Georgia, serif;
  --font-sans:    "Google Sans Flex", "Google Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== Type scale (rem) =====
     Display = Fields Display, never ALL CAPS.
     Body    = Google Sans Flex.
     Numbers tuned for marketing surfaces; UI scale is tighter (see --ui-*) */
  --fs-display-1: 5.5rem;   /* 88 — hero on splash */
  --fs-display-2: 4.5rem;   /* 72 — page hero */
  --fs-display-3: 3.5rem;   /* 56 — section hero */
  --fs-h1:        3rem;     /* 48 */
  --fs-h2:        2.25rem;  /* 36 */
  --fs-h3:        1.625rem; /* 26 */
  --fs-h4:        1.25rem;  /* 20 */
  --fs-lead:      1.25rem;  /* 20 — large body / lede */
  --fs-body:      1rem;     /* 16 */
  --fs-small:     0.875rem; /* 14 */
  --fs-caption:   0.75rem;  /* 12 — eyebrow, meta */

  --lh-tight:     1.04;
  --lh-snug:      1.15;
  --lh-display:   1.06;
  --lh-heading:   1.2;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.12em;

  /* ===== Spacing (4px base) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== Radii =====
     Deefa skews soft & rounded — capsule pills for buttons / chips,
     generous rounding on cards. Numbers reflect the website ref. */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ===== Shadows =====
     Soft, low-contrast. Avoid heavy drop shadows; lean on tinted bg. */
  --shadow-xs: 0 1px 2px rgba(0, 24, 81, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 24, 81, 0.06), 0 1px 2px rgba(0, 24, 81, 0.04);
  --shadow-md: 0 6px 16px rgba(0, 24, 81, 0.08), 0 2px 4px rgba(0, 24, 81, 0.04);
  --shadow-lg: 0 18px 40px rgba(0, 24, 81, 0.10), 0 4px 10px rgba(0, 24, 81, 0.05);
  --shadow-yellow: 0 12px 28px rgba(255, 205, 56, 0.45);
  --shadow-blue:   0 12px 28px rgba(22, 92, 255, 0.28);
  --ring-focus: 0 0 0 3px rgba(22, 92, 255, 0.32);

  /* ===== Motion =====
     Calm. No bounces, no springs. Quick, confident eases. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ===== Layout ===== */
  --container:    1200px;
  --container-sm: 880px;
  --gutter:       24px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.display-1, .display-2, .display-3,
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.display-1 { font-size: var(--fs-display-1); font-weight: 400; line-height: var(--lh-display); }
.display-2 { font-size: var(--fs-display-2); font-weight: 400; line-height: var(--lh-display); }
.display-3 { font-size: var(--fs-display-3); font-weight: 400; line-height: var(--lh-display); }

h1, .h1 { font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-heading); font-family: var(--font-sans); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-heading); font-family: var(--font-sans); letter-spacing: -0.005em; color: var(--fg); }

.lead, p.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-muted); text-wrap: pretty; }
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; }
.small  { font-size: var(--fs-small); line-height: 1.5; }
.caption{ font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-subtle); }

/* Eyebrow — small caps style label, often inside a yellow pill on this brand */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

/* Yellow pill eyebrow — recurring brand device (see Brand Book section labels) */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--deefa-yellow);
  color: var(--deefa-navy);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Display accent — second clause of a 2-line headline reads in Trusted Blue */
.display-accent { color: var(--deefa-blue); }

/* ---------- The line ----------
   "For the love of Dog" — brand signature.
   Always Fields (serif), bold weight, never a full stop.
   Use this class anywhere the line appears so the rule is
   enforced by the system, not by memory. */
.for-love-of-dog {
  font-family: var(--font-serif);   /* Fields, NOT Fields Display */
  font-weight: 700;
  letter-spacing: 0;
}
.for-love-of-dog::after { content: none !important; }

a {
  color: var(--deefa-blue);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }

::selection { background: var(--deefa-yellow); color: var(--deefa-navy); }

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 4px;
}