/* ============================================================
   tokens.css — zazenware MVP1
   ----------------------------------------------------------------------------
   Palette + semantic CSS custom properties.

   Theme direction:
   - Both themes use a near-black page background.
   - Light theme uses dusty lilac blocks with ink-black text.
   - Dark theme uses deep crimson blocks with warm bone text.
   - Components should use semantic tokens only.
   ============================================================ */

/* -------------------------------------------------------
   RAW PALETTE
------------------------------------------------------- */

:root {
  /* Lilacs */
  --zw-raw-lilac:        #A89EC8;
  --zw-raw-lilac-deep:   #8880B4;
  --zw-raw-lilac-light:  #C0B8D8;
  --zw-raw-lilac-pale:   #D9D2EA;

  /* Crimsons / maroons */
  --zw-raw-crimson:      #5C1520;
  --zw-raw-crimson-deep: #3D0E15;
  --zw-raw-crimson-mid:  #6E1A26;
  --zw-raw-crimson-soft: #7D2230;

  /* Neutrals */
  --zw-raw-page-black:   #080808;
  --zw-raw-black:        #000000;
  --zw-raw-ink-black:    #0D0D0D;
  --zw-raw-ink-muted:    #2A2535;
  --zw-raw-bone:         #EDE0CC;
  --zw-raw-bone-muted:   #C4B5A0;

  /* Focus / special accents */
  --zw-raw-lavender:     #B9A1FF;

  /* Status */
  --zw-raw-success:      #38A169;
  --zw-raw-success-dark: #1A3D2B;
  --zw-raw-error:        #E53E3E;
  --zw-raw-error-dark:   #3D1A1A;
  --zw-raw-warning:      #C07928;
  --zw-raw-info:         #4A6FA5;
}

/* -------------------------------------------------------
   LIGHT THEME
------------------------------------------------------- */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Page */
  --zw-bg:              var(--zw-raw-page-black);
  --zw-page-text:       var(--zw-raw-bone);

  /* Surfaces */
  --zw-surface:         var(--zw-raw-lilac);
  --zw-surface-alt:     var(--zw-raw-lilac-deep);
  --zw-surface-soft:    var(--zw-raw-lilac-light);
  --zw-surface-strong:  var(--zw-raw-lilac-deep);

  /* Content blocks */
  --zw-block:           var(--zw-raw-lilac);
  --zw-block-deep:      var(--zw-raw-lilac-deep);
  --zw-block-soft:      var(--zw-raw-lilac-light);
  --zw-block-text:      var(--zw-raw-ink-black);

  /* Text */
  --zw-text:            var(--zw-raw-ink-black);
  --zw-text-muted:      var(--zw-raw-ink-muted);
  --zw-text-inverse:    var(--zw-raw-bone);

  /* Borders / shadows */
  --zw-border:          var(--zw-raw-ink-black);
  --zw-border-muted:    color-mix(in srgb, var(--zw-raw-ink-black) 72%, transparent);
  --zw-shadow-color:    var(--zw-raw-ink-black);

  /* Accent */
  --zw-accent:          var(--zw-raw-crimson);
  --zw-accent-deep:     var(--zw-raw-crimson-deep);
  --zw-accent-soft:     var(--zw-raw-crimson-mid);
  --zw-accent-text:     var(--zw-raw-bone);

  /* Links */
  --zw-link:            var(--zw-raw-crimson);
  --zw-link-hover:      var(--zw-raw-crimson-deep);

  /* Inputs */
  --zw-input-bg:        var(--zw-raw-lilac-light);
  --zw-input-border:    var(--zw-raw-ink-black);
  --zw-input-text:      var(--zw-raw-ink-black);
  --zw-input-placeholder: color-mix(in srgb, var(--zw-raw-ink-black) 62%, transparent);

  /* Header */
  --zw-header-bg:       var(--zw-raw-lilac);
  --zw-header-text:     var(--zw-raw-ink-black);
  --zw-header-border:   var(--zw-raw-ink-black);

  /* Footer */
  --zw-footer-bg:       var(--zw-raw-lilac);
  --zw-footer-text:     var(--zw-raw-ink-black);
  --zw-footer-border:   var(--zw-raw-ink-black);

  /* Cards */
  --zw-card-bg:         var(--zw-raw-lilac);
  --zw-card-border:     var(--zw-raw-ink-black);
  --zw-card-strip-bg:   var(--zw-raw-lilac-deep);
  --zw-card-strip-text: var(--zw-raw-ink-black);

  /* Buttons */
  --zw-btn-primary-bg:       var(--zw-raw-lilac-deep);
  --zw-btn-primary-text:     var(--zw-raw-ink-black);
  --zw-btn-primary-border:   var(--zw-raw-ink-black);
  --zw-btn-primary-hover-bg: var(--zw-raw-lilac-light);

  --zw-btn-secondary-bg:       var(--zw-raw-lilac-light);
  --zw-btn-secondary-text:     var(--zw-raw-ink-black);
  --zw-btn-secondary-border:   var(--zw-raw-ink-black);
  --zw-btn-secondary-hover-bg: var(--zw-raw-lilac-deep);

  --zw-btn-danger-bg:       var(--zw-raw-crimson);
  --zw-btn-danger-text:     var(--zw-raw-bone);
  --zw-btn-danger-border:   var(--zw-raw-ink-black);

  /* Badge */
  --zw-badge-bg:        var(--zw-raw-crimson);
  --zw-badge-text:      var(--zw-raw-bone);

  /* Status */
  --zw-success:         var(--zw-raw-success);
  --zw-error:           var(--zw-raw-error);
  --zw-warning:         var(--zw-raw-warning);
  --zw-info:            var(--zw-raw-info);

  --zw-success-bg:      var(--zw-raw-success-dark);
  --zw-success-border:  var(--zw-raw-success);
  --zw-success-text:    var(--zw-raw-bone);

  --zw-error-bg:        var(--zw-raw-error-dark);
  --zw-error-border:    var(--zw-raw-error);
  --zw-error-text:      var(--zw-raw-bone);
}

