/* ==========================================================================
   DESIGN TOKENS
   Every color, font, size and spacing value in the site comes from here.
   Change a value in this file and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------ */
  --color-bg:             #15111c;  /* page background (deep plum)          */
  --color-surface:        #1f1929;  /* cards, inputs, nav                   */
  --color-surface-raised: #2a2236;  /* hover states, raised panels          */
  --color-border:         #3a3047;
  --color-text:           #f3eee6;  /* main text (warm off-white)           */
  --color-text-muted:     #a59bb3;  /* secondary text                       */
  --color-accent:         #c7a6ff;  /* buttons, links, active nav (lilac)   */
  --color-accent-hover:   #d8c2ff;
  --color-on-accent:      #1b1225;  /* text placed on top of the accent     */
  --color-highlight:      #ffc857;  /* song start marker, likes later       */
  --color-danger:         #ff7a85;
  --color-success:        #7ee0b5;
  --color-scrim:          rgb(8 6 12 / 0.94);  /* behind full-size pictures */
  --color-like:           #ff6b8b;             /* filled heart */
  --color-spotify:        #1ed760;             /* Spotify icon (attribution) */
  --color-close-friends:  #5fd38d;
  --color-repost:         #4fd1a5;             /* repost button when on */             /* close friends star, badge and ring */
  --color-backdrop:       rgb(8 6 12 / 0.6);   /* behind the comments panel */

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.625rem;
  --text-2xl:  2.25rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;

  /* ---- Spacing (4px scale) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* ---- Layout ----------------------------------------------------------- */
  --layout-max-width: 480px;   /* width of the main column (600px on computers, see below) */
  --nav-height:       64px;
  --nav-gap:          var(--space-2);  /* space around the floating bottom nav (phones) */
  --nav-space:        calc(var(--nav-height) + var(--nav-gap)); /* room kept free for it; 0 on computers */
  --player-height:    80px;    /* Spotify compact embed height (= song slot) */
  --player-space:     var(--player-height); /* room for the docked bar; 0 when the player sits inside a post */
  --cover-md: 64px;            /* album art in song slots                  */
  --cover-sm: 44px;            /* album art in search results / song chip  */
  --header-height: 56px;       /* floating top bar (tabs, back button)     */
  --header-gap:    var(--space-2); /* space between the screen edge and the bar */

  /* ---- Glass (floating top bar) ----------------------------------------- */
  --glass-bg:     rgb(31 25 41 / 0.55);
  --glass-border: rgb(255 255 255 / 0.10);
  --glass-blur:   18px;
  --glass-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  --sheet-height: 75dvh;       /* comments panel height                    */

  /* ---- Post cards ------------------------------------------------------- */
  --card-bg:        var(--color-surface);
  --card-border:    var(--color-border);
  --card-active-border: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  --card-radius:    var(--radius-lg);
  --card-padding:   var(--space-5) var(--space-4);
  --card-gap:       var(--space-4);   /* space between cards in a list */
  --media-aspect:   4 / 5;            /* shape pictures are cropped to in cards */
  /* Full-screen card height in scrolling lists: screen minus header, player, nav */
  --feed-card-height: calc(100dvh - var(--header-gap) - var(--header-height) - var(--player-space)
                      - var(--nav-space) - var(--space-3) * 2 - env(safe-area-inset-bottom));
  --avatar-sm: 28px;
  --avatar-md: 40px;
  --avatar-lg: 72px;
  --avatar-xl: 88px;

  /* ---- Motion & focus --------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring: 0 0 0 3px rgb(199 166 255 / 0.5);
}

/* ---- Computer layout (like Twitter): nav on the left, column in the middle,
   discover column on the right. These values place everything. ---------- */
@media (min-width: 700px) {
  :root {
    --layout-max-width: 600px;
    --nav-space: 0px;              /* no bottom bar */
    --shell-nav: 76px;             /* left nav: icons only */
    --shell-side: 0px;             /* right column: hidden */
    --shell-gap: var(--space-5);
    --shell-width: calc(var(--shell-nav) + var(--shell-gap) + var(--layout-max-width) + var(--shell-side));
    --shell-left: max(var(--space-4), (100vw - var(--shell-width)) / 2);
    --column-left: calc(var(--shell-left) + var(--shell-nav) + var(--shell-gap));
  }
}
@media (min-width: 1100px) {
  :root {
    --shell-nav: 240px;            /* left nav: icons + labels */
    --sidebar-width: 320px;
    --shell-side: calc(var(--shell-gap) + var(--sidebar-width));
  }
}

/* The player sits inside the post, so no room is needed for the bottom bar. */
html.player-overlay { --player-space: 0px; }

/* Optional light theme: put data-theme="light" on <html> to switch.
   Only colors change; everything else is shared. */
[data-theme="light"] {
  --color-bg:             #f7f4fb;
  --color-surface:        #ffffff;
  --color-surface-raised: #efe9f6;
  --color-border:         #ddd4e8;
  --color-text:           #1d1626;
  --color-text-muted:     #6c6279;
  --color-accent:         #6d3fd6;
  --color-accent-hover:   #5a2fc0;
  --color-on-accent:      #ffffff;
  --color-highlight:      #c98a00;
  --color-danger:         #d43448;
  --color-success:        #1f9466;
  --color-like:           #e0245e;
  --glass-bg:     rgb(255 255 255 / 0.6);
  --glass-border: rgb(29 22 38 / 0.10);
  --glass-shadow: 0 8px 24px rgb(29 22 38 / 0.12);
  --focus-ring: 0 0 0 3px rgb(109 63 214 / 0.35);
}