/* ============================================================
   DESSIGNE — Design Tokens (colors + type)
   Agence d'architecture d'intérieur haut de gamme
   ============================================================ */

/* ---- Brand fonts ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Serif companion (Google Fonts fallback until brand serif provided) */
:root {
  /* ============================================================
     COLOR — Brand palette (definitive)
     ============================================================ */

  /* Brand foundation — dark to light */
  --ds-ink:        #262421; /* near-black, primary text on light bg */
  --ds-burgundy:   #4E2924; /* deep brown-burgundy, secondary brand */
  --ds-rouge:      #72140C; /* signature accent red, used sparingly */
  --ds-gold:       #A48054; /* warm cognac gold, secondary accent */
  --ds-cream:      #E6DFD1; /* soft cream, muted brand neutral */

  /* Background neutrals (page surfaces) */
  --ds-paper:      #FAF8F4; /* primary page background */
  --ds-paper-2:    #F4F1EB; /* secondary surface, cards, alternating sections */
  --ds-white:      #FFFFFF;

  /* Tints + shades derived from the palette (use sparingly) */
  --ds-ink-80:     rgba(38, 36, 33, 0.80);
  --ds-ink-60:     rgba(38, 36, 33, 0.60);
  --ds-ink-40:     rgba(38, 36, 33, 0.40);
  --ds-ink-20:     rgba(38, 36, 33, 0.20);
  --ds-ink-10:     rgba(38, 36, 33, 0.10);
  --ds-ink-06:     rgba(38, 36, 33, 0.06);

  --ds-gold-20:    rgba(164, 128, 84, 0.20);
  --ds-gold-10:    rgba(164, 128, 84, 0.10);

  --ds-cream-60:   rgba(230, 223, 209, 0.60);

  /* ---- Semantic color tokens ---- */
  --color-bg:           var(--ds-paper);
  --color-bg-alt:       var(--ds-paper-2);
  --color-bg-dark:      var(--ds-ink);
  --color-bg-burgundy:  var(--ds-burgundy);

  --color-fg:           var(--ds-ink);          /* body text */
  --color-fg-muted:     var(--ds-ink-60);       /* secondary text, captions */
  --color-fg-soft:      var(--ds-ink-40);       /* tertiary, metadata */
  --color-fg-on-dark:   var(--ds-cream);        /* text on ink/burgundy bg */
  --color-fg-on-dark-muted: rgba(230, 223, 209, 0.65);

  --color-accent:       var(--ds-rouge);        /* link/cta/active */
  --color-accent-warm:  var(--ds-gold);         /* secondary accent */
  --color-brand:        var(--ds-burgundy);

  --color-border:       rgba(38, 36, 33, 0.12);
  --color-border-strong:rgba(38, 36, 33, 0.24);
  --color-divider:      rgba(38, 36, 33, 0.08);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Type families
     - Sans (Montserrat): body, UI, labels, navigation. Geometric, stable.
     - Serif (Cormorant Garamond): editorial titles, hero, pull-quotes.
       Chosen as a Google-Fonts companion to soften Montserrat while
       echoing the high-contrast didone-ish feel of the DESSIGNE wordmark.
       FLAG: substitute pending — replace with the agency's chosen
       display serif when delivered. */
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Cormorant Garamond', 'Cormorant', 'Garamond', 'Times New Roman', serif;

  /* Type scale — modest, balanced, "carré" */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    21px;
  --text-xl:    26px;
  --text-2xl:   34px;
  --text-3xl:   46px;
  --text-4xl:   62px;
  --text-5xl:   84px;

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter-spacing — Montserrat reads better with tracking on small caps */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;  /* small-caps labels, eyebrow */
  --tracking-widest: 0.32em;  /* DESSIGNE wordmark style */

  /* ============================================================
     SPACING — 4px base, balanced
     ============================================================ */
  --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;
  --space-11: 192px;

  /* ============================================================
     RADIUS — single value, applied everywhere.
     ============================================================ */
  --radius:    4px;
  /* legacy aliases — all resolve to the single radius */
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --radius-none: 0;
  --radius-pill: 999px; /* reserved for tags / chips only */

  /* ============================================================
     SHADOW — single elevation, soft and neutral.
     ============================================================ */
  --shadow:    0 2px 6px rgba(38, 36, 33, 0.06), 0 1px 2px rgba(38, 36, 33, 0.04);
  /* legacy aliases — all resolve to the single shadow */
  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow);
  --shadow-xl: var(--shadow);
  --shadow-inset: inset 0 0 0 1px var(--color-border);

  /* ============================================================
     MOTION — restrained, refined
     ============================================================ */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   140ms;
  --duration-base:   240ms;
  --duration-slow:   480ms;
  --duration-hero:   900ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes / mixins instead of raw font-* properties.
   ============================================================ */

.ds-display,
.ds-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(48px, 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.ds-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(36px, 4.4vw, var(--text-4xl));
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.ds-h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

.ds-h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-warm);
}

.ds-body,
.ds-p {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
}

.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.ds-body-sm,
.ds-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
}

.ds-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: 1.35;
  color: var(--color-brand);
}

.ds-label,
.ds-button-text {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================
   GLOBAL DEFAULTS — apply when colors_and_type.css is imported
   ============================================================ */

html { background: var(--color-bg); color: var(--color-fg); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--weight-regular) var(--text-5xl)/var(--leading-tight) var(--font-serif); letter-spacing: var(--tracking-tight); }
h2 { font: var(--weight-regular) var(--text-4xl)/1.12 var(--font-serif); letter-spacing: var(--tracking-tight); }
h3 { font: var(--weight-medium) var(--text-3xl)/1.2 var(--font-serif); }
h4 { font: var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-sans); }
h5 { font: var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-sans); }
h6 { font: var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
p  { font-size: var(--text-base); line-height: var(--leading-relaxed); }
a  { color: var(--color-accent); text-decoration: none; transition: color var(--duration-fast) var(--easing-standard); }
a:hover { color: var(--ds-burgundy); }