/* ============================================================
   EAGLES PHOTOGRAPHY — ROOT CSS
   Design tokens, reset, base styles, typography utilities
   feedagency.co style adapted for photography studio
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Great+Vibes&family=Noto+Serif+Tamil:wght@400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Colors ── */
  --color-bg:        #F5F0E8;  /* Warm cream */
  --color-ink:       #0D0D0D;  /* Near black */
  --color-ink-muted: #6B6B5F;  /* Warm muted grey */
  --color-surface:   #FFFFFF;  /* White cards */
  --color-dark:      #0D0D0D;  /* Dark sections */
  --color-dark-text: #F5F0E8;  /* Text on dark */
  --color-border:    #E0D8CC;  /* Subtle border */

  /* Accent colors — one per section */
  --color-teal:   #6BB5A8;   /* (01) WORK       */
  --color-pink:   #E8869A;   /* (02) ABOUT      */
  --color-orange: #E85B35;   /* (03) SERVICES   */
  --color-plum:   #8B5E83;   /* (04) BLOG & FAQ */
  --color-amber:  #F5A523;   /* (05) CONTACT + primary CTA */
  --color-gold-light: #FBC65E; /* Lighter gold — gradient partner for amber */

  /* Button defaults */
  --color-btn-bg:   #F5A523;
  --color-btn-text: #0D0D0D;

  /* ── Fonts ──
     Noto Serif Tamil sits in each stack as the fallback, so Tamil
     characters (language toggle) render correctly even inside
     Anton/DM Sans text — Latin glyphs are unaffected. */
  --font-display: 'Anton', 'Noto Serif Tamil', sans-serif;
  --font-body:    'DM Sans', 'Noto Serif Tamil', sans-serif;
  --font-logo:    'Great Vibes', cursive;
  --font-tamil:   'Noto Serif Tamil', serif;

  /* ── Type scale ── */
  --text-display-xl: clamp(72px, 12vw, 160px);
  --text-display-l:  clamp(48px, 8vw, 100px);
  --text-display-m:  clamp(32px, 5vw, 64px);
  --text-body-l:     18px;
  --text-body-m:     15px;
  --text-label:      11px;
  --text-button:     15px;

  /* ── Line heights ── */
  --lh-display: 0.92;
  --lh-body-l:  1.7;
  --lh-body-m:  1.6;

  /* ── Spacing ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 80px;
  --space-3xl: 100px;

  /* ── Layout ── */
  --nav-right-w:        90px;   /* Right side nav width */
  --nav-top-h:          64px;   /* Top navbar height */
  --content-max:        1100px;
  --content-pad:        60px;

  /* ── Easing (matching GSAP names) ── */
  --ease-expo-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power2-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-back-out:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-default:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Durations ── */
  --dur-fast:   0.2s;
  --dur-base:   0.3s;
  --dur-slow:   0.5s;
  --dur-slower: 0.8s;
  --dur-anim:   1.0s;

  /* ── Border radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 100px;
  --r-full: 50%;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px  rgba(13, 13, 13, 0.08);
  --shadow-md: 0 8px 24px rgba(13, 13, 13, 0.12);
  --shadow-lg: 0 20px 60px rgba(13, 13, 13, 0.16);

  /* ── Z-index scale ── */
  --z-base:      1;
  --z-overlay:   10;
  --z-sticky:    100;
  --z-nav:       1000;
  --z-modal:     2000;
  --z-cursor:    9000;
  --z-curtain:   9998;
  --z-progress:  9999;
}

/* ============================================================
   CSS RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The [hidden] attribute must always win over component display rules
   (e.g. .ep-filter-tabs{display:flex}). Used by portfolio.js empty
   states and the "coming soon" before/after sections. */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  /* Lenis overrides scroll-behavior — leave as auto */
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-ink);
  background-color: var(--color-bg);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Custom cursor — desktop with pointer device only */
  cursor: none;
}

/* Restore system cursor on touch / non-pointer devices */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

img, video, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: none;
  padding: 0;
}

@media (hover: none), (pointer: coarse) {
  button { cursor: pointer; }
}

input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--color-bg); }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-muted); }

/* ============================================================
   SELECTION & FOCUS
   ============================================================ */
::selection {
  background: var(--color-amber);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   TYPOGRAPHY CLASSES
   ============================================================ */

/* Display — Anton */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 400;
  line-height: var(--lh-display);
}

.t-display-l {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  font-weight: 400;
  line-height: var(--lh-display);
}

.t-display-m {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  font-weight: 400;
  line-height: 1.0;
}

/* Body — DM Sans */
.t-body-l {
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  line-height: var(--lh-body-l);
}

.t-body-m {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.t-button {
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 600;
}

/* Logo — Great Vibes */
.t-logo {
  font-family: var(--font-logo);
}

/* Tamil */
.lang-ta, [lang="ta"] {
  font-family: var(--font-tamil);
}

/* ── Color utilities ── */
.c-ink       { color: var(--color-ink); }
.c-muted     { color: var(--color-ink-muted); }
.c-cream     { color: var(--color-dark-text); }
.c-teal      { color: var(--color-teal); }
.c-pink      { color: var(--color-pink); }
.c-orange    { color: var(--color-orange); }
.c-plum      { color: var(--color-plum); }
.c-amber     { color: var(--color-amber); }
.c-white     { color: #fff; }

/* ── Background utilities ── */
.bg-cream    { background-color: var(--color-bg); }
.bg-dark     { background-color: var(--color-dark); }
.bg-surface  { background-color: var(--color-surface); }
.bg-teal     { background-color: var(--color-teal); }
.bg-pink     { background-color: var(--color-pink); }
.bg-orange   { background-color: var(--color-orange); }
.bg-plum     { background-color: var(--color-plum); }
.bg-amber    { background-color: var(--color-amber); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

/* Page wrapper — accounts for fixed right nav */
.ep-page {
  margin-right: var(--nav-right-w);
  padding-top: var(--nav-top-h);
}

/* Content container */
.ep-container {
  max-width: calc(var(--content-max) + var(--content-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Section padding */
.ep-section {
  padding: var(--space-3xl) var(--content-pad);
}

/* Full-bleed (no horizontal padding) */
.ep-full {
  padding: var(--space-3xl) 0;
}

/* Flex helpers */
.ep-flex          { display: flex; }
.ep-flex-col      { display: flex; flex-direction: column; }
.ep-align-center  { align-items: center; }
.ep-align-end     { align-items: flex-end; }
.ep-justify-between { justify-content: space-between; }
.ep-justify-center  { justify-content: center; }
.ep-flex-wrap     { flex-wrap: wrap; }
.ep-gap-sm        { gap: var(--space-sm); }
.ep-gap-md        { gap: var(--space-md); }
.ep-gap-lg        { gap: var(--space-lg); }

/* Grid helpers */
.ep-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.ep-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.ep-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

/* Section label row (dot + label text) */
.ep-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ep-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.ep-dot-teal   { background: var(--color-teal); }
.ep-dot-pink   { background: var(--color-pink); }
.ep-dot-orange { background: var(--color-orange); }
.ep-dot-plum   { background: var(--color-plum); }
.ep-dot-amber  { background: var(--color-amber); }

/* ============================================================
   RESPONSIVE ROOT ADJUSTMENTS
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --content-pad: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --content-pad:   24px;
    --nav-right-w:   0px;
    --nav-top-h:     60px;
  }

  .ep-page {
    margin-right: 0;
  }

  .ep-grid-2 { grid-template-columns: 1fr; }
  .ep-grid-3 { grid-template-columns: 1fr; }
  .ep-grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  :root {
    --content-pad: 20px;
  }

  .ep-grid-4 { grid-template-columns: 1fr; }
}