/* ============================================================
   ATELIER AFFAIRS — Foundations
   Curated luxury rentals · Hawaiʻi
   Color + Type tokens. Import this everywhere.
   ============================================================ */

/* ---- Fonts (Google Fonts CDN — see README for substitution note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — warm tonal palette
     Ivory · warm white · sand · soft taupe · muted sage · charcoal
     ============================================================ */

  /* Warm neutrals (lightest → deepest) */
  --aa-porcelain:   #FCFAF4;  /* warm white — page base, cards on tone */
  --aa-ivory:       #F6F1E7;  /* ivory — default canvas */
  --aa-ivory-deep:  #EFE8D9;  /* ivory shadow / alt sections */
  --aa-sand:        #E8DECB;  /* sand — section blocks, fills */
  --aa-sand-deep:   #DBCDB3;  /* sand pressed / borders on tone */
  --aa-taupe:       #C7B9A0;  /* soft taupe — dividers, muted fills */
  --aa-taupe-deep:  #A8997E;  /* taupe — quiet text on light */
  --aa-stone:       #877B67;  /* stone — secondary text */

  /* Sage (the cool counterpoint) */
  --aa-sage-mist:   #D3D8CC;  /* sage tint — soft backgrounds */
  --aa-sage:        #A3AC97;  /* muted sage — accents, tags */
  --aa-sage-deep:   #7C856C;  /* deep sage — sage text/icons */

  /* Charcoal / ink (the anchor) */
  --aa-charcoal:    #2C2B26;  /* charcoal — primary text, dark sections */
  --aa-ink:         #1B1A16;  /* near-black — headlines on light, logo */
  --aa-charcoal-70: rgba(44,43,38,0.70);
  --aa-charcoal-45: rgba(44,43,38,0.45);
  --aa-charcoal-15: rgba(44,43,38,0.15);
  --aa-charcoal-08: rgba(44,43,38,0.08);

  /* Gold — the single metallic whisper. Antique/champagne gold (not orange). Use sparingly. */
  --aa-brass:       #AE9456;
  --aa-brass-soft:  #C9B581;

  /* ---- Semantic surface + text roles ---- */
  --aa-bg:          var(--aa-ivory);       /* default page */
  --aa-bg-alt:      var(--aa-porcelain);   /* raised cards */
  --aa-bg-tone:     var(--aa-sand);        /* tonal section */
  --aa-bg-inverse:  var(--aa-charcoal);    /* dark section / footer */

  --aa-fg:          var(--aa-ink);         /* primary text */
  --aa-fg-2:        var(--aa-stone);       /* secondary text */
  --aa-fg-3:        var(--aa-taupe-deep);  /* tertiary / captions */
  --aa-fg-on-dark:  var(--aa-porcelain);   /* text on charcoal */
  --aa-fg-on-dark-2:rgba(252,250,244,0.62);

  --aa-line:        var(--aa-charcoal-15); /* hairline borders */
  --aa-line-strong: var(--aa-charcoal-45);
  --aa-line-tone:   rgba(168,153,126,0.40);/* taupe hairline on tone */

  /* ============================================================
     TYPE
     Display: Playfair Display (classic editorial Didone serif)
     UI/Body: Jost (refined geometric sans)
     ============================================================ */
  --aa-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; /* @kind font */
  --aa-sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; /* @kind font */

  /* Tracking presets */
  --aa-track-wordmark: 0.30em;  /* ATELIER AFFAIRS, taglines */
  --aa-track-eyebrow:  0.34em;  /* small caps labels */
  --aa-track-button:   0.18em;
  --aa-track-tight:    -0.022em; /* large display serif */

  /* Type scale (display-forward, generous) */
  --aa-fs-display:  clamp(3.5rem, 7vw, 6.5rem); /* @kind font */ /* hero serif */
  --aa-fs-h1:       clamp(2.6rem, 4.6vw, 4rem); /* @kind font */
  --aa-fs-h2:       clamp(2rem, 3.2vw, 2.8rem); /* @kind font */
  --aa-fs-h3:       1.5rem;
  --aa-fs-h4:       1.18rem;
  --aa-fs-lead:     1.22rem;   /* intro paragraphs (serif) */
  --aa-fs-body:     1rem;
  --aa-fs-small:    0.875rem;
  --aa-fs-eyebrow:  0.72rem;   /* tracked small caps */
  --aa-fs-micro:    0.6875rem;

  /* ============================================================
     SPACING · RADII · ELEVATION · MOTION
     ============================================================ */
  --aa-sp-1: 4px;  --aa-sp-2: 8px;  --aa-sp-3: 12px; --aa-sp-4: 16px;
  --aa-sp-5: 24px; --aa-sp-6: 32px; --aa-sp-7: 48px; --aa-sp-8: 64px;
  --aa-sp-9: 96px; --aa-sp-10: 128px;

  /* Radii — restrained. Luxury favors crisp corners + the occasional arch. */
  --aa-r-none: 0px;
  --aa-r-xs:   2px;
  --aa-r-sm:   4px;
  --aa-r-md:   8px;
  --aa-r-lg:   16px;
  --aa-r-pill: 999px;
  --aa-r-arch: 999px 999px 0 0; /* @kind radius */ /* signature 'arch top' for imagery */

  /* Elevation — soft, warm-tinted, never harsh */
  --aa-shadow-xs: 0 1px 2px rgba(44,43,38,0.06);
  --aa-shadow-sm: 0 2px 10px rgba(44,43,38,0.06);
  --aa-shadow-md: 0 10px 30px -12px rgba(44,43,38,0.16);
  --aa-shadow-lg: 0 28px 60px -28px rgba(44,43,38,0.30);

  /* Motion — slow, eased, editorial. No bounce. */
  --aa-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* motion easing */
  --aa-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --aa-dur-fast: 180ms; /* @kind other */
  --aa-dur: 320ms; /* @kind other */
  --aa-dur-slow: 620ms; /* @kind other */

  --aa-maxw: 1280px;     /* content container */
  --aa-maxw-wide: 1500px;
}

