/* ════════════════════════════════════════════════════════════════════════
   Sabai Ink — Design Tokens
   Single source of truth for the brand palette + typography.

   Loaded on every page BEFORE inline <style> blocks so per-page styles can
   override these values when needed (rare). Don't introduce new color hexes
   in page styles — add a token here first, then reference it via var().
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette (per Sabai Inc Brand Guidelines, May 2026) ──────── */
  --black:       #000000;
  --white:       #FFFFFF;
  --charcoal:    #1A1A1A;
  --light-gray:  #F2F2F2;
  --mid-gray:    #A6A6A6;
  --beige:       #E8E1D9;

  /* ── Hybrid accents (Option C "Fineline / Editorial", added May 2026) ──
     Use sparingly — limited drops, themed collection bands, hover states,
     badge fills (NEW / BESTSELLER / TRENDING). Never on primary CTAs;
     never as default body text color. */
  --terracotta:  #C97D5D;   /* in active use — most-used accent */
  --dusty-rose:  #E8C2C2;   /* defined for future use */
  --olive:       #7E8A6F;   /* defined for future use */

  /* ── Surface tones ─────────────────────────────────────────────────── */
  --page-bg:     #F5F2EE;   /* main page background, off-white */
  --chrome:      #9AA0A6;   /* brushed silver — trust band */

  /* ── Status colors (forms / feedback) ──────────────────────────────── */
  --status-success: #d8e7c1;
  --status-error:   #ff8a80;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  /* Type scale tokens — adopt in new components; existing inline sizes
     can stay as-is until refactored. */
  --tracking-tight:  -0.03em;   /* large display headings */
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.22em;   /* uppercase eyebrow labels */

  --line-body:    1.6;
  --line-loose:   1.7;
  --line-tight:   1.05;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   600ms;
}

/* ════════════════════════════════════════════════════════════════════════
   Sabai Loader — brand-aligned loading indicator

   A fine-line ink stroke that draws itself, then erases, on a continuous
   loop. Echoes the calligraphic tattoo aesthetic. Use anywhere a spinner
   would otherwise live (modals, async fetches, page transitions).

   Usage:
     <div class="sabai-loader" role="status" aria-label="Loading">
       <svg class="sabai-loader-svg" viewBox="0 0 80 40" aria-hidden="true">
         <path d="M5 20 Q 22 5, 40 20 T 75 20"
               stroke="currentColor" stroke-width="1.6"
               fill="none" stroke-linecap="round" />
       </svg>
       <span class="sabai-loader-text">Loading</span>
     </div>

   `.sabai-loader-text` is optional. Color inherits — set `color:` on
   `.sabai-loader` (or its ancestor) to match context.
   ════════════════════════════════════════════════════════════════════════ */

.sabai-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--charcoal);
}
.sabai-loader-svg {
  width: 80px;
  height: 40px;
  display: block;
  overflow: visible;
}
.sabai-loader-svg path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: sabai-loader-stroke 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.sabai-loader-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow, 0.22em);
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  animation: sabai-loader-text 2.2s ease-in-out infinite;
}

@keyframes sabai-loader-stroke {
  0%   { stroke-dashoffset: 80; }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -80; }
}

@keyframes sabai-loader-text {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9;  }
}

/* Smaller variant for inline contexts (buttons, tight modals) */
.sabai-loader--sm .sabai-loader-svg { width: 48px; height: 24px; }
.sabai-loader--sm .sabai-loader-svg path { stroke-dasharray: 50; stroke-dashoffset: 50; }
.sabai-loader--sm .sabai-loader-svg path {
  animation-name: sabai-loader-stroke-sm;
}
@keyframes sabai-loader-stroke-sm {
  0%   { stroke-dashoffset: 50; }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -50; }
}

/* Inverted (light strokes on dark surfaces) */
.sabai-loader--light { color: var(--white); }
.sabai-loader--light .sabai-loader-text { color: rgba(255,255,255,0.55); }

@media (prefers-reduced-motion: reduce) {
  .sabai-loader-svg path,
  .sabai-loader-text {
    animation-duration: 4s;
  }
}