/* ============================================================
   INTERIX STUDIO – Design System
   ============================================================ */

/* ---- Google Fonts (loaded in HTML) ---- */
/* Outfit 300/400/500/600/700  |  Playfair Display 400/500/600/700 italic */

/* ====================== CSS RESET ====================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:auto}
body{line-height:1.6;min-height:100vh;overflow-x:hidden}
img,video,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;border:none;outline:none;background:none}
button{cursor:pointer}

/* ====================== THEME VARIABLES ====================== */
:root{
  /* --- Dark Theme (default) --- */
  --bg-primary:      #111111;
  --bg-secondary:    #1a1a1a;
  --bg-tertiary:     #222222;
  --bg-card:         #1e1e1e;
  --bg-glass:        rgba(30,30,30,.65);

  --text-primary:    #f5f0eb;
  --text-secondary:  #b0a99f;
  --text-muted:      #6b6560;

  --accent:          #b08d57;
  --accent-light:    #c9a96e;
  --accent-dark:     #8a6d3b;
  --accent-glow:     rgba(176,141,87,.35);

  --border:          rgba(255,255,255,.08);
  --border-hover:    rgba(255,255,255,.15);

  --shadow-sm:       0 2px 8px rgba(0,0,0,.25);
  --shadow-md:       0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:       0 20px 60px rgba(0,0,0,.5);

  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-full:     9999px;

  /* spacing scale */
  --sp-xs: .25rem; --sp-sm: .5rem; --sp-md: 1rem; --sp-lg: 2rem; --sp-xl: 4rem; --sp-2xl: 6rem; --sp-3xl: 8rem;

  /* transitions */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-smooth: cubic-bezier(.45,0,.55,1);
  --dur-fast:  .2s;
  --dur-med:   .4s;
  --dur-slow:  .8s;

  /* cursor */
  --cursor-size: 20px;
  --cursor-color: var(--accent);
}

/* --- Light Theme --- */
[data-theme="light"]{
  --bg-primary:      #f8f6f3;
  --bg-secondary:    #efece7;
  --bg-tertiary:     #e6e2dc;
  --bg-card:         #ffffff;
  --bg-glass:        rgba(255,255,255,.7);

  --text-primary:    #1a1a1a;
  --text-secondary:  #5a5550;
  --text-muted:      #9a9590;

  --border:          rgba(0,0,0,.08);
  --border-hover:    rgba(0,0,0,.15);

  --shadow-sm:       0 2px 8px rgba(0,0,0,.06);
  --shadow-md:       0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:       0 20px 60px rgba(0,0,0,.12);
}

/* ====================== TYPOGRAPHY ====================== */
body{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:400;
  color:var(--text-primary);
  background:var(--bg-primary);
  transition:background var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out);
}

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
}

.h-display{font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1.05;letter-spacing:-.04em}
.h1{font-size:clamp(2.25rem,5vw,4.5rem)}
.h2{font-size:clamp(1.75rem,4vw,3rem)}
.h3{font-size:clamp(1.25rem,2.5vw,2rem)}
.h4{font-size:clamp(1.1rem,2vw,1.5rem)}

.body-lg{font-size:1.125rem;line-height:1.7}
.body-md{font-size:1rem;line-height:1.6}
.body-sm{font-size:.875rem;line-height:1.5}
.caption{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--text-muted)}

/* ====================== LAYOUT ====================== */
.container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
}

.section{
  padding:clamp(4rem,10vw,8rem) 0;
  position:relative;
}

.grid{display:grid;gap:var(--sp-lg)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.flex{display:flex;gap:var(--sp-md)}
.flex-center{align-items:center;justify-content:center}
.flex-between{align-items:center;justify-content:space-between}
.flex-col{flex-direction:column}

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.875rem 2rem;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:.9375rem;
  border-radius:var(--radius-full);
  transition:all var(--dur-med) var(--ease-out);
  position:relative;overflow:hidden;
  letter-spacing:.03em;text-transform:uppercase;
}

.btn-primary{
  background:var(--accent);color:#fff;
}
.btn-primary:hover{background:var(--accent-light);box-shadow:0 8px 30px var(--accent-glow)}

.btn-outline{
  border:1.5px solid var(--accent);color:var(--accent);
}
.btn-outline:hover{background:var(--accent);color:#fff}

.btn-ghost{
  color:var(--text-primary);
}
.btn-ghost:hover{color:var(--accent)}

/* ====================== SECTION HEADER ====================== */
.section-label{
  display:inline-block;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  margin-bottom:var(--sp-md);
  font-family:'Outfit',sans-serif;
}

.section-title{
  margin-bottom:var(--sp-md);
}

.section-desc{
  color:var(--text-secondary);
  max-width:600px;
  font-size:1.05rem;line-height:1.7;
}

/* ====================== DIVIDER ====================== */
.divider{
  width:60px;height:2px;
  background:var(--accent);
  margin:var(--sp-lg) 0;
}

/* ====================== SCROLL PROGRESS BAR ====================== */
#scroll-progress{
  position:fixed;top:0;left:0;
  width:0%;height:3px;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent),var(--accent-light));
  z-index:10000;
  transition:none;
  pointer-events:none;
}

/* ====================== CUSTOM CURSOR ====================== */
.custom-cursor{
  position:fixed;top:0;left:0;
  width:var(--cursor-size);height:var(--cursor-size);
  border:1.5px solid var(--accent);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-out),height .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out);
  mix-blend-mode:difference;
}
.custom-cursor.expanded{
  width:50px;height:50px;
  background:rgba(176,141,87,.15);
  border-color:var(--accent-light);
}
.custom-cursor.hide{opacity:0}

/* hide default cursor */
html.has-custom-cursor,
html.has-custom-cursor *{cursor:none!important}

/* ====================== RESPONSIVE ====================== */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .custom-cursor{display:none!important}
  html.has-custom-cursor,html.has-custom-cursor *{cursor:auto!important}
}