/* -------------------------------------------------------
   DARK THEME
------------------------------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;

  /* Page */
  --zw-bg:              var(--zw-raw-page-black);
  --zw-page-text:       var(--zw-raw-bone);

  /* Surfaces */
  --zw-surface:         var(--zw-raw-crimson);
  --zw-surface-alt:     var(--zw-raw-crimson-deep);
  --zw-surface-soft:    var(--zw-raw-crimson-mid);
  --zw-surface-strong:  var(--zw-raw-crimson-deep);

  /* Content blocks */
  --zw-block:           var(--zw-raw-crimson);
  --zw-block-deep:      var(--zw-raw-crimson-deep);
  --zw-block-soft:      var(--zw-raw-crimson-mid);
  --zw-block-text:      var(--zw-raw-bone);

  /* Text */
  --zw-text:            var(--zw-raw-bone);
  --zw-text-muted:      var(--zw-raw-bone-muted);
  --zw-text-inverse:    var(--zw-raw-ink-black);

  /* Borders / shadows */
  --zw-border:          var(--zw-raw-bone);
  --zw-border-muted:    color-mix(in srgb, var(--zw-raw-bone) 68%, transparent);
  --zw-shadow-color:    var(--zw-raw-bone);

  /* Accent */
  --zw-accent:          var(--zw-raw-lilac);
  --zw-accent-deep:     var(--zw-raw-lilac-deep);
  --zw-accent-soft:     var(--zw-raw-lilac-light);
  --zw-accent-text:     var(--zw-raw-ink-black);

  /* Links */
  --zw-link:            var(--zw-raw-lilac-light);
  --zw-link-hover:      var(--zw-raw-lilac);

  /* Inputs */
  --zw-input-bg:        var(--zw-raw-crimson-mid);
  --zw-input-border:    var(--zw-raw-bone);
  --zw-input-text:      var(--zw-raw-bone);
  --zw-input-placeholder: color-mix(in srgb, var(--zw-raw-bone) 62%, transparent);

  /* Header */
  --zw-header-bg:       var(--zw-raw-crimson);
  --zw-header-text:     var(--zw-raw-bone);
  --zw-header-border:   var(--zw-raw-bone);

  /* Footer */
  --zw-footer-bg:       var(--zw-raw-crimson);
  --zw-footer-text:     var(--zw-raw-bone);
  --zw-footer-border:   var(--zw-raw-bone);

  /* Cards */
  --zw-card-bg:         var(--zw-raw-crimson);
  --zw-card-border:     var(--zw-raw-bone);
  --zw-card-strip-bg:   var(--zw-raw-crimson-deep);
  --zw-card-strip-text: var(--zw-raw-bone);

  /* Buttons */
  --zw-btn-primary-bg:       var(--zw-raw-crimson-mid);
  --zw-btn-primary-text:     var(--zw-raw-bone);
  --zw-btn-primary-border:   var(--zw-raw-bone);
  --zw-btn-primary-hover-bg: var(--zw-raw-crimson-soft);

  --zw-btn-secondary-bg:       var(--zw-raw-crimson-deep);
  --zw-btn-secondary-text:     var(--zw-raw-bone);
  --zw-btn-secondary-border:   var(--zw-raw-bone);
  --zw-btn-secondary-hover-bg: var(--zw-raw-crimson-mid);

  --zw-btn-danger-bg:       var(--zw-raw-lilac);
  --zw-btn-danger-text:     var(--zw-raw-ink-black);
  --zw-btn-danger-border:   var(--zw-raw-bone);

  /* Badge */
  --zw-badge-bg:        var(--zw-raw-lilac);
  --zw-badge-text:      var(--zw-raw-ink-black);

  /* Status */
  --zw-success:         var(--zw-raw-success);
  --zw-error:           var(--zw-raw-error);
  --zw-warning:         var(--zw-raw-warning);
  --zw-info:            var(--zw-raw-info);

  --zw-success-bg:      #0D2B1F;
  --zw-success-border:  var(--zw-raw-success);
  --zw-success-text:    var(--zw-raw-bone);

  --zw-error-bg:        #2B0D0D;
  --zw-error-border:    var(--zw-raw-error);
  --zw-error-text:      var(--zw-raw-bone);
}

