/* =========================================================================
   Anzen Design System — colors_and_type.css
   Brand: Anzen ("beyond comfort") — solid-state heating, cooling & ventilation
   Sources: 2. Anzen - Basic Brand Guideline.pdf, 1. Anzen - Tone of Voice.pdf
   ========================================================================= */

/* ---------- Fonts --------------------------------------------------------
   Brand guideline specifies:
     • Titles / accent:  Saira Medium
     • Body / paragraph: Poppins Regular
   Both loaded from local font files in fonts/.
   Saira is the geometric, slightly squared display face used for the
   ANZEN wordmark. Poppins is the neutral body companion.
   ------------------------------------------------------------------------ */

/* ----- Saira (variable TTF: weight 100–900, width 50%–125%) ----- */
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-variable.ttf") format("truetype-variations"),
       url("../fonts/saira-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}


/* ----- Poppins (static OTFs, full weight range) ----- */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-regular.otf") format("opentype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-medium.otf") format("opentype");          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-semibold.otf") format("opentype");        font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ======================================================================
     COLORS
     ====================================================================== */

  /* Brand primaries — sampled from supplied logo artwork */
  --anzen-orange:       #FD4016;   /* primary brand, "Anzen Red/Orange" */
  --anzen-navy:         #2E3748;   /* primary brand, deep ink navy */

  /* Orange scale — warm, energetic. Use sparingly as accent. */
  --orange-50:          #FFF1ED;
  --orange-100:         #FFDCD1;
  --orange-200:         #FFB49F;
  --orange-300:         #FF8B6D;
  --orange-400:         #FE6239;
  --orange-500:         #FD4016;   /* = --anzen-orange */
  --orange-600:         #D73108;
  --orange-700:         #A82506;
  --orange-800:         #7A1B05;
  --orange-900:         #4D1103;

  /* Navy scale — cool, premium, dependable. Primary text + surface. */
  --navy-50:            #F3F4F6;
  --navy-100:           #E3E6EB;
  --navy-200:           #BFC5D0;
  --navy-300:           #8D95A5;
  --navy-400:           #5B6478;
  --navy-500:           #3D475B;
  --navy-600:           #2E3748;   /* = --anzen-navy */
  --navy-700:           #232A38;
  --navy-800:           #171C26;
  --navy-900:           #0B0E14;

  /* Neutrals — warm-cool paper tones. "Zen" off-whites. */
  --paper:              #FAF8F5;   /* warm off-white, default page bg */
  --paper-dim:          #F2EFE9;   /* subtle panel bg */
  --paper-edge:         #E6E2DA;   /* borders on paper */
  --white:              #FFFFFF;
  --black:              #0B0E14;

  /* Semantic — muted, not neon. Keep in family. */
  --success:            #2F8F6B;
  --warning:            #D98B1F;
  --danger:             var(--anzen-orange);
  --info:               #3E6FB3;

  /* ----- Semantic foreground / background tokens ----- */
  --bg:                 var(--paper);
  --bg-dim:             var(--paper-dim);
  --bg-inverse:         var(--anzen-navy);
  --bg-accent:          var(--anzen-orange);

  --fg:                 var(--anzen-navy);         /* primary text */
  --fg-muted:           var(--navy-400);           /* secondary text */
  --fg-subtle:          var(--navy-300);           /* tertiary / meta */
  --fg-on-accent:       var(--white);              /* text on orange */
  --fg-on-inverse:      var(--paper);              /* text on navy */
  --fg-accent:          var(--anzen-orange);

  --border:             var(--paper-edge);
  --border-strong:      var(--navy-200);
  --divider:            rgba(46, 55, 72, 0.08);

  /* ======================================================================
     TYPOGRAPHY
     ------------------------------------------------------------------
     Brand guideline formulae (preserved verbatim):
       Title  — SIZE 92 / LEADING 97 (size + 5)  / TRACKING 25   → Saira Medium
       Body   — SIZE 38 / LEADING 58 (size + 20) / TRACKING 10   → Poppins Regular
     Translated to CSS (1em = 1000 tracking units in Figma/InDesign,
     where tracking 25 ≈ 0.025em, tracking 10 ≈ 0.01em):
     ====================================================================== */

  --font-display:       "Saira", "Helvetica Neue", Arial, sans-serif;
  --font-body:          "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:          ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Weights */
  --fw-light:           300; /* @kind font */
  --fw-regular:         400; /* @kind font */
  --fw-medium:          500; /* @kind font */    /* primary display weight per guideline */
  --fw-semibold:        600; /* @kind font */
  --fw-bold:            700; /* @kind font */

  /* Tracking (letter-spacing) — per brand formula */
  --tracking-display:   0.025em;   /* 25 */
  --tracking-body:      0.01em;    /* 10 */
  --tracking-tight:     0em;
  --tracking-caps:      0.08em;    /* small-caps / eyebrows */

  /* Type scale — modular, anchored on brand formula.
     Leading follows the guideline (display: size + 5; body: size + 20).
     Sizes below are in rem for responsive scaling (1rem = 16px). */

  --fs-display-xl:      5.75rem;   /* 92px — hero headline */
  --lh-display-xl:      6.0625rem; /* 97px */

  --fs-display-lg:      4rem;      /* 64px */
  --lh-display-lg:      4.3125rem; /* 69px */

  --fs-display-md:      3rem;      /* 48px */
  --lh-display-md:      3.3125rem; /* 53px */

  --fs-display-sm:      2.25rem;   /* 36px */
  --lh-display-sm:      2.5625rem; /* 41px */

  --fs-h1:              2.375rem;  /* 38px — matches guideline accent size */
  --lh-h1:              3.625rem;  /* 58px (+20 rule) */

  --fs-h2:              1.75rem;   /* 28px */
  --lh-h2:              3rem;      /* 48px (+20) */

  --fs-h3:              1.375rem;  /* 22px */
  --lh-h3:              2.625rem;  /* 42px */

  --fs-body-lg:         1.125rem;  /* 18px */
  --lh-body-lg:         2.375rem;  /* 38px (+20) */

  --fs-body:            1rem;      /* 16px */
  --lh-body:            2.25rem;   /* 36px (+20) */

  --fs-body-sm:         0.875rem;  /* 14px */
  --lh-body-sm:         2.125rem;  /* 34px */

  --fs-caption:         0.75rem;   /* 12px */
  --lh-caption:         2rem;      /* 32px */

  /* ======================================================================
     SPACING — 4-px base grid
     ====================================================================== */
  --space-0:  0;
  --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 — mostly crisp; the brand wordmark is rectilinear.
     Use small radii on buttons / cards; pill for status chips.
     ====================================================================== */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ======================================================================
     SHADOWS — restrained. Inspired by quiet, appliance-like product.
     ====================================================================== */
  --shadow-xs:  0 1px 2px rgba(11, 14, 20, 0.05);
  --shadow-sm:  0 2px 4px rgba(11, 14, 20, 0.06), 0 1px 2px rgba(11, 14, 20, 0.04);
  --shadow-md:  0 8px 20px -8px rgba(11, 14, 20, 0.14), 0 2px 6px rgba(11, 14, 20, 0.06);
  --shadow-lg:  0 24px 48px -16px rgba(11, 14, 20, 0.18), 0 6px 14px rgba(11, 14, 20, 0.06);
  --shadow-accent: 0 12px 28px -10px rgba(253, 64, 22, 0.45);

  /* ======================================================================
     MOTION
     ====================================================================== */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  200ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */
}

/* ==========================================================================
   Semantic element styles — consume the variables above
   ========================================================================== */

html {
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--fg);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-semibold); }

.display-xl { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tracking-display); }
.display-lg { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tracking-display); }
.display-md { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--tracking-display); }
.display-sm { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); letter-spacing: var(--tracking-display); }

/* ---------- Body ---------- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: 1.1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ---------- Inline / misc ---------- */
a { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-standard); }
a:hover { border-bottom-color: var(--fg-accent); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-dim);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }

::selection { background: var(--anzen-orange); color: var(--white); }