/* =========================================================
   Figueiredo Arquitetos — Tokens
   Base palette derived from the brand mark (terracotta /
   clay) and the reference site wave graphics (sand / bone).
   ========================================================= */

/* ---------- Brand typeface — Josefin Sans (uploaded) ----- */
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 100; src: url("fonts/JosefinSans-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 100; src: url("fonts/JosefinSans-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 200; src: url("fonts/JosefinSans-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 200; src: url("fonts/JosefinSans-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; src: url("fonts/JosefinSans-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 300; src: url("fonts/JosefinSans-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; src: url("fonts/JosefinSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 400; src: url("fonts/JosefinSans-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 500; src: url("fonts/JosefinSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 500; src: url("fonts/JosefinSans-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; src: url("fonts/JosefinSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 600; src: url("fonts/JosefinSans-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; src: url("fonts/JosefinSans-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 700; src: url("fonts/JosefinSans-BoldItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------- Brand — Clay (terracotta) ---------- */
  --clay-700: #8C5840;   /* deepest, used very sparingly */
  --clay-600: #A66B4F;
  --clay-500: #B47864;   /* logo color — primary brand */
  --clay-400: #C3875A;   /* wave deep — accent fill */
  --clay-300: #D4A688;   /* warm peach */
  --clay-200: #E1C3A5;   /* wave light — sand */
  --clay-100: #EDDCC6;
  --clay-050: #F5EADD;   /* tinted surface */

  /* ---------- Surfaces (warm neutrals) ---------- */
  --bone:     #F7F2EB;   /* page background */
  --paper:    #FBF8F3;   /* card / alt surface */
  --white:    #FFFFFF;

  /* ---------- Ink (text + lines, warm grey) ---------- */
  --ink-900:  #1A1714;   /* headlines, max contrast */
  --ink-800:  #2A2620;
  --ink-700:  #3A3530;   /* body */
  --ink-500:  #6B635A;   /* secondary */
  --ink-400:  #8C857C;
  --ink-300:  #B5ADA3;   /* muted */
  --ink-200:  #D4CDC2;   /* dividers */
  --line:     #E5DED5;   /* hairline border */

  /* ---------- Semantic ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-muted: var(--ink-400);
  --fg-on-clay: var(--paper);

  --bg-1: var(--bone);
  --bg-2: var(--paper);
  --bg-tinted: var(--clay-050);
  --bg-inverse: var(--ink-900);

  --accent: var(--clay-500);
  --accent-hover: var(--clay-600);
  --accent-soft: var(--clay-200);

  --border: var(--line);
  --border-strong: var(--ink-200);

  /* ---------- Typography families ---------- */
  /* Single-family system: Josefin Sans across display, UI, wordmark. */
  --font-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mark:    "Josefin Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale (fluid-ish, fixed for clarity) ---------- */
  --t-display-xl: clamp(56px, 7vw, 112px);
  --t-display-l:  clamp(40px, 5vw, 72px);
  --t-display-m:  clamp(32px, 4vw, 48px);

  --t-h1: 40px;
  --t-h2: 28px;
  --t-h3: 20px;
  --t-h4: 16px;

  --t-body-l: 18px;
  --t-body:   15px;
  --t-body-s: 13px;
  --t-caption: 11px;   /* uppercase eyebrows / labels */

  /* ---------- Spacing (8px base, with intentional generosity) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Radius (kept minimal — gallery aesthetic) ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Elevation (very subtle — print-like) ---------- */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, 0.04), 0 1px 1px rgba(26, 23, 20, 0.03);
  --shadow-2: 0 6px 24px rgba(26, 23, 20, 0.06), 0 2px 6px rgba(26, 23, 20, 0.04);
  --shadow-3: 0 18px 48px rgba(26, 23, 20, 0.10), 0 4px 12px rgba(26, 23, 20, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;
}

/* =========================================================
   Element defaults
   ========================================================= */

html { font-size: 16px; }

body {
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Display (Josefin Sans, light) ---------- */
.t-display-xl,
.t-display-l,
.t-display-m {
  font-family: var(--font-display);
  font-weight: 200;
  color: var(--fg-1);
  letter-spacing: 0;
  line-height: 1.05;
}
.t-display-xl { font-size: var(--t-display-xl); }
.t-display-l  { font-size: var(--t-display-l); }
.t-display-m  { font-size: var(--t-display-m); }
.t-italic { font-style: italic; font-weight: 300; }

/* ---------- Headings ---------- */
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fg-1);
  letter-spacing: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg-1);
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-1);
  letter-spacing: 0;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-1);
}

/* ---------- Body ---------- */
p, .t-body {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.t-body-l { font-size: var(--t-body-l); line-height: 1.6; color: var(--fg-2); }
.t-body-s { font-size: var(--t-body-s); line-height: 1.55; color: var(--fg-3); }

/* ---------- Eyebrows / labels / captions ---------- */
.t-eyebrow,
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Wordmark ---------- */
.t-mark {
  font-family: var(--font-mark);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.t-mark-sub {
  font-family: var(--font-mark);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.7em;
}