/* Elemex Design System tokens — trimmed to what this page uses.
   Source: Elemex Brand Playbook 2019 (claude.ai/design project). */

@font-face {
  font-family: "Fugue";
  src: url("fonts/Fugue-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fugue";
  src: url("fonts/Fugue-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #00A896;
  --teal-700: #007F71;
  --gold: #E3AB35;
  --brand-gradient: linear-gradient(90deg, #00A896 0%, #6DBE5A 50%, #E3D21E 100%);

  --black: #000000;
  --ink: #231F20;
  --grey-700: #6D6E71;
  --grey-400: #A7A9AC;
  --grey-200: #D1D3D4;
  --grey-100: #ECEDEE;
  --grey-50: #F6F7F7;
  --white: #FFFFFF;

  --ceramitex: #C4D600;
  --alumitex: #E2231A;
  --stonitex: #DC8699;
  --solstex: #FFB500;

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-muted: var(--grey-50);

  --text-primary: var(--ink);
  --text-secondary: var(--grey-700);

  --border-default: var(--grey-200);
  --border-inverse: rgba(255, 255, 255, 0.18);

  --font-brand: "Fugue", Arial, "Helvetica Neue", Helvetica, sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --rule-accent: 3px;

  --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06);
  --shadow-lg: 0 14px 40px rgba(35, 31, 32, 0.12);

  --container-max: 1240px;
  --gutter: 24px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-base: 220ms;
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal); }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}