/* ============================================================
   Grove UI — Design Tokens
   Extracted from a link-in-bio profile page
   ============================================================

   Two modes:
   [data-theme="light"]  — Platform/creator surface (warm white)
   [data-theme="dark"]   — Profile page (rose pink, glass cards)

   The profile rose (dark) theme is the signature visual.
   The platform (light) theme is the admin/creator environment.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Light mode (platform / creator UI) ──────────────────── */
[data-theme="light"] {
  /* Surfaces */
  --colour-bg-page:           #EFF0EC;
  --colour-bg-surface:        #FFFFFF;
  --colour-bg-elevated:       #FFFFFF;
  --colour-bg-card:           #FFFFFF;
  --colour-bg-subtle:         #F5F5F2;
  --colour-bg-overlay:        rgba(0, 0, 0, 0.14);

  /* Text */
  --colour-text-primary:      #1A1A1A;
  --colour-text-secondary:    #78716C;
  --colour-text-muted:        #A8A29E;
  --colour-text-disabled:     #D4CEC9;
  --colour-text-on-accent:    #FFFFFF;

  /* Brand */
  --colour-brand-accent:      #E37282;
  --colour-brand-accent-hover:#D05A6A;

  /* Borders */
  --colour-border:            #E7E5E4;
  --colour-border-strong:     #C5C2BF;

  /* Focus */
  --colour-focus-ring:        #E37282;

  /* Actions */
  --colour-action-bg:         #E37282;
  --colour-action-bg-hover:   #D05A6A;
  --colour-action-text:       #FFFFFF;

  /* Status */
  --colour-success:           #22C55E;
  --colour-warning:           #F59E0B;
  --colour-error:             #EF4444;
  --colour-info:              #3B82F6;

  /* Glass */
  --colour-glass-bg:          rgba(255, 255, 255, 0.10);
  --colour-glass-bg-hover:    rgba(255, 255, 255, 0.18);
  --colour-glass-border:      rgba(255, 255, 255, 0.20);
  --colour-profile-bg:        #E37282;
}

/* ── Dark mode (profile page — rose/glass) ───────────────── */
[data-theme="dark"] {
  /* Surfaces */
  --colour-bg-page:           #E37282;
  --colour-bg-surface:        rgba(255, 255, 255, 0.10);
  --colour-bg-elevated:       rgba(255, 255, 255, 0.15);
  --colour-bg-card:           rgba(255, 255, 255, 0.10);
  --colour-bg-subtle:         rgba(255, 255, 255, 0.05);
  --colour-bg-overlay:        rgba(0, 0, 0, 0.14);

  /* Text */
  --colour-text-primary:      #FFFFFF;
  --colour-text-secondary:    rgba(255, 255, 255, 0.80);
  --colour-text-muted:        rgba(255, 255, 255, 0.50);
  --colour-text-disabled:     rgba(255, 255, 255, 0.30);
  --colour-text-on-accent:    #FFFFFF;

  /* Brand */
  --colour-brand-accent:      #FFFFFF;
  --colour-brand-accent-hover:#F0F0F0;

  /* Borders */
  --colour-border:            rgba(255, 255, 255, 0.20);
  --colour-border-strong:     rgba(255, 255, 255, 0.35);

  /* Focus */
  --colour-focus-ring:        rgba(255, 255, 255, 0.60);

  /* Actions */
  --colour-action-bg:         rgba(0, 0, 0, 0.14);
  --colour-action-bg-hover:   rgba(0, 0, 0, 0.22);
  --colour-action-text:       #FFFFFF;

  /* Status */
  --colour-success:           #4ADE80;
  --colour-warning:           #FCD34D;
  --colour-error:             #F87171;
  --colour-info:              #60A5FA;

  /* Glass */
  --colour-glass-bg:          rgba(255, 255, 255, 0.10);
  --colour-glass-bg-hover:    rgba(255, 255, 255, 0.18);
  --colour-glass-border:      rgba(255, 255, 255, 0.20);
  --colour-profile-bg:        #E37282;
}

/* ── Typography ─────────────────────────────────────────── */
:root {
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --size-display:   60px;
  --lh-display:     57px;
  --size-xl:        32px;
  --lh-xl:          40px;
  --size-lg:        20px;
  --lh-lg:          28px;
  --size-base:      16px;
  --lh-base:        24px;
  --size-sm:        14px;
  --lh-sm:          21px;
  --size-xs:        12px;
  --lh-xs:          18px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight:   -0.01em;
  --tracking-tighter: -0.025em;  /* ~-0.9px on a 36px stat value */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
}

/* ── Spacing ─────────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --card-height:      64px;
  --card-height-lg:  127px;
  --pill-height:      48px;
  --avatar-size:     142px;
  --icon-btn-size:    40px;

  /* Link "button style" geometry — measured from --button-style-* vars */
  --button-inner-radius:  20px;  /* --button-style-inner-radius */
  --button-inner-padding: 14px;  /* --button-style-inner-padding */
  --link-gap:             14px;  /* --link-gap between stacked cards */
}

/* ── Border radius ──────────────────────────────────────── */
:root {
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-4xl: 32px;
  --radius-pill: 9999px;
}

/* ── Elevation / shadows ─────────────────────────────────── */
:root {
  --shadow-xs:  rgba(0, 0, 0, 0.02) 0px 0px 8px 0px;
  --shadow-sm:  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-md:  rgba(0, 0, 0, 0.08) 0px 6px 14px 0px;
  --shadow-lg:  rgba(0, 0, 0, 0.10) 0px 10px 15px -3px, rgba(0, 0, 0, 0.10) 0px 4px 6px -4px;
  --shadow-xl:  rgba(0, 0, 0, 0.15) 0px 24px 32px 0px;
  --shadow-layered:
    rgba(0, 0, 0, 0.02) 0px 2px 2px,
    rgba(0, 0, 0, 0.02) 0px 4px 4px,
    rgba(0, 0, 0, 0.02) 0px 8px 8px,
    rgba(0, 0, 0, 0.02) 0px 16px 16px,
    rgba(0, 0, 0, 0.02) 0px 32px 32px;
}

/* ── Motion ─────────────────────────────────────────────── */
:root {
  --duration-fast:   75ms;
  --duration-normal: 150ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-card: transform 75ms ease, box-shadow 75ms ease, background-color 75ms ease;
}

/* ── Keyframe animations ─────────────────────────────────── */
@keyframes entranceRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes avatarRise {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-3deg); }
  40%       { transform: rotate(3deg); }
  60%       { transform: rotate(-2deg); }
  80%       { transform: rotate(2deg); }
}
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes buzz {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}