/* =============================================================
   STRAIT SOUNDS v2 - tokens.css
   ============================================================= */

:root {
  /* Warm cream / unbleached washi */
  --cream-50:  #FBF6EA;
  --cream-100: #F6EEDA;
  --cream-200: #EFE3C5;
  --cream-300: #E4D0A8;
  --cream-400: #D3B787;
  --cream-500: #BD9A62;
  --cream-600: #8E7147;

  /* Hokusai indigo */
  --indigo-50:  #EAF1F7;
  --indigo-100: #CDE0ED;
  --indigo-200: #9DBED8;
  --indigo-300: #6B9BC2;
  --indigo-400: #407CA8;
  --indigo-500: #1F5A8A;
  --indigo-600: #153F66;
  --indigo-700: #0E2E4C;
  --indigo-800: #0A2038;
  --indigo-900: #07162A;

  /* Monstera */
  --monstera-50:  #EDF2E6;
  --monstera-100: #CEDCC5;
  --monstera-200: #A6BE99;
  --monstera-300: #7FA06F;
  --monstera-500: #5C8450;
  --monstera-600: #446535;
  --monstera-700: #2E4A24;
  --monstera-900: #1A2F18;

  /* Shuiro vermillion */
  --shu-100: #FBDDD4;
  --shu-200: #F5A99A;
  --shu-300: #EE7966;
  --shu-500: #E23E2F;
  --shu-600: #BE2F24;
  --shu-700: #8F211A;
  --shu-900: #5A140F;

  /* Sumi ink */
  --ink-50:  #EFE9DC;
  --ink-100: #DCD1BE;
  --ink-200: #BDAF99;
  --ink-300: #9A8A74;
  --ink-400: #72624F;
  --ink-500: #584A3A;
  --ink-700: #3E3328;
  --ink-900: #231B13;

  /* Semantic */
  --color-bg-page:            var(--cream-50);
  --color-bg-surface:         var(--cream-100);
  --color-bg-surface-raised:  var(--cream-50);
  --color-bg-surface-sunken:  var(--cream-200);
  --color-bg-muted:           var(--ink-50);
  --color-bg-inverse:         var(--indigo-900);

  --color-text-primary:     var(--ink-700);
  --color-text-secondary:   var(--ink-500);
  --color-text-tertiary:    var(--ink-400);
  --color-text-placeholder: var(--ink-300);
  --color-text-inverse:     var(--cream-50);
  --color-text-link:        var(--indigo-500);
  --color-text-link-hover:  var(--indigo-600);

  --color-border-subtle:  var(--ink-100);
  --color-border-default: var(--ink-200);
  --color-border-strong:  var(--ink-300);
  --color-border-focus:   var(--indigo-400);

  --color-brand:              var(--indigo-500);
  --color-brand-hover:        var(--indigo-600);
  --color-brand-pressed:      var(--indigo-700);
  --color-brand-subtle-bg:    var(--indigo-50);
  --color-brand-subtle-text:  var(--indigo-700);

  --color-accent-leaf:          var(--monstera-500);
  --color-accent-leaf-hover:    var(--monstera-600);
  --color-accent-leaf-subtle:   var(--monstera-100);

  --color-accent-seal:          var(--shu-500);
  --color-accent-seal-hover:    var(--shu-600);
  --color-accent-seal-subtle:   var(--shu-100);

  --color-status-success: var(--monstera-600);
  --color-status-info:    var(--indigo-500);
  --color-status-warning: var(--cream-600);
  --color-status-danger:  var(--shu-600);

  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--indigo-400) 45%, transparent);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Lora", Georgia, "Iowan Old Style", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-xs:   0.8rem;
  --font-size-sm:   0.9rem;
  --font-size-base: 1rem;
  --font-size-md:   1.25rem;
  --font-size-lg:   1.5625rem;
  --font-size-xl:   1.953rem;
  --font-size-2xl:  2.441rem;
  --font-size-3xl:  3.052rem;
  --font-size-4xl:  3.815rem;
  --font-size-5xl:  4.768rem;
  --font-size-6xl:  5.96rem;

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.55;
  --line-height-relaxed: 1.7;

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

  --letter-spacing-tight:   -0.015em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.04em;
  --letter-spacing-caps:     0.08em;

  --font-variation-display: "opsz" 144, "SOFT" 100, "WONK" 1;
  --font-variation-body:    "opsz" 14,  "SOFT" 30,  "WONK" 0;

  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-pill:   9999px;
  --radius-circle: 50%;

  --shadow-xs: 0 1px 2px 0 rgba(62, 51, 40, 0.06);
  --shadow-sm: 0 1px 3px 0 rgba(62, 51, 40, 0.08), 0 1px 2px -1px rgba(62, 51, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(62, 51, 40, 0.08), 0 2px 4px -2px rgba(62, 51, 40, 0.05);
  --shadow-lg: 0 10px 20px -6px rgba(62, 51, 40, 0.10), 0 4px 8px -4px rgba(62, 51, 40, 0.06);
  --shadow-xl: 0 20px 32px -8px rgba(62, 51, 40, 0.12), 0 8px 12px -6px rgba(62, 51, 40, 0.06);
  --shadow-inset: inset 0 1px 2px 0 rgba(62, 51, 40, 0.08);

  --duration-instant:  100ms;
  --duration-fast:     180ms;
  --duration-base:     240ms;
  --duration-mid:      320ms;
  --duration-slow:     420ms;
  --duration-ambient:  640ms;

  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-base:      0;
  --z-docked:    10;
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-overlay:   1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-toast:     1070;
  --z-tooltip:   1080;

  --container-sm:   40rem;
  --container-md:   48rem;
  --container-lg:   64rem;
  --container-xl:   75rem;
  --container-2xl:  90rem;
  --container-full: 100%;

  --hairline-width:      1px;
  --hairline-color:      var(--ink-300);
  --hairline-double-gap: 3px;
  --channel-gap:         14px;
  --channel-stroke:      var(--indigo-500);
}

[data-theme="dark"] {
  --color-bg-page:            var(--indigo-900);
  --color-bg-surface:         var(--indigo-800);
  --color-bg-surface-raised:  var(--indigo-700);
  --color-bg-surface-sunken:  var(--indigo-900);
  --color-bg-muted:           var(--indigo-800);
  --color-bg-inverse:         var(--cream-50);
  --color-text-primary:       var(--cream-50);
  --color-text-secondary:     var(--cream-200);
  --color-text-tertiary:      var(--cream-300);
  --color-text-placeholder:   var(--cream-400);
  --color-text-inverse:       var(--ink-700);
  --color-text-link:          var(--indigo-200);
  --color-text-link-hover:    var(--cream-100);
  --color-border-subtle:      var(--indigo-800);
  --color-border-default:     var(--indigo-700);
  --color-border-strong:      var(--indigo-600);
  --color-border-focus:       var(--indigo-300);
  --color-brand:              var(--indigo-300);
  --color-brand-hover:        var(--indigo-200);
  --color-brand-pressed:      var(--indigo-100);
  --color-brand-subtle-bg:    var(--indigo-800);
  --color-brand-subtle-text:  var(--indigo-100);
  --hairline-color:           var(--cream-400);
}

/* Base */
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-feature-settings: "kern", "liga";
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-variation-settings: var(--font-variation-display);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
}
p { margin: 0; }
.catalog, .meta, .bpm, code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: var(--letter-spacing-normal);
}
a {
  color: var(--color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover { color: var(--color-text-link-hover); }
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }