/**
 * ATELIER DAKROUB BRAND STYLES
 */

/* ===========================================
   CSS Custom Properties
   =========================================== */

:root {
  /* Font families */
  --font-sans:
    Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-serif: "Canela Text", Georgia, "Times New Roman", serif;

  /* Colors */
  --color-atelier-black: #111;
  --color-atelier-white: #ffffff;
  --color-atelier-rose: #f4c6cc;
  --color-atelier-gray-warm: #6f6f6f;
  --color-atelier-gray-soft: #ededed;

  /* Spacing scale */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 3rem;
  --spacing-8: 4rem;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
}

/* ===========================================
   Font Faces
   =========================================== */

@font-face {
  font-family: "Outfit";
  src: url("/brand/fonts/Outfit-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Canela Text";
  src: url("/brand/fonts/CanelaText-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* ===========================================
   Base Styles
   =========================================== */

html {
  font-family: var(--font-sans);
  color: var(--color-atelier-black);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text selection styling */
::selection {
  background-color: var(--color-atelier-rose);
  color: var(--color-atelier-black);
}

.bg-atelier-rose ::selection {
  background-color: var(--color-atelier-black);
  color: var(--color-atelier-rose);
}

/* ===========================================
   Typography Classes
   =========================================== */

.type-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 4rem;
  letter-spacing: 0;
}

.type-subtitle {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.875rem;
}

.type-headline {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 2.375rem;
}

.type-subhead {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.875rem;
}

.type-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.type-body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.625rem;
}

.type-lead {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.type-body-sm {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.375rem;
}

.type-caption {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.type-footnote {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1rem;
}

.type-ui {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.type-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.02em;
}

.type-button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1rem;
  letter-spacing: 0.015em;
}