/* =========================================================
   Allontas — Colors & Type
   Single source of truth for tokens used across mocks,
   slides, and UI kits. Mirrors react/globals.css from the
   www-allontas-com-design export, plus a few semantic vars.
   ========================================================= */

/* ---------- Fonts (local woff2 — no Google CDN) ---------- */
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Neutrals ---------- */
  --color-white:              #ffffff;
  --color-neutral-lightest:   #f2f2f2;
  --color-neutral-lighter:    #d8d8d8;
  --color-neutral-light:      #b2b2b2;
  --color-neutral:            #7f7f7f;
  --color-neutral-dark:       #4c4c4c;
  --color-neutral-darker:     #191919;
  --color-neutral-darkest:    #000000;

  /* ---------- Blue Zodiac (primary) ---------- */
  --color-blue-zodiac-lightest: #e7e9eb;
  --color-blue-zodiac-lighter:  #cfd3d8;
  --color-blue-zodiac-light:    #576679;
  --color-blue-zodiac:          #0f2540;
  --color-blue-zodiac-dark:     #0c1d33;
  --color-blue-zodiac-darker:   #060e19;
  --color-blue-zodiac-darkest:  #040b13;

  /* ---------- Downy (teal / positive) ---------- */
  --color-downy-lightest: #f0f9f8;
  --color-downy-lighter:  #e1f4f2;
  --color-downy-light:    #97d9d2;
  --color-downy:          #6bc9c0;
  --color-downy-dark:     #55a099;
  --color-downy-darker:   #2a504c;
  --color-downy-darkest:  #203c39;

  /* ---------- Tan Hide (warm accent / CTA) ---------- */
  --color-tan-hide-lightest: #fef5ec;
  --color-tan-hide-lighter:  #fdebda;
  --color-tan-hide-light:    #f8bb7e;
  --color-tan-hide:          #f59e47;
  --color-tan-hide-dark:     #c47e38;
  --color-tan-hide-darker:   #623f1c;
  --color-tan-hide-darkest:  #492f15;

  /* ---------- Mystic (cool grey) ---------- */
  --color-mystic-lightest: #fcfcfd;
  --color-mystic-lighter:  #f9fafb;
  --color-mystic-light:    #eaeef3;
  --color-mystic:          #e1e7ee;
  --color-mystic-dark:     #b4b8be;
  --color-mystic-darker:   #5a5c5f;
  --color-mystic-darkest:  #434547;

  /* ---------- Affair (purple, decorative) ---------- */
  --color-affair-lightest: #f0ebf3;
  --color-affair-lighter:  #e1d8e8;
  --color-affair-light:    #9678b0;
  --color-affair:          #6a3f8f;
  --color-affair-dark:     #543272;
  --color-affair-darker:   #2a1939;
  --color-affair-darkest:  #1f122a;

  /* ---------- App-only semantic colors (mobile UI kit) ---------- */
  --color-positive:           #2EBE7F; /* income, "on track", "lowest price" */
  --color-positive-soft:      #E6F7EE;
  --color-negative:           #E25E5E; /* expense, over plan, delete */
  --color-negative-soft:      #FDECEC;
  --color-warning:            #F59E47; /* (= tan hide) flag/uncertain */

  /* Store accent tints used in price-compare lists */
  --color-store-walmart:      #0071CE;
  --color-store-kroger:       #1F4E9E;
  --color-store-publix:       #1F7A3A;

  /* ---------- Typography ---------- */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Base sizes match Relume export — desktop scale. */
  --text-h1:      4.5rem;   /* 72px */
  --text-h2:      3.25rem;  /* 52px */
  --text-h3:      2.75rem;  /* 44px */
  --text-h4:      2.25rem;  /* 36px */
  --text-h5:      1.75rem;  /* 28px */
  --text-h6:      1.375rem; /* 22px */
  --text-large:   1.375rem; /* 22px */
  --text-medium:  1.125rem; /* 18px */
  --text-regular: 1rem;     /* 16px */
  --text-small:   0.875rem; /* 14px */
  --text-tiny:    0.75rem;  /* 12px */

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-body:  1.6;

  /* ---------- Radii ---------- */
  --radius-button:   0.75rem; /* 12px — bubble UI */
  --radius-card:     1rem;    /* 16px — edgy cards */
  --radius-form:     0.75rem;
  --radius-badge:    0.75rem;
  --radius-image:    1rem;
  --radius-checkbox: 0.25rem;
  --radius-pill:     999px;

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Borders ---------- */
  --border-width-card: 2px;
  --border-width-button: 2px;

  /* ---------- Shadows — bubble "stamped" style ---------- */
  /* The signature button look: 3px solid colored drop shadow that
     disappears on hover as the element translates 3px down. */
  --shadow-stamp-dark:    0 3px 0 0 var(--color-blue-zodiac-dark);
  --shadow-stamp-light:   0 3px 0 0 var(--color-neutral-lighter);
  --shadow-stamp-darkest: 0 3px 0 0 var(--color-neutral-darkest);
  --shadow-stamp-white:   0 3px 0 0 var(--color-white);

  /* Soft elevation for in-app cards (mobile UI kit) */
  --shadow-card-soft: 0 2px 8px rgba(15, 37, 64, 0.06),
                      0 1px 2px rgba(15, 37, 64, 0.04);
  --shadow-card-pop:  0 10px 30px rgba(15, 37, 64, 0.10),
                      0 4px 12px rgba(15, 37, 64, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;

  /* ---------- Semantic scheme defaults (Scheme 1 / white) ---------- */
  --color-scheme-background: var(--color-white);
  --color-scheme-foreground: var(--color-white);
  --color-scheme-text:       var(--color-neutral-darkest);
  --color-scheme-border:     var(--color-neutral-darkest);
  --color-scheme-btn-text:   var(--color-white);
  --color-scheme-accent:     var(--color-blue-zodiac);
}

