/* =============================================================
   CSS Custom Properties – Atelier Kleyn
   Tekstdomein: atelierkleyn
   ============================================================= */

:root {

  /* Brand colours */
  --color-black:        #0a0a0a;
  --color-black-soft:   #111111;
  --color-black-card:   #161616;
  --color-gold:         #c9a84c;
  --color-gold-light:   #e2c97e;
  --color-gold-dark:    #9c7a2e;
  --color-gold-rgb:     201, 168, 76;

  /* Neutral */
  --color-white:        #f5f0e8;
  --color-white-dim:    #c8bfaf;
  --color-true-white:   #ffffff;

  /* Borders */
  --border-gold:        rgba(201, 168, 76, 0.2);
  --border-gold-hover:  rgba(201, 168, 76, 0.6);

  /* Status */
  --color-error:        #c62828;
  --color-ok:           #2e7d32;

  /* Typography */
  --font-display:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base:     16px;
  --color-font-default: var(--color-white);

  /* Layout */
  --container-width:    1200px;
  --container-padding:  40px;

  /* Radius */
  --radius:             2px;
  --radius-sm:          2px;
  --radius-md:          4px;

  /* Spacing scale */
  --space-xs:           0.5rem;
  --space-sm:           1rem;
  --space-md:           2rem;
  --space-lg:           4rem;
  --space-xl:           7.5rem;
  --section-padding:    7.5rem;

  /* Shadows */
  --shadow:             0 4px 24px 0 rgba(0, 0, 0, 0.4);
  --shadow-gold:        0 4px 24px 0 rgba(201, 168, 76, 0.15);

  /* Transitions */
  --ease:               0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Navigation */
  --nav-height:         90px;
  --nav-height-mobile:  72px;

}