/* -------------------------------------------------------
   SHARED TOKENS
------------------------------------------------------- */

:root {
  /* Typography */
  --zw-font-display: 'UnifrakturMaguntia', 'MedievalSharp', 'Pirata One', serif;
  --zw-font-body:    'Special Elite', 'Courier Prime', 'Cutive Mono', monospace;

  /* Type scale */
  --zw-text-xs:   0.75rem;
  --zw-text-sm:   0.875rem;
  --zw-text-md:   1rem;
  --zw-text-base: 1.125rem;
  --zw-text-lg:   1.25rem;
  --zw-text-xl:   1.5rem;
  --zw-text-2xl:  2rem;
  --zw-text-3xl:  2.5rem;
  --zw-text-4xl:  3rem;
  --zw-text-5xl:  3.75rem;

  /* Fluid display sizes */
  --zw-display-sm: clamp(2rem, 7vw, 3.5rem);
  --zw-display-md: clamp(3rem, 10vw, 5.5rem);
  --zw-display-lg: clamp(3.5rem, 13vw, 7.5rem);

  /* Leading */
  --zw-leading-tight:  1.15;
  --zw-leading-normal: 1.55;
  --zw-leading-loose:  1.75;

  /* Spacing */
  --zw-space-1:  0.25rem;
  --zw-space-2:  0.5rem;
  --zw-space-3:  0.75rem;
  --zw-space-4:  1rem;
  --zw-space-5:  1.25rem;
  --zw-space-6:  1.5rem;
  --zw-space-7:  1.75rem;
  --zw-space-8:  2rem;
  --zw-space-10: 2.5rem;
  --zw-space-12: 3rem;
  --zw-space-16: 4rem;
  --zw-space-20: 5rem;
  --zw-space-24: 6rem;

  /* Layout */
  --zw-container-max:    1200px;
  --zw-container-wide:   1440px;
  --zw-container-narrow: 44rem;
  --zw-container-pad:    var(--zw-space-4);
  --zw-container-pad-md: var(--zw-space-8);

  /* Borders / radius */
  --zw-border-width:       2px;
  --zw-border-thick:       3px;
  --zw-border-width-heavy: var(--zw-border-thick);
  --zw-radius:             0;
  --zw-radius-sm:          0;
  --zw-radius-md:          0;
  --zw-radius-lg:          0;
  --zw-radius-pill:        999px;

  /* Hard-shadow offsets */
  --zw-shadow-xs: 2px 2px 0 0 var(--zw-shadow-color);
  --zw-shadow-sm: 3px 3px 0 0 var(--zw-shadow-color);
  --zw-shadow-md: 4px 4px 0 0 var(--zw-shadow-color);
  --zw-shadow-lg: 6px 6px 0 0 var(--zw-shadow-color);
  --zw-shadow-xl: 8px 8px 0 0 var(--zw-shadow-color);
  --zw-shadow:    var(--zw-shadow-md);

  /* Focus */
  --zw-focus-ring:   2px solid var(--zw-raw-lavender);
  --zw-focus-offset: 3px;

  /* Transitions */
  --zw-transition-fast: 120ms ease;
  --zw-transition-base: 200ms ease;
  --zw-transition-slow: 320ms ease;
  --zw-transition:      var(--zw-transition-base);

  /* Z-index */
  --zw-z-base:   1;
  --zw-z-header: 100;
  --zw-z-drawer: 200;
  --zw-z-modal:  300;
  --zw-z-toast:  400;

  /* Component aliases */
  --zw-section-gap: var(--zw-space-16);
  --zw-panel-pad:   var(--zw-space-7);
  --zw-card-pad:    var(--zw-space-5);

  /* Overlay / scrim */
  --zw-overlay-bg: color-mix(in srgb, var(--zw-raw-page-black) 78%, transparent);
}