/* ---------- Section schemes — apply via class on a wrapper ---------- */
.scheme-1 { --color-scheme-background: var(--color-white);
            --color-scheme-foreground: var(--color-white);
            --color-scheme-text:       var(--color-neutral-darkest);
            --color-scheme-border:     var(--color-neutral-darkest);
            --color-scheme-btn-text:   var(--color-white);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }
.scheme-2 { --color-scheme-background: var(--color-neutral-lightest);
            --color-scheme-foreground: var(--color-neutral-lightest);
            --color-scheme-text:       var(--color-neutral-darkest);
            --color-scheme-border:     var(--color-neutral-darkest);
            --color-scheme-btn-text:   var(--color-white);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }
.scheme-3 { --color-scheme-background: var(--color-blue-zodiac-dark);
            --color-scheme-foreground: var(--color-blue-zodiac-dark);
            --color-scheme-text:       var(--color-white);
            --color-scheme-border:     var(--color-white);
            --color-scheme-btn-text:   var(--color-blue-zodiac-dark);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }
.scheme-4 { --color-scheme-background: var(--color-downy-lightest);
            --color-scheme-foreground: var(--color-downy-lightest);
            --color-scheme-text:       var(--color-neutral-darkest);
            --color-scheme-border:     var(--color-neutral-darkest);
            --color-scheme-btn-text:   var(--color-white);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }
.scheme-5 { --color-scheme-background: var(--color-downy-lighter);
            --color-scheme-foreground: var(--color-downy-lighter);
            --color-scheme-text:       var(--color-neutral-darkest);
            --color-scheme-border:     var(--color-neutral-darkest);
            --color-scheme-btn-text:   var(--color-white);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }
.scheme-6 { --color-scheme-background: var(--color-neutral-lighter);
            --color-scheme-foreground: var(--color-neutral-lighter);
            --color-scheme-text:       var(--color-neutral-darkest);
            --color-scheme-border:     var(--color-neutral-darkest);
            --color-scheme-btn-text:   var(--color-white);
            background-color: var(--color-scheme-background);
            color: var(--color-scheme-text); }

/* ---------- Element defaults ---------- */
html, body {
  font-family: var(--font-body);
  color: var(--color-neutral-darkest);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  margin: 0;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
h5 { font-size: var(--text-h5); line-height: var(--leading-snug); }
h6 { font-size: var(--text-h6); line-height: var(--leading-snug); }
p  { font-size: var(--text-medium); line-height: var(--leading-body); margin: 0; }
small { font-size: var(--text-small); }

/* ---------- Component primitives ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-regular);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-button);
  border: var(--border-width-button) solid var(--color-blue-zodiac-dark);
  background: var(--color-blue-zodiac);
  color: var(--color-white);
  box-shadow: var(--shadow-stamp-dark);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background-color var(--duration-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(3px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--color-tan-hide); outline-offset: 3px; }

.btn--secondary {
  background: transparent;
  color: var(--color-neutral-darkest);
  border-color: var(--color-neutral-darkest);
  box-shadow: var(--shadow-stamp-darkest);
}
.btn--alternate {        /* on dark sections */
  background: var(--color-white);
  color: var(--color-neutral-darkest);
  border-color: var(--color-neutral-lighter);
  box-shadow: var(--shadow-stamp-light);
}
.btn--secondary-alt {    /* secondary on dark sections */
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--shadow-stamp-white);
}
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--text-small); }
.btn--lg { padding: 1rem 1.75rem; font-size: var(--text-medium); }

.input {
  font-family: var(--font-body);
  font-size: var(--text-regular);
  padding: 0.625rem 0.875rem;
  min-height: 2.75rem;
  border: 2px solid var(--color-neutral-darkest);
  border-radius: var(--radius-form);
  background: transparent;
  color: inherit;
  width: 100%;
  transition: background-color var(--duration-fast);
}
.input::placeholder { color: rgba(0,0,0,0.4); }
.input:hover { background: rgba(0,0,0,0.04); }
.input:focus { outline: 2px solid var(--color-tan-hide); outline-offset: 2px; }

.card {
  border: var(--border-width-card) solid var(--color-scheme-border, var(--color-neutral-darkest));
  background: var(--color-scheme-foreground, var(--color-white));
  color: var(--color-scheme-text, var(--color-neutral-darkest));
  border-radius: var(--radius-card);
  overflow: hidden;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-badge);
  border: 2px solid var(--color-neutral-darkest);
  font-size: var(--text-tiny);
  font-weight: 500;
  line-height: 1;
  background: transparent;
}
.badge--positive { background: var(--color-positive-soft); border-color: var(--color-positive); color: var(--color-downy-darkest); }
.badge--warn     { background: var(--color-tan-hide-lighter); border-color: var(--color-tan-hide); color: var(--color-tan-hide-darker); }
.badge--soft     { background: var(--color-blue-zodiac-lightest); border-color: var(--color-blue-zodiac); color: var(--color-blue-zodiac); }

.container {
  margin-inline: auto;
  max-width: 80rem;     /* xxl */
  padding-inline: 5%;
}
.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 6rem; } }
@media (min-width: 992px) { .section { padding-block: 7rem; } }