/* ============================================================
   TONARI LABS — Shared Design System
   Source of truth: github.com/micro-JAY/tonari-design-system
   CDN: https://cdn.jsdelivr.net/gh/micro-JAY/tonari-design-system@main/tokens.css

   Never use raw palette values in component CSS —
   always reference a semantic token.
   ============================================================ */

/* ----------------------------------------------------------
   GOOGLE FONTS IMPORT
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:wdth,wght@75..125,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


:root {

  /* ----------------------------------------------------------
     PALETTE (raw values — do not use directly in components)
     ---------------------------------------------------------- */

  --palette-black:       #09090b;
  --palette-grey:        #67697c;
  --palette-gold:        #D4A843;
  --palette-apricot:     #f9d48b;
  --palette-petal:       #efbcd5;

  /* Derived palette — lightness steps via opacity */
  --palette-grey-dim:    rgba(103, 105, 124, 0.4);
  --palette-grey-subtle: rgba(103, 105, 124, 0.12);
  --palette-gold-dim:    rgba(212, 168, 67, 0.35);
  --palette-gold-glow:   rgba(212, 168, 67, 0.15);
  --palette-apricot-dim: rgba(249, 212, 139, 0.2);
  --palette-petal-dim:   rgba(239, 188, 213, 0.2);
  --palette-white:       #f0ede8;  /* slightly warm white, never pure */


  /* ----------------------------------------------------------
     SURFACE (backgrounds, layers, panels)
     ---------------------------------------------------------- */

  --surface-base:        #09090b;
  --surface-raised:      #111115;
  --surface-overlay:     #18181e;
  --surface-sunken:      #050507;
  --surface-highlight:   rgba(103, 105, 124, 0.10);


  /* ----------------------------------------------------------
     BORDER
     ---------------------------------------------------------- */

  --border-subtle:       rgba(103, 105, 124, 0.18);
  --border-default:      rgba(103, 105, 124, 0.32);
  --border-strong:       rgba(103, 105, 124, 0.55);
  --border-accent:       rgba(212, 168, 67, 0.50);


  /* ----------------------------------------------------------
     TEXT
     ---------------------------------------------------------- */

  --text-primary:        #f0ede8;
  --text-secondary:      #a8a9b8;
  --text-muted:          #67697c;
  --text-accent:         #E8C05A;
  --text-warm:           #f9d48b;
  --text-soft:           #efbcd5;
  --text-inverse:        #09090b;


  /* ----------------------------------------------------------
     INTERACTIVE (buttons, controls)

     Primary = light button on dark background (clean hierarchy).
     Gold accent reserved for indicators, badges, active states.
     ---------------------------------------------------------- */

  --interactive-primary-bg:          #f0ede8;
  --interactive-primary-bg-hover:    #ffffff;
  --interactive-primary-bg-active:   #ddd9d2;
  --interactive-primary-text:        #09090b;

  --interactive-secondary-bg:        transparent;
  --interactive-secondary-bg-hover:  rgba(103, 105, 124, 0.12);
  --interactive-secondary-bg-active: rgba(103, 105, 124, 0.22);
  --interactive-secondary-text:      #a8a9b8;
  --interactive-secondary-border:    rgba(103, 105, 124, 0.32);

  --interactive-ghost-bg:            transparent;
  --interactive-ghost-bg-hover:      rgba(103, 105, 124, 0.10);
  --interactive-ghost-text:          #67697c;

  --interactive-accent-bg:           rgba(212, 168, 67, 0.12);
  --interactive-accent-bg-hover:     rgba(212, 168, 67, 0.20);
  --interactive-accent-text:         #E8C05A;
  --interactive-accent-border:       rgba(212, 168, 67, 0.30);

  --interactive-warm-bg:             rgba(249, 212, 139, 0.12);
  --interactive-warm-bg-hover:       rgba(249, 212, 139, 0.20);
  --interactive-warm-text:           #f9d48b;
  --interactive-warm-border:         rgba(249, 212, 139, 0.30);

  --interactive-soft-bg:             rgba(239, 188, 213, 0.10);
  --interactive-soft-text:           #efbcd5;
  --interactive-soft-border:         rgba(239, 188, 213, 0.25);

  --interactive-disabled-bg:         rgba(103, 105, 124, 0.08);
  --interactive-disabled-text:       rgba(103, 105, 124, 0.40);
  --interactive-disabled-border:     rgba(103, 105, 124, 0.12);

  --interactive-focus-ring:          rgba(212, 168, 67, 0.55);


  /* ----------------------------------------------------------
     SEMANTIC STATUS
     ---------------------------------------------------------- */

  --status-success-bg:     rgba(34, 197, 94, 0.12);
  --status-success-text:   #4ade80;
  --status-success-border: rgba(34, 197, 94, 0.25);

  --status-warning-bg:     rgba(249, 212, 139, 0.12);
  --status-warning-text:   #f9d48b;
  --status-warning-border: rgba(249, 212, 139, 0.30);

  --status-error-bg:       rgba(239, 68, 68, 0.12);
  --status-error-text:     #f87171;
  --status-error-border:   rgba(239, 68, 68, 0.30);

  --status-info-bg:        rgba(103, 105, 124, 0.12);
  --status-info-text:      #a8a9b8;
  --status-info-border:    rgba(103, 105, 124, 0.30);


  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-display:  "Zalando Sans", sans-serif;
  --font-body:     "Zalando Sans", sans-serif;
  --font-mono:     "JetBrains Mono", monospace;

  /* Display: weight 700–900, --tracking-tight, --leading-tight  */
  /* Body:    weight 400–500, --tracking-normal, --leading-normal */
  /* Mono:    weight 400–500 — BPM readouts, ABC notation, indices */

  /* Scale */
  --text-xs:   0.6875rem;  /* 11px — timestamps, fine print */
  --text-sm:   0.8125rem;  /* 13px — labels, badges */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md:   1.0625rem;  /* 17px — emphasized body */
  --text-lg:   1.25rem;    /* 20px — subheadings */
  --text-xl:   1.5rem;     /* 24px — section headings */
  --text-2xl:  2rem;       /* 32px — page headings */
  --text-3xl:  3rem;       /* 48px — hero/display */
  --text-4xl:  4.5rem;     /* 72px — wordmarks */

  /* Weight */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-caps:    0.18em;  /* all-caps labels */


  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */

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


  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;


  /* ----------------------------------------------------------
     SHADOW & GLOW
     ---------------------------------------------------------- */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-xl:   0 16px 64px rgba(0, 0, 0, 0.8);

  --glow-accent: 0 0 20px rgba(212, 168, 67, 0.30), 0 0 60px rgba(212, 168, 67, 0.10);
  --glow-warm:   0 0 20px rgba(249, 212, 139, 0.20), 0 0 60px rgba(249, 212, 139, 0.08);
  --glow-soft:   0 0 20px rgba(239, 188, 213, 0.18), 0 0 60px rgba(239, 188, 213, 0.06);


  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */

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

  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --duration-enter:  400ms;
  --duration-exit:   250ms;


  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;


  /* ----------------------------------------------------------
     APP-SPECIFIC OVERRIDES
     Copy into each app's root CSS and uncomment as needed.
     ---------------------------------------------------------- */

  /* Beat — deeper black, more electric gold */
  /* --surface-base: #06060a; */
  /* --interactive-accent-bg: rgba(212, 168, 67, 0.15); */

  /* Cadence — cooler surface tint */
  /* --surface-raised: #0f1118; */

  /* tonarilabs.com — slightly warmer base */
  /* --surface-base: #0b0908; */

}


/* ----------------------------------------------------------
   BASE RESET
   ---------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

body {
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "wdth" 100;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--palette-apricot);
}

:focus-visible {
  outline: 2px solid var(--interactive-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Utility: all-caps label — used across all apps for section labels, tags */
.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Utility: mono readout — BPM counters, time displays, step indices */
.readout {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}