/* =========================================================================
   Milossi — Colors & Type
   Source of truth for color tokens, font faces and the typographic scale.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Archivo: variable font for everything that isn't a display headline.     */
@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Moderniz: display face, used for the wordmark + giant headlines. */
@font-face {
  font-family: "Moderniz";
  src: url("./fonts/Moderniz.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color tokens ---------------------------------------------------- */
  /* Brand */
  --milossi-green:        #022B3A;  /* primary — never use pure black     */
  --milossi-green-2:      #1F7A8C;  /* accent / secondary                 */
  --white:                #FFFFFF;

  /* Tints (derived for surfaces, borders, dividers)                       */
  --green-95:             #F2F5F7;  /* near-white surface                  */
  --green-90:             #DCE5E9;  /* hairline on white                   */
  --green-80:             #B7C7CD;
  --green-60:             #6E8C95;
  --green-40:             #3B5E69;
  --green-20:             #022B3A;  /* === primary green                   */
  --green-15:             #021F2A;  /* deeper, used for hover on dark      */
  --accent-30:            #1F7A8C;  /* === secondary green                 */
  --accent-50:            #4FA0B0;  /* lighter accent, hover on green     */

  /* Semantic foreground / background --------------------------------- */
  --fg:                   var(--milossi-green);     /* default text       */
  --fg-on-dark:           var(--white);
  --fg-muted:             var(--green-60);
  --fg-link:              var(--milossi-green);
  --fg-accent:            var(--milossi-green-2);

  --bg:                   var(--white);
  --bg-dark:              var(--milossi-green);     /* dark sections      */
  --bg-soft:              var(--green-95);

  --border:               var(--milossi-green);     /* hairline pill brd  */
  --border-on-dark:       var(--white);
  --border-soft:          var(--green-90);

  /* ---- Type scale ------------------------------------------------------ */
  --font-display:         "Moderniz", "MODERNIZ", "Archivo Black", sans-serif;
  --font-body:            "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Body weights — Archivo Light is the default everywhere in the figma. */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-bold:              700;

  /* Tracking & leading conventions from figma                            */
  --tracking-tight:       -0.005em;   /* small caps / labels              */
  --tracking-display:     -0.02em;    /* big display                      */
  --leading-display:      1.0;        /* MODERNIZ runs at 100% line       */
  --leading-display-relaxed: 1.15;    /* headlines with descenders        */
  --leading-body:         1.05;
  --leading-paragraph:    1.45;

  /* ---- Sizes (clamp() for responsive) --------------------------------- */
  --fs-hero:              clamp(64px, 9vw, 120px);  /* "This is milossi"  */
  --fs-display:           clamp(48px, 5.5vw, 75px); /* section megatitles */
  --fs-h1:                clamp(40px, 4.2vw, 54px); /* "We listen, we…"   */
  --fs-h2:                clamp(28px, 2.6vw, 34px);
  --fs-h3:                21px;
  --fs-lead:              21px;
  --fs-body:              17px;
  --fs-body-sm:           16px;
  --fs-meta:              15px;
  --fs-label:             10px;       /* the tiny pill labels              */

  /* ---- Spacing — 8/14pt rhythm, plus the 114px page gutter ------------ */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              14px;
  --space-4:              20px;
  --space-5:              32px;
  --space-6:              48px;
  --space-7:              70px;
  --space-8:              114px;      /* canonical page gutter             */
  --space-9:              200px;      /* between major sections            */

  /* ---- Radii & lines -------------------------------------------------- */
  --radius-pill:          100px;      /* labels and chips                  */
  --radius-none:          0;
  --hairline:             1px;
  --hairline-w:           0.5px;      /* used on pill borders              */
  --rule-thick:           3px;        /* the accordion ± plus signs        */

  /* ---- Motion --------------------------------------------------------- */
  --ease-smooth:          cubic-bezier(0.22, 0.61, 0.36, 1); /* default    */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-premium:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-premium:  cubic-bezier(0.7, 0, 1, 1);
  --dur-fast:             160ms;
  --dur-base:             320ms;
  --dur-slow:             640ms;
  --dur-micro:            240ms;
  --dur-reveal:           420ms;
  --dur-page:             800ms;

  /* ---- Layout --------------------------------------------------------- */
  --max-w-page:           1440px;
  --gutter:               114px;
  --gutter-tablet:        56px;
  --gutter-mobile:        24px;
}

/* =========================================================================
   Semantic type — apply these classes to slot into the system.
   ========================================================================= */
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: lowercase;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: lowercase;
}
.t-h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1.02;
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-meta);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-link {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* Pill label — the tiny capsule chip used as a section eyebrow.           */
.t-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 1px 2px;
  border: var(--hairline-w) solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-tight);
  line-height: 1.0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Wordmark — the logo text. Always uppercase, Moderniz/Unbounded.         */
.t-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--fg);
}

/* On-dark variants — flip the foreground.                                 */
.on-dark { color: var(--fg-on-dark); }
.on-dark .t-hero,
.on-dark .t-display,
.on-dark .t-h1,
.on-dark .t-h2,
.on-dark .t-h3,
.on-dark .t-lead,
.on-dark .t-body,
.on-dark .t-meta,
.on-dark .t-wordmark { color: var(--fg-on-dark); }
.on-dark .t-pill    { color: var(--fg-on-dark); }