/* =====================================================================
   Oxana Cernetchi — Design Tokens
   A quiet, gallery-feel system. The site never competes with the paintings.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-400i.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/DMSans-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/DMSans-italic.woff2") format("woff2");
}

:root {
  /* ---------- Color: Surfaces ---------- */
  --bg:            #FAF9F7;   /* primary canvas — soft warm white */
  --bg-blush:      #FDF6F3;   /* alt warm background, hero / about */
  --bg-rule:       #F2F0ED;   /* faint divider tint */
  --bg-sunken:     #F3EFEA;   /* card / inset surface */
  --bg-dark:       #2E2A2A;   /* inverted hero, footer */

  /* ---------- Color: Foreground ---------- */
  --ink:           #2E2A2A;   /* primary text — soft charcoal */
  --ink-soft:      #3A3535;   /* secondary text */
  --ink-mute:      #6F6864;   /* metadata / captions */
  --ink-faint:     #A9A29D;   /* helper, disabled labels */
  --ink-inverse:   #FAF9F7;   /* on dark surfaces */

  /* ---------- Color: Accent ---------- */
  /* Pale gold: primary accent, used for links, buttons, active states.  */
  /* Sized for hover/active by darkening, never by saturating.           */
  --accent:        #B89968;   /* pale gold, buttons + links */
  --accent-deep:   #8C7142;   /* hover / active state */
  --accent-soft:   #E8DCC1;   /* tinted highlight strip */
  --accent-wash:   #F5EFE0;   /* large background wash */

  /* Secondary: pastel rose. Used where extra contrast or warmth is      */
  /* wanted — feature bands, hover wash on photo tiles, the lightest     */
  /* section dividers. Never use rose AND gold on the same surface.     */
  --rose:          #ECC9C2;   /* pastel rose */
  --rose-deep:     #C48077;   /* rose hover */
  --rose-soft:     #F4DEDB;   /* tinted highlight */
  --rose-wash:     #FAEDEA;   /* large background wash */

  /* Pure white — used sparingly, only where high contrast is required   */
  /* (e.g. a rose-tinted band needs a clean white card on top).         */
  --white:         #FFFFFF;

  /* ---------- Color: Status (used sparingly) ---------- */
  --sold:          #9A8E84;   /* "Sold" badge — warm grey, not red */
  --available:     #6F7C5A;   /* "Available" — quiet olive, never bright */

  /* ---------- Type families ---------- */
  --font-display:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:     "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-label:    "DM Sans", -apple-system, sans-serif;

  /* ---------- Type scale ---------- */
  /* Display tier — serif, light weight, generous tracking-out */
  --fs-display:    clamp(48px, 6vw, 88px);    /* hero artist name */
  --fs-h1:         clamp(36px, 4.2vw, 56px);  /* page titles */
  --fs-h2:         clamp(28px, 3.2vw, 40px);  /* section titles */
  --fs-h3:         clamp(22px, 2.4vw, 28px);  /* sub-section, painting title */

  /* Body tier — sans, comfortable reading */
  --fs-lead:       20px;   /* intro paragraphs */
  --fs-body:       16px;   /* default body */
  --fs-small:      15px;   /* secondary, captions */
  --fs-label:      13px;   /* eyebrow, small caps labels */

  /* ---------- Line-heights ---------- */
  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.65;
  --lh-tight:      1.4;

  /* ---------- Letter-spacing ---------- */
  --tr-display:    -0.01em;   /* slight optical tighten on serif display */
  --tr-label:      0.16em;    /* small caps eyebrows */
  --tr-button:     0.10em;

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

  /* ---------- Spacing — 4px base, fibonacci-ish for gallery rhythm ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Layout ---------- */
  --container:     1280px;
  --container-text: 680px;     /* About / written copy max-width */
  --gutter:        clamp(20px, 4vw, 56px);
  --nav-h:         72px;

  /* ---------- Borders ---------- */
  --hair:          1px solid rgba(46, 42, 42, 0.10);  /* faint rule */
  --hair-strong:   1px solid rgba(46, 42, 42, 0.22);
  --hair-accent:   1px solid var(--accent);

  /* ---------- Radii — minimal; gallery work is square ---------- */
  --r-none:   0;
  --r-sm:     2px;
  --r-md:     4px;
  --r-pill:   999px;

  /* ---------- Shadow — almost imperceptible ---------- */
  --shadow-1:  0 1px 2px rgba(46, 42, 42, 0.04);
  --shadow-2:  0 8px 24px rgba(46, 42, 42, 0.06);
  --shadow-art: 0 30px 60px -20px rgba(46, 42, 42, 0.18); /* painting hover lift */

  /* ---------- Motion ---------- */
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:  180ms;
  --t-base:  320ms;
  --t-slow:  640ms;
}

/* =====================================================================
   Semantic element defaults
   Use the .oc- helper classes when applying these to non-semantic markup.
   ===================================================================== */

.oc-body,
body.oc {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.oc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.oc-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.oc-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
}
.oc-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--ink);
}
.oc-italic {
  font-style: italic;
  font-family: var(--font-display);
}

.oc-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
.oc-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.oc-small {
  font-size: var(--fs-small);
  color: var(--ink-mute);
}

/* Eyebrow / small caps label — used for "COLLECTION", "EXHIBITION", etc. */
.oc-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ink-mute);
}

/* Caption — under paintings: title (italic serif) · medium · dimensions */
.oc-caption {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  line-height: var(--lh-tight);
}
.oc-caption-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}

/* Links — quiet underline, accent on hover */
.oc-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(46, 42, 42, 0.25);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease-quiet),
              text-decoration-color var(--t-fast) var(--ease-quiet);
}
.oc-link:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent-deep);
}

/* Hair rule */
.oc-rule {
  border: 0;
  border-top: var(--hair);
  margin: var(--s-7) 0;
}