@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&display=swap');

/* ========================================================================
   Arcaya Living — Colors & Type
   ========================================================================
   Cross-border space-project delivery platform. Warm, natural, editorial.
   The whole system breathes off a single warm cream canvas; type is a
   single geometric sans (Jost) used in two weights and two cases.

   Pair this stylesheet with the project README for tone, voice, and
   component guidance.
   ====================================================================== */

/* ---- Webfont: Jost (closest free match to the logo wordmark) ---------- */
/* The original wordmark reads as a thin, wide-set geometric display sans
   (Futura-adjacent). Jost is an open-source Futura revival and nails the
   character without a commercial license. Flagged for the user — drop
   in licensed Futura PT or Sohne if available.                           */
/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

:root {
  /* ============================================================
     COLORS — warm neutrals, deep ink, a single sage accent
     ============================================================ */

  /* Canvas (full-bleed backgrounds, default page) */
  --arc-cream-50:  #FBF8F2;   /* lightest — cards on cream */
  --arc-cream-100: #F5F1EA;   /* page background, default canvas */
  --arc-cream-200: #EEE8DC;   /* footer bg, softer section */
  --arc-cream-300: #E6E0D1;   /* card fill on cream canvas */
  --arc-cream-400: #D9D2C4;   /* heavier card fill, "Why Choose Us" lead */

  /* Neutrals (warm-taupe family — never a pure cool gray) */
  --arc-taupe-100: #CFC7B5;
  --arc-taupe-200: #A9A090;
  --arc-taupe-300: #7E7668;
  --arc-taupe-400: #5B554A;

  /* Ink (text, buttons, wordmark) */
  --arc-ink-900:   #1E1E1E;   /* primary text, black pill CTA */
  --arc-ink-700:   #3A3A38;   /* headings */
  --arc-ink-500:   #5C5A55;   /* body */
  --arc-ink-400:   #7A776F;   /* secondary body, muted */
  --arc-ink-300:   #A7A298;   /* eyebrow, captions */

  /* Sage accent — the dark teal/green used on "View more" pills */
  --arc-sage-900:  #2E4547;   /* deepest — pill on dark image */
  --arc-sage-700:  #3E5A5E;   /* standard sage pill */
  --arc-sage-500:  #6D8A85;   /* hover / tinted bg */
  --arc-sage-200:  #C9D3CE;   /* very soft sage for tags */

  /* Functional */
  --arc-success:   #4C7A55;
  --arc-warning:   #B78542;
  --arc-danger:    #9B3E3E;
  --arc-info:      var(--arc-sage-700);

  /* Semantic aliases */
  --bg:            var(--arc-cream-100);
  --bg-raised:     var(--arc-cream-50);
  --bg-sunken:     var(--arc-cream-200);
  --bg-card:       var(--arc-cream-300);
  --bg-card-heavy: var(--arc-cream-400);

  --fg-1:          var(--arc-ink-900);   /* primary text */
  --fg-2:          var(--arc-ink-500);   /* body */
  --fg-3:          var(--arc-ink-400);   /* secondary */
  --fg-4:          var(--arc-ink-300);   /* eyebrows, captions */
  --fg-on-dark:    #F5F1EA;

  --line:          #D9D2C4;              /* hairlines, dividers */
  --line-strong:   #A9A090;

  --accent:        var(--arc-sage-700);
  --accent-fg:     #F5F1EA;

  --cta-bg:        var(--arc-ink-900);
  --cta-fg:        #FFFFFF;

  /* ============================================================
     TYPE — one family, two cases, disciplined scale
     ============================================================ */
  --font-sans:     'Jost', 'Futura PT', 'Futura', 'Century Gothic',
                   ui-sans-serif, system-ui, sans-serif;
  --font-display:  var(--font-sans);      /* same family, just heavier tracking */
  --font-mono:     ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* Scale — mobile-first. Desktop headings bump via media queries below. */
  --fs-eyebrow:    11px;   /* UPPERCASE, LETTER-SPACED labels */
  --fs-caption:    12px;
  --fs-small:      13px;
  --fs-body:       15px;
  --fs-body-lg:    17px;
  --fs-h4:         18px;
  --fs-h3:         22px;
  --fs-h2:         28px;
  --fs-h1:         40px;
  --fs-display:    56px;   /* hero */

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.55;
  --lh-relaxed:    1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;   /* nav links, small caps */
  --tracking-wider:  0.14em;   /* eyebrows */
  --tracking-widest: 0.22em;   /* wordmark spacing */

  /* ============================================================
     SPACING, RADIUS, SHADOW, MOTION
     ============================================================ */
  --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;

  --radius-xs:  2px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Shadows are SOFT and rare — Arcaya is a flat, airy aesthetic */
  --shadow-1: 0 1px 2px rgba(30, 30, 30, 0.04);
  --shadow-2: 0 6px 18px rgba(30, 30, 30, 0.06);
  --shadow-lift: 0 18px 40px -12px rgba(30, 30, 30, 0.18);

  --ease-standard: cubic-bezier(.32, .72, .28, 1);
  --ease-soft:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast:      160ms;
  --dur-base:      240ms;
  --dur-slow:      420ms;
}

/* ========================================================================
   BASE
   ====================================================================== */

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

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========================================================================
   SEMANTIC TYPE STYLES
   ========================================================================
   Use the class OR the element — both work. Keep headings case-correct:
   .u-display is UPPERCASE, everything else is sentence case.
   ====================================================================== */

.u-eyebrow,
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1;
}

.u-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;          /* thin, airy */
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
  text-transform: uppercase;  /* "DESIGNED FOR LIVING" */
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .u-h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .u-h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .u-h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .u-h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .u-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.u-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.u-caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-normal); }

.u-pill-label { /* uppercase tiny labels on dark overlays (project cards) */
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.8);
}

.u-project-title { /* "KITCHEN IN PRIVATE RESIDENCE" */
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  line-height: var(--lh-tight);
}

/* Desktop bump */
@media (min-width: 900px) {
  :root {
    --fs-h1:      48px;
    --fs-h2:      34px;
    --fs-display: 72px;
  }
}
@media (min-width: 1280px) {
  :root {
    --fs-display: 88px;
  }
}

/* ========================================================================
   HELPERS
   ====================================================================== */
.u-cream   { background: var(--bg); }
.u-sunken  { background: var(--bg-sunken); }
.u-raised  { background: var(--bg-raised); }
.u-ink     { color: var(--fg-1); }
.u-muted   { color: var(--fg-3); }
.u-divider { height: 1px; background: var(--line); border: 0; }

/* Load component styles */
@import url('components.css');