/* ==========================================================================
   EGGS Design System — Color + Type + Foundation Tokens
   Haffer Prototypo is the brand face. Three weights are in use:
     • Haffer Display        → oversized standout words inside titles
     • Haffer Concrete       → all titles, topbar, buttons, labels
     • Haffer Concrete Light → body, descriptions, text fields
   No Google Fonts dependency — fonts are self-hosted from /fonts.
   Drop the TTF/WOFF2 files into /fonts using the filenames referenced below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font face declarations — self-hosted, no external dependency
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Haffer Display';
  src: url('./fonts/HafferPrototypo-Display.woff2') format('woff2'),
       url('./fonts/HafferPrototypo-Display.woff')  format('woff'),
       url('./fonts/HafferPrototypo-Display.ttf')   format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer Concrete';
  src: url('./fonts/HafferPrototypo-Concrete.woff2') format('woff2'),
       url('./fonts/HafferPrototypo-Concrete.woff')  format('woff'),
       url('./fonts/HafferPrototypo-Concrete.ttf')   format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer Concrete Light';
  src: url('./fonts/HafferPrototypo-ConcreteLight.woff2') format('woff2'),
       url('./fonts/HafferPrototypo-ConcreteLight.woff')  format('woff'),
       url('./fonts/HafferPrototypo-ConcreteLight.ttf')   format('truetype');
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Type stack ---------------------------------------------------- */
  /* Three brand faces — use the right one for each role.
     Fallbacks are system geometric sans, kept for FOUT before the woff2 loads. */
  --font-display:  'Haffer Display',        ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* standout words in big titles */
  --font-concrete: 'Haffer Concrete',       ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* all titles, topbar, buttons, labels */
  --font-light:    'Haffer Concrete Light', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* body, descriptions, text fields */
  /* Legacy aliases */
  --font-body:     var(--font-light);
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Anchors ------------------------------------------------------- */
  --color-black:       #171717;   /* not pure #000; softer neutral */
  --color-pure-black:  #000000;
  --color-white:       #ffffff;
  --color-warm-white:  #f5f0e6;   /* THE brand background */

  /* ---- Primary anchors are the brand foundation -------------------- */
  /* Yellow (#F5C801) was previously a primary accent. PAUSED for now —
     the system runs on Black + White + Arena. Mission colors (Human red,
     Industrial green, Urban purple) are also PAUSED. Their tokens are kept
     below in a deprecated block so they can return without code churn. */

  /* ---- Spark Yellow · PAUSED · do not use ----------------------- */
  --color-spark-yellow: #F5C801;
  --color-spark-yellow-hover: #E0B500;

  /* ---- Secondary palette --------------------------------------------- */
  --color-human-teal:     #26A9AB;
  --color-vibrant-indigo: #B0C2FF;
  --color-earth:          #B8A58B;
  --color-spark-green:    #D8FD8A;  /* Spark */

  /* ---- Tertiary palette · action + contrast on dark surfaces ----- */
  --color-tertiary-yellow: #FCF650;  /* Amarillo pollo — primary CTA */
  --color-tertiary-teal:   #1E98AA;  /* Teal action — secondary CTA */
  --color-tertiary-spark:  #CBFB76;  /* Spark (Hard) — contrast accent */
  /* Legacy aliases */
  --color-action-yellow: var(--color-tertiary-yellow);
  --color-action-teal:   var(--color-tertiary-teal);
  --color-spark-hard:    var(--color-tertiary-spark);
  --color-spark-green-hard: var(--color-tertiary-spark);

  /* ---- Mission palette · PAUSED · do not use ----------------------- */
  --color-mission-human:      #FF7163;  /* Human red — paused */
  --color-mission-industrial: #84E2AE;  /* Industrial green — paused */
  --color-mission-urban:      #9562F4;  /* Urban purple — paused */

  /* ---- Greys --------------------------------------------------------- */
  --color-grey-90: #616161;
  --color-grey-80: #666666;
  --color-grey-70: #888888;
  --color-grey-50: #CACACA;
  --color-grey-25: #EDEDED;

  /* ---- Semantic foreground / background / surface -------------------- */
  --fg-1:      var(--color-black);        /* primary text */
  --fg-2:      var(--color-grey-90);      /* secondary text */
  --fg-muted:  var(--color-grey-70);      /* captions */
  --fg-on-dark:    var(--color-warm-white);
  --fg-on-yellow:  var(--color-black);

  --bg-page:    var(--color-warm-white);  /* default page bg */
  --bg-surface: var(--color-white);       /* cards on warm-white */
  --bg-inverse: var(--color-black);       /* dark hero / contact */
  --bg-accent:  var(--color-earth);  /* Earth replaces yellow as the warm accent surface */

  --border-strong: var(--color-black);
  --border-hairline: rgba(23,23,23,0.10);

  /* ---- Radii --------------------------------------------------------- */
  --radius-pill:  9999px;
  --radius-card:  16px;
  --radius-card-lg: 24px;
  --radius-surface: 48px;

  /* ---- Spacing (8-pt grid) ------------------------------------------ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9: 120px;
  --s-10:160px;

  /* ---- Shadows (deliberately minimal) ------------------------------- */
  --shadow-flat: 0 3px 3px rgba(0,0,0,0.25);   /* only documented shadow */
  --shadow-none: 0 0 0 rgba(0,0,0,0);

  /* ---- Motion ------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:    200ms;
  --dur-state:    350ms;
  --dur-reveal:   600ms;

  /* ---- Type scale (raw sizes) --------------------------------------- */
  --type-xl-title: 200px;   /* hero statement */
  --type-l-title:   97px;
  --type-m-title:   64px;
  --type-s-title:   40px;
  --type-xs-title:  24px;
  --type-body-xl:   24px;
  --type-body:      20px;
  --type-body-s:    16px;
  --type-caption:   14px;
}

/* --------------------------------------------------------------------------
   Baseline
   -------------------------------------------------------------------------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Semantic type — use these classes, don't restyle headings ad hoc.
   - .t-display  → Haffer Display, for the one oversized standout word
                   inside a title (hero, closing slide, big feature callouts)
   - h1 / h2 / h3 / h4 → Haffer Concrete (titles)
   - body / p / captions → Haffer Light
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.t-xl-title, h1.t-xl {
  font-family: var(--font-concrete);
  font-size: var(--type-xl-title);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.t-l-title, h1 {
  font-family: var(--font-concrete);
  font-size: var(--type-l-title);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.t-l-title--light {
  font-family: var(--font-light);
  font-weight: 300;
}
.t-m-title, h2 {
  font-family: var(--font-concrete);
  font-size: var(--type-m-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.t-s-title, h3 {
  font-family: var(--font-concrete);
  font-size: var(--type-s-title);
  line-height: 1.15;
  font-weight: 500;
}
.t-xs-title, h4 {
  font-family: var(--font-concrete);
  font-size: var(--type-xs-title);
  line-height: 1.3;
  font-weight: 500;
}
.t-body-xl {
  font-family: var(--font-light);
  font-size: var(--type-body-xl);
  line-height: 1.3;
  font-weight: 300;
}
.t-body, p {
  font-family: var(--font-light);
  font-size: var(--type-body);
  line-height: 1.45;
  font-weight: 300;
}
.t-body-s {
  font-family: var(--font-light);
  font-size: var(--type-body-s);
  line-height: 1.5;
  font-weight: 300;
}
.t-caption {
  font-family: var(--font-light);
  font-size: var(--type-caption);
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Signature surfaces
   -------------------------------------------------------------------------- */
.surface-warm   { background: var(--color-warm-white); color: var(--fg-1); }
.surface-dark   { background: var(--color-black);      color: var(--fg-on-dark); }
.surface-earth  { background: var(--color-earth);      color: var(--fg-1); }   /* primary warm accent */
.surface-teal   { background: var(--color-human-teal); color: var(--color-white); }
.surface-indigo { background: var(--color-vibrant-indigo); color: var(--fg-1); }
.surface-yellow { background: var(--color-spark-yellow); color: var(--fg-on-yellow); } /* PAUSED */

/* --------------------------------------------------------------------------
   Signature pill button (black + arrow disc)
   -------------------------------------------------------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.btn-pill__label {
  padding: 24px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: var(--color-white);
  transition: background var(--dur-state) var(--ease-standard);
}
.btn-pill__arrow {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  transition: background var(--dur-state) var(--ease-standard);
}
.btn-pill:hover .btn-pill__label,
.btn-pill:hover .btn-pill__arrow { background: var(--color-earth); color: var(--color-black); }
.btn-pill:active .btn-pill__label,
.btn-pill:active .btn-pill__arrow { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   Floating modal card — white surface on Arena, big radius, soft shadow.
   Use for sign-in, lockout, focused single-task surfaces (one decision per card).
   -------------------------------------------------------------------------- */
.eggs-modal {
  background: var(--color-white);
  border-radius: var(--radius-card-lg);              /* 24px */
  box-shadow: 0 24px 60px -20px rgba(23,23,23,0.18),
              0 8px 20px -8px rgba(23,23,23,0.08);
  padding: 56px 48px;
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);                                    /* 24px */
}

/* --------------------------------------------------------------------------
   Icon tile — colored rounded-square holding a single line icon. Used as a
   "mark of identity" on modal cards, empty states, and feature callouts.
   Variants pick from the secondary or action palette.
   -------------------------------------------------------------------------- */
.eggs-icon-tile {
  width: 64px;
  height: 64px;
  border-radius: 18px;                                /* ~28% */
  display: grid;
  place-items: center;
  color: var(--color-black);
  background: var(--color-spark-green);
}
.eggs-icon-tile--teal   { background: var(--color-human-teal);     color: var(--color-white); }
.eggs-icon-tile--indigo { background: var(--color-vibrant-indigo); color: var(--color-black); }
.eggs-icon-tile--earth  { background: var(--color-earth);          color: var(--color-black); }
.eggs-icon-tile--spark-hard { background: var(--color-spark-hard); color: var(--color-black); }
.eggs-icon-tile--dark   { background: var(--color-black);          color: var(--color-white); }

/* --------------------------------------------------------------------------
   Unified form field — the canonical EGGS input.
   Used in App Patterns (Form, Wizard), modals, contact forms — everywhere.
   • Uppercase Concrete label above the field
   • White surface, subtle outlined border, 12px radius
   • Black border + soft halo on focus
   • Optional hint text below
   Composable with leading icon via .eggs-field__input--with-icon.
   -------------------------------------------------------------------------- */
.eggs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.eggs-field__label {
  font-family: var(--font-concrete);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
}
.eggs-field__label .req {
  color: var(--color-tertiary-teal);
  margin-left: 4px;
}
.eggs-field__input,
.eggs-field input,
.eggs-field textarea,
.eggs-field select {
  width: 100%;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid rgba(23,23,23,0.18);
  border-radius: 12px;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-black);
  outline: none;
  line-height: 1.4;
  transition: border-color var(--dur-state) var(--ease-standard),
              box-shadow var(--dur-state) var(--ease-standard);
}
.eggs-field input::placeholder,
.eggs-field textarea::placeholder { color: var(--color-grey-70); }
.eggs-field input:focus,
.eggs-field textarea:focus,
.eggs-field select:focus,
.eggs-field__input:focus-within {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(23,23,23,0.08);
}
.eggs-field__input--with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eggs-field__input--with-icon input {
  flex: 1;
  width: auto;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
}
.eggs-field__input--with-icon input:focus { box-shadow: none; }
.eggs-field__input--with-icon .icon { color: var(--color-grey-70); flex: 0 0 auto; }
.eggs-field__hint {
  font-family: var(--font-light);
  font-weight: 300;
  font-size: 12px;
  color: var(--color-grey-80);
  line-height: 1.4;
}

/* Legacy aliases — kept so old markup still renders the canonical look */
.eggs-input--soft { /* deprecated — use .eggs-field instead */
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 18px; background: var(--color-white);
  border: 1px solid rgba(23,23,23,0.18); border-radius: 12px;
  font-family: var(--font-light); font-weight: 300; font-size: 16px;
  color: var(--color-black);
  transition: border-color var(--dur-state) var(--ease-standard),
              box-shadow var(--dur-state) var(--ease-standard);
}
.eggs-input--soft:focus-within {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(23,23,23,0.08);
}
.eggs-input--soft .icon { color: var(--color-grey-70); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Slide text — honor manual line breaks
   Titles, subtitles and body copy in slides keep the line breaks the user
   types in the editor. `pre-line` honors \n while still wrapping normally and
   collapsing runs of spaces, so layouts are unaffected unless an explicit
   newline is present. Elements that set their own white-space inline
   (e.g. nowrap) are not affected.
   -------------------------------------------------------------------------- */
[data-slide-frame] h1,
[data-slide-frame] h2,
[data-slide-frame] h3,
[data-slide-frame] p {
  white-space: pre-line;
}