/* ============================================================
   ELEMENT DEFAULTS (opt-in via .aa-prose / use on UI kit roots)
   ============================================================ */
.aa-root, .aa-prose {
  color: var(--aa-fg);
  font-family: var(--aa-sans);
  font-size: var(--aa-fs-body);
  line-height: 1.6;
  font-weight: 300;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Newsreader, weight 500, tight tracking */
.aa-display, .aa-h1, .aa-h2, .aa-h3 {
  font-family: var(--aa-serif);
  font-weight: 400;
  color: var(--aa-fg);
  line-height: 1.04;
  letter-spacing: var(--aa-track-tight);
  text-wrap: balance;
}
.aa-display { font-size: var(--aa-fs-display); font-weight: 400; line-height: 0.98; letter-spacing: -0.032em; }
.aa-h1 { font-size: var(--aa-fs-h1); }
.aa-h2 { font-size: var(--aa-fs-h2); }
.aa-h3 { font-size: var(--aa-fs-h3); line-height: 1.15; }
.aa-h4 {
  font-family: var(--aa-serif);
  font-size: var(--aa-fs-h4);
  font-weight: 500;
  letter-spacing: 0;
}

/* Editorial italic — Newsreader italic for emphasis/accent words */
.aa-italic { font-family: var(--aa-serif); font-style: italic; font-weight: 400; }

/* Eyebrow / label — tracked small caps in Jost */
.aa-eyebrow {
  font-family: var(--aa-sans);
  font-size: var(--aa-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--aa-track-eyebrow);
  text-transform: uppercase;
  color: var(--aa-fg-2);
}

/* Lead paragraph — serif, airy */
.aa-lead {
  font-family: var(--aa-serif);
  font-size: var(--aa-fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--aa-fg-2);
}

.aa-body { font-family: var(--aa-sans); font-weight: 300; line-height: 1.65; }
.aa-small { font-size: var(--aa-fs-small); }
.aa-caption { font-size: var(--aa-fs-eyebrow); letter-spacing: 0.04em; color: var(--aa-fg-3); }

/* Wordmark utility — recreate the logo type in CSS */
.aa-wordmark {
  font-family: var(--aa-serif);
  font-weight: 400;
  letter-spacing: var(--aa-track-wordmark);
  text-transform: uppercase;
  color: var(--aa-fg);
}
.aa-tagline {
  font-family: var(--aa-sans);
  font-weight: 400;
  font-size: var(--aa-fs-micro);
  letter-spacing: var(--aa-track-eyebrow);
  text-transform: uppercase;
  color: var(--aa-fg-2);
}