/* ── colors.css (design system, handoff/preview/ds/arkiteque/tokens) ── */
/* ==== Arkiteque · Color tokens ====
   Palette drawn from the brand board and César Manrique's Lanzarote interiors:
   whitewashed walls, volcanic brown lava-stone, and vivid accents (lava orange, ocean blue)
   set against warm stone neutrals. */
:root {
  /* -- Paper / whitewash -- */
  --paper: #F4F4F2;          /* main page surface */
  --paper-raised: #FBFBFA;   /* raised cards on paper */
  --white: #FFFFFF;

  /* -- Volcanic brown (primary dark) -- */
  --brown-900: #2A2019;
  --brown-800: #362A21;
  --brown-700: #49372D;      /* brand primary brown */
  --brown-600: #5B4638;
  --brown-500: #75594A;
  --brown-400: #94786A;

  /* -- Stone neutrals -- */
  --stone-100: #F4F4F2;
  --stone-200: #E9E7E2;
  --stone-300: #D9D5CF;
  --stone-400: #BFBAB6;      /* brand stone gray */
  --stone-500: #9F9992;
  --stone-600: #7C766F;
  --stone-700: #5A554F;

  /* -- Lava orange (primary accent) -- */
  --orange-soft: #FFE6D8;
  --orange-300: #FFA675;
  --orange:     #FF7133;     /* brand orange */
  --orange-600: #EA5A1C;
  --orange-700: #C8480F;

  /* -- Ocean blue (cool accent) -- */
  --blue-soft: #E4F1FA;
  --blue-300:  #ABD3EE;
  --blue:      #83BDE2;      /* brand blue */
  --blue-600:  #4F98C9;
  --blue-700:  #33769F;

  /* -- Support semantics (derived, kept on-palette) -- */
  --green:  #6E8E5E;
  --red:    #C8483A;
  --gold:   #E0A73C;

  /* ===== Semantic aliases ===== */
  --surface-page:     var(--paper);
  --surface-card:     var(--paper-raised);
  --surface-sunken:   var(--stone-200);
  --surface-inverse:  var(--brown-700);
  --surface-inverse-2:var(--brown-900);

  --text-primary:   var(--brown-800);
  --text-secondary: var(--brown-500);
  --text-muted:     var(--stone-600);
  --text-inverse:   var(--paper);
  --text-inverse-muted: rgba(244,244,242,0.66);
  --text-on-accent: #FFFFFF;

  --accent:        var(--orange);
  --accent-hover:  var(--orange-600);
  --accent-press:  var(--orange-700);
  --accent-soft:   var(--orange-soft);
  --accent-cool:   var(--blue);
  --accent-cool-hover: var(--blue-600);
  --accent-cool-soft:  var(--blue-soft);

  --border:        var(--stone-300);
  --border-strong: var(--brown-700);
  --border-subtle: var(--stone-200);
  --focus-ring:    var(--orange);
}

/* ── typography.css (design system, handoff/preview/ds/arkiteque/tokens) ── */
/* ==== Arkiteque · Typography tokens ====
   Playfair Display for editorial display & the wordmark; Work Sans for copy & UI. */
:root {
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Type scale (1.25 major-third, rounded) */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.375rem;   /* 22 */
  --text-xl:  1.75rem;    /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 3rem;       /* 48 */
  --text-4xl: 4rem;       /* 64 */
  --text-5xl: 5.5rem;     /* 88 */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em;  /* eyebrow / label uppercase */
}

/* ── spacing.css (design system, handoff/preview/ds/arkiteque/tokens) ── */
/* ==== Arkiteque · Spacing tokens (4px base) ==== */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --gutter: var(--space-5);
}

/* ── effects.css (design system, handoff/preview/ds/arkiteque/tokens) ── */
/* ==== Arkiteque · Radius, shadow & motion ====
   Arkiteque pairs architectural squares (cards, panels = crisp corners) with
   organic pills (buttons, tags, chips = fully rounded) — a Manrique tension of
   whitewashed rectangles against curved forms. Shadows stay soft and matte. */
:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;      /* inputs, small surfaces */
  --radius-md: 8px;      /* media, image frames */
  --radius-lg: 14px;     /* large feature panels */
  --radius-pill: 999px;  /* buttons, tags, chips, switches */

  /* Matte, low-contrast shadows — used sparingly; borders do most of the work */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(42,32,25,0.06);
  --shadow-md: 0 6px 18px -8px rgba(42,32,25,0.16);
  --shadow-lg: 0 20px 48px -18px rgba(42,32,25,0.28);
  --shadow-focus: 0 0 0 3px rgba(255,113,51,0.35);

  /* Motion — gentle, organic; no bounce */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-out: 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 */
}

/* ── base.css (design system, handoff/preview/ds/arkiteque/tokens) ── */
/* ==== Arkiteque · Base element defaults ==== */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; color: var(--text-primary); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Utility: uppercase eyebrow/label */
.eyebrow { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }