/*
 * InstaCoach Design System — "Tide" direction
 * Calm, supportive, trustworthy. Ocean blue + warm gold on a cool off-white.
 * Fonts: Newsreader (serif display) + Hanken Grotesk (sans UI/body)
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS — "Tide" palette
   ============================================================ */
:root {
  /* ---- Font families ---------------------------------------- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Legacy aliases (kept for backward compat) */
  --font-family-primary: var(--font-sans);
  --font-family-brand:   var(--font-serif);
  --font-size-base: 16px;

  /* ---- Font weights ----------------------------------------- */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale ------------------------------------------- */
  --text-display:    56px;  --leading-display: 1.02;
  --text-h1:         40px;  --leading-h1:      1.06;
  --text-h2:         32px;  --leading-h2:      1.10;
  --text-h3:         24px;  --leading-h3:      1.18;
  --text-h4:         19px;  --leading-h4:      1.30;
  --text-body-lg:    17px;  --leading-body-lg: 1.55;
  --text-body:       15px;  --leading-body:    1.55;
  --text-sm:         13px;  --leading-sm:      1.50;
  --text-xs:         11px;  --leading-xs:      1.45;

  /* ---- Letter spacing --------------------------------------- */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:     0em;
  --tracking-label:    0.12em;

  /* ---- Color primitives · Ocean (brand blue) ---------------- */
  --ocean-900: #14233F;
  --ocean-800: #1A2E54;
  --ocean-700: #213C70;
  --ocean-600: #2C5AA8;   /* PRIMARY */
  --ocean-500: #3A6CC4;
  --ocean-400: #5E8AD6;
  --ocean-300: #93B2E6;
  --ocean-200: #BFD3F0;
  --ocean-100: #DCE7F8;
  --ocean-50:  #EEF3FC;

  /* ---- Color primitives · Gold (warm accent) ---------------- */
  --gold-700: #8A6526;
  --gold-600: #A87C36;
  --gold-500: #C49A52;    /* ACCENT */
  --gold-400: #D2AE6E;
  --gold-300: #E0C691;
  --gold-100: #F2E7CC;

  /* ---- Color primitives · Mist (cool neutral) --------------- */
  --mist-50:  #FAFBFD;
  --mist-100: #F1F4F9;    /* page surface */
  --mist-200: #E6EBF2;
  --mist-300: #D5DCE7;
  --mist-400: #B7C1D0;
  --mist-500: #8C97A8;
  --mist-600: #646E7E;    /* muted text */
  --mist-700: #474F5C;
  --mist-800: #313842;
  --mist-900: #1B2029;

  /* ---- Status primitives (calm, low-chroma) ----------------- */
  --green-600: #2F7D5B;  --green-100: #DBEDE2;
  --amber-600: #B5832C;  --amber-100: #F4E8CB;
  --clay-600:  #B5503C;  --clay-100:  #F3DED7;
  --teal-600:  #2C8A86;  --teal-100:  #D3EAE8;

  --white: #FFFFFF;
  --black: #0C1118;

  /* ---- Semantic tokens — consume these in UI ---------------- */

  /* Brand */
  --primary:          var(--ocean-600);
  --primary-hover:    var(--ocean-700);
  --primary-active:   var(--ocean-800);
  --primary-soft:     var(--ocean-100);
  --primary-contrast: var(--mist-50);
  --accent:           var(--gold-500);
  --accent-hover:     var(--gold-600);
  --accent-soft:      var(--gold-100);

  /* Text */
  --text-strong:      var(--ocean-900);
  --text-body:        var(--mist-800);
  --text-muted:       var(--mist-600);
  --text-subtle:      var(--mist-500);
  --text-inverse:     var(--mist-50);
  --text-link:        var(--ocean-600);
  --text-on-accent:   var(--ocean-900);

  /* Surfaces */
  --surface-page:     var(--mist-100);
  --surface-card:     var(--white);
  --surface-sunken:   var(--mist-200);
  --surface-hover:    var(--ocean-50);
  --surface-inverse:  var(--ocean-900);
  --surface-scrim:    color-mix(in srgb, var(--ocean-900) 45%, transparent);

  /* Borders */
  --border-subtle:    var(--mist-200);
  --border-default:   var(--mist-300);
  --border-strong:    var(--mist-400);
  --border-brand:     var(--ocean-200);

  /* Focus */
  --focus-ring:       color-mix(in srgb, var(--ocean-500) 55%, transparent);
  --focus-offset:     var(--surface-card);

  /* Status */
  --success:        var(--green-600);  --success-soft:   var(--green-100);
  --warning:        var(--amber-600);  --warning-soft:   var(--amber-100);
  --danger:         var(--clay-600);   --danger-soft:    var(--clay-100);
  --info:           var(--teal-600);   --info-soft:      var(--teal-100);

  /* ---- Elevation (ocean-tinted shadows) --------------------- */
  --shadow-xs:  0 1px 2px rgba(20,35,63,0.06);
  --shadow-sm:  0 2px 6px -1px rgba(20,35,63,0.09), 0 1px 2px rgba(20,35,63,0.05);
  --shadow-md:  0 10px 24px -14px rgba(20,35,63,0.32), 0 2px 6px -2px rgba(20,35,63,0.09);
  --shadow-lg:  0 22px 44px -22px rgba(20,35,63,0.34), 0 6px 14px -8px rgba(20,35,63,0.11);
  --shadow-xl:  0 36px 70px -28px rgba(20,35,63,0.38);
  --shadow-inset: inset 0 1px 2px rgba(20,35,63,0.10);
  --ring: 0 0 0 3px var(--focus-ring);

  /* ---- Spacing (4px base) ----------------------------------- */
  --space-0:  0;   --spacing-0: 0;
  --space-1:  4px;  --spacing-1: 0.25rem;
  --space-2:  8px;  --spacing-2: 0.5rem;
  --space-3:  12px; --spacing-3: 0.75rem;
  --space-4:  16px; --spacing-4: 1rem;
  --space-5:  20px; --spacing-5: 1.25rem;
  --space-6:  24px; --spacing-6: 1.5rem;
  --space-8:  32px; --spacing-8: 2rem;
  --space-10: 40px; --spacing-10: 2.5rem;
  --space-12: 48px; --spacing-12: 3rem;
  --space-16: 64px; --spacing-16: 4rem;
  --space-20: 80px; --spacing-20: 5rem;

  /* ---- Radii ------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ---- Legacy radius aliases -------------------------------- */
  --border-radius-sm:  6px;
  --border-radius-md:  10px;
  --border-radius-lg:  14px;
  --border-radius-xl:  18px;
  --border-radius-2xl: 24px;
  --border-radius-3xl: 32px;

  /* ---- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.40, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --transition-fast: 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-base: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Layout ----------------------------------------------- */
  --sidebar-w:    260px;
  --topbar-h:      64px;
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg: 1100px;
  --container-xl: 1320px;

  /* ---- Z-index scale ---------------------------------------- */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;

  /* ---- Legacy color aliases (kept for backward compat) ------ */
  --background:         var(--surface-page);
  --foreground:         var(--text-strong);
  --card:               var(--surface-card);
  --card-foreground:    var(--text-body);
  --border:             var(--border-subtle);
  --input-background:   var(--surface-card);
  --muted:              var(--surface-sunken);
  --muted-foreground:   var(--text-muted);

  /* Legacy gray aliases mapped to mist */
  --gray-50:  var(--mist-50);
  --gray-100: var(--mist-100);
  --gray-200: var(--mist-200);
  --gray-300: var(--mist-300);
  --gray-400: var(--mist-400);
  --gray-500: var(--mist-500);
  --gray-600: var(--mist-600);
  --gray-700: var(--mist-700);
  --gray-800: var(--mist-800);
  --gray-900: var(--mist-900);
  --text-primary:   var(--text-strong);
  --text-secondary: var(--text-muted);
  --border-color:   var(--border-subtle);
  --light-color:    var(--surface-page);
  --dark-color:     var(--mist-900);

  /* Legacy purple aliases → remapped to ocean */
  --purple-start:    var(--ocean-600);
  --purple-end:      var(--ocean-700);
  --purple-light:    var(--ocean-50);
  --purple-medium:   var(--ocean-400);
  --purple-gradient: linear-gradient(135deg, var(--ocean-600) 0%, var(--ocean-700) 100%);

  /* Legacy status */
  --success-light: var(--success-soft);
  --warning-light: var(--warning-soft);
  --error:         var(--danger);
  --error-light:   var(--danger-soft);
  --info-light:    var(--info-soft);

  /* Sidebar (component-level) */
  --sidebar:                   var(--surface-card);
  --sidebar-foreground:        var(--text-body);
  --sidebar-primary:           var(--primary);
  --sidebar-primary-foreground: var(--primary-contrast);
  --sidebar-accent:            var(--surface-hover);
  --sidebar-accent-foreground: var(--text-strong);
  --sidebar-border:            var(--border-subtle);
  --sidebar-ring:              var(--focus-ring);
}

/* ============================================================
   BASE STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  background-color: var(--surface-page);
  line-height: 1.55;
}
button { font-family: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text-strong); }

.serif { font-family: var(--font-serif); font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.muted { color: var(--text-muted); }

/* ============================================================
   COMPONENT CLASSES
   ============================================================ */

/* ---- Buttons ---------------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--primary); color: var(--primary-contrast);
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-body); padding: 10px 18px;
  border-radius: var(--radius-md); border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); transform: translateY(1px) scale(0.99); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--surface-card); color: var(--text-strong);
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-body); padding: 10px 18px;
  border-radius: var(--radius-md); border: 1.5px solid var(--border-default);
  box-shadow: var(--shadow-xs); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-brand); box-shadow: var(--shadow-sm); }

/* ---- Card ------------------------------------------------- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-brand); }
.card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }

/* ---- Badge ------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: 3px 9px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap;
}
.badge-success,  .badge--success  { background: var(--success-soft); color: var(--success); }
.badge-warning,  .badge--warning  { background: var(--warning-soft); color: var(--warning); }
.badge-error,    .badge--danger   { background: var(--danger-soft);  color: var(--danger); }
.badge-info,     .badge--info     { background: var(--info-soft);    color: var(--info); }
.badge-purple,   .badge--brand    { background: var(--primary-soft); color: var(--ocean-700); }
.badge--accent                    { background: var(--accent-soft);  color: var(--gold-700); }
.badge--neutral                   { background: var(--surface-sunken); color: var(--text-muted); }

/* ---- Tag -------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 5px 12px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.tag:hover { background: var(--surface-hover); border-color: var(--border-brand); }
.tag--selected { background: var(--primary-soft); border-color: var(--border-brand); color: var(--ocean-700); font-weight: var(--weight-semibold); }

/* ---- Avatar ----------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); overflow: hidden;
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  color: var(--ocean-700); background: var(--primary-soft);
}
.avatar-sm, .avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-md, .avatar--md { width: 38px; height: 38px; font-size: 14px; }
.avatar-lg, .avatar--lg { width: 48px; height: 48px; font-size: 17px; }
.avatar-xl, .avatar--xl { width: 60px; height: 60px; font-size: 21px; }
.avatar-gradient { background: var(--primary); color: var(--primary-contrast); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Progress --------------------------------------------- */
.prog-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.prog-fill  { height: 100%; border-radius: var(--radius-pill); background: var(--primary); transition: width var(--dur-slow) var(--ease-out); }

/* ---- Input ------------------------------------------------ */
.input {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-body);
  color: var(--text-strong); background: var(--surface-card);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

/* ============================================================
   SIDEBAR — .sidebar-instacoach  (coachee dashboard)
   ============================================================ */
.sidebar-instacoach {
  background: var(--surface-card);
  border-right: 1px solid var(--border-subtle);
}

.sidebar-instacoach .menu-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem; border-radius: var(--radius-md);
  text-decoration: none; font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  cursor: pointer; border: none; background: transparent;
  width: 100%; text-align: left;
}
.sidebar-instacoach .menu-item:hover {
  background: var(--surface-hover); color: var(--text-strong);
}
.sidebar-instacoach .menu-item.active,
.sidebar-instacoach .menu-item[style*="background: linear-gradient"] {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: var(--shadow-sm);
}
.sidebar-instacoach .menu-item.active i,
.sidebar-instacoach .menu-item[style*="background: linear-gradient"] i {
  color: var(--primary-contrast) !important;
}
.sidebar-instacoach .menu-item i {
  font-size: 1rem; width: 1rem;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.sidebar-instacoach .upgrade-card {
  background: var(--primary-soft); padding: 1rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border-brand);
}
.sidebar-instacoach .upgrade-card i { color: var(--primary); }
.sidebar-instacoach .upgrade-card .btn-primary { width: 100%; font-size: var(--text-sm); padding: 0.5rem; }

/* ============================================================
   SIDEBAR — .sidebar-nav-item  (new layout classes)
   ============================================================ */
.sidebar-desktop { display: none; }
@media (min-width: 1024px) { .sidebar-desktop { display: flex !important; flex-direction: column; } }

.sidebar-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem; border-radius: var(--radius-md);
  color: var(--text-muted); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.sidebar-nav-item i { font-size: 1rem; width: 1rem; transition: color var(--dur-fast) var(--ease-out); }
.sidebar-nav-item:hover { background: var(--surface-hover); color: var(--text-strong); }

.sidebar-nav-item-active {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: var(--shadow-sm) !important;
}
.sidebar-nav-item-active i { color: var(--primary-contrast) !important; }

/* ============================================================
   BOTTOM NAV (mobile)
   ============================================================ */
.bottom-nav-mobile { display: flex; }
@media (min-width: 1024px) { .bottom-nav-mobile { display: none !important; } }

.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.25rem; flex: 1;
  padding: 0.75rem 0.5rem;
  color: var(--text-muted); font-family: var(--font-sans);
  font-size: 0.625rem; font-weight: var(--weight-medium);
  text-decoration: none; cursor: pointer; position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.bottom-nav-item i { font-size: 1.25rem; transition: color var(--dur-fast) var(--ease-out); }
.bottom-nav-item:hover { color: var(--primary); }
.bottom-nav-item-active { color: var(--primary) !important; }
.bottom-nav-item-active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--primary); border-radius: 0 0 3px 3px;
}
.bottom-nav-item-active i { color: var(--primary) !important; }

/* ============================================================
   UTILITY — gradients (legacy names kept)
   ============================================================ */
.gradient-purple      { background: linear-gradient(135deg, var(--ocean-600) 0%, var(--ocean-700) 100%); }
.gradient-purple-text {
  background: linear-gradient(135deg, var(--ocean-600) 0%, var(--ocean-700) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-blue   { background: linear-gradient(135deg, var(--ocean-500) 0%, var(--teal-600) 100%); }
.gradient-green  { background: linear-gradient(135deg, var(--green-600) 0%, #1faa73 100%); }
.gradient-amber  { background: linear-gradient(135deg, var(--amber-600) 0%, var(--gold-500) 100%); }
.gradient-pink   { background: linear-gradient(135deg, var(--clay-600) 0%, #d4705c 100%); }

/* ============================================================
   UTILITY — effects
   ============================================================ */
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glass-effect  { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); }
.shadow-purple { box-shadow: var(--shadow-md); }
.transition-all  { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ============================================================
   UTILITY — responsive
   ============================================================ */
@media (max-width: 640px)  { :root { --font-size-base: 14px; } }
@media (max-width: 768px)  { .hide-mobile { display: none !important; } }
@media (min-width: 769px)  { .show-mobile { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

/* ============================================================
   UTILITY — animations
   ============================================================ */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.animate-fadeIn  { animation: fadeIn  var(--transition-base) var(--ease-out); }
.animate-slideUp { animation: slideUp var(--transition-base) var(--ease-out); }
.animate-pulse   { animation: pulse 2s var(--ease-in-out) infinite; }
.fade-in         { animation: fadeIn 0.4s var(--ease-out) forwards; }