/* ============================================================
   variables.css — Kallisto Portfolio Site
   All CSS custom properties — edit these per client
   ============================================================ */

:root {
  /* === BRAND COLORS — Kallisto: Modern Lifestyle === */
  --color-primary:     #0F0F12;   /* Near-black — headings, primary text */
  --color-secondary:   #F7F5F2;   /* Warm off-white — backgrounds */
  --color-accent:      #C4A882;   /* Warm gold — CTAs, highlights */

  /* === RGB values for rgba() usage === */
  --color-primary-rgb:   15, 15, 18;
  --color-secondary-rgb: 247, 245, 242;
  --color-bg-rgb:        247, 245, 242;

  /* === DERIVED === */
  --color-primary-10:  color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-accent-10:   color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-accent-20:   color-mix(in srgb, var(--color-accent) 20%, transparent);

  /* === SEMANTIC — consistent across all projects === */
  --color-bg:          var(--color-secondary);
  --color-bg-alt:      color-mix(in srgb, var(--color-primary) 4%, var(--color-secondary));
  --color-text:        var(--color-primary);
  --color-text-muted:  color-mix(in srgb, var(--color-primary) 55%, var(--color-secondary));
  --color-border:      color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-cta-text:    var(--color-secondary);

  /* === DARK SURFACE (hero/banner) === */
  --color-dark-bg:     #0F0F12;
  --color-dark-text:   #F7F5F2;
  --color-dark-muted:  rgba(247, 245, 242, 0.60);
  --color-dark-border: rgba(247, 245, 242, 0.12);

  /* === TYPOGRAPHY === */
  --font-heading: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* === TYPE SCALE (fluid, responsive) === */
  --text-display: clamp(3.2rem, 8vw, 6.5rem);
  --text-h1:  clamp(2.2rem, 5vw, 4rem);
  --text-h2:  clamp(1.8rem, 3.5vw, 3rem);
  --text-h3:  clamp(1.3rem, 2.5vw, 1.8rem);
  --text-h4:  clamp(1.1rem, 2vw, 1.4rem);
  --text-body:   1rem;
  --text-sm:     0.875rem;
  --text-xs:     0.75rem;
  --text-label:  0.68rem;
  --label-spacing: 0.14em;
  --label-transform: uppercase;

  /* === SPACING SCALE === */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  5rem;      /* 80px */
  --space-4xl:  8rem;      /* 128px */
  --space-section: 7rem;

  /* === BORDER RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.14);
  --shadow-hover: 0 20px 60px rgba(0,0,0,0.18);

  /* === TRANSITIONS === */
  --transition-fast:    0.15s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-luxury:  0.8s cubic-bezier(0.16, 1, 0.3, 1);
}