/* =====================================================================
   Yoko Space Design Tokens — shared across the portfolio.

   Single source of truth for color, spacing, radii, type, elevation,
   focus ring, and motion. Linked from every page; individual pages no
   longer redeclare these.

   To shift the brand (e.g., change the accent blue), edit this file
   only. All pages update.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     MOTION TOKENS
     easeOutExpo for bubble entrances — pronounced settle at end so
     each bubble feels like it "lands" rather than just appearing.
     Used by chat-zone arrival motion and any "incoming" UI.
     --------------------------------------------------------------- */
  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-open-ms:   350ms;
  --motion-close-ms:  280ms;
  --motion-bubble-ms: 260ms;

  /* Layout-changing transitions — the "motion recipe" that landed for
     panels, drawers, sheets, column collapse. Symmetric easeInOutCubic
     so open and close feel identical. See memory file for full rules.
     580ms duration. */
  --ease-recipe:  cubic-bezier(0.65, 0, 0.35, 1);
  --motion-recipe-ms: 580ms;

  /* ---------------------------------------------------------------
     YOKO SPACE — color, type, spacing, radii, elevation
     Greyscale base + Yoko-blue accent reserved strictly for
     system states (focus, error, success). No decorative use.
     --------------------------------------------------------------- */

  /* Color — greyscale ramp */
  --ys-ink-100:   #0A0A0A;  /* body text, headlines (warmer than pure black) */
  --ys-ink-80:    #1F1F23;  /* footer surface, strong text */
  --ys-ink-60:    #4B4B52;  /* secondary text */
  --ys-ink-40:    #8A8A93;  /* muted text, captions, placeholders */
  --ys-ink-20:    #C9C9CF;  /* strong borders, dashed slots */
  --ys-ink-10:    #E5E5E8;  /* subtle dividers, default borders */
  --ys-paper:     #FFFFFF;  /* surface */
  --ys-paper-sub: #F7F7F8;  /* recessed surface (AI bubble, secondary cards) */

  /* Color — Yoko functional accent (focus / error / success only) */
  --ys-accent:      #3D45FF;
  --ys-accent-soft: #E8EAFF;
  --ys-success:     #00875A;
  --ys-danger:      #C03A2B;

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

  /* Radii */
  --ys-radius-sm:   6px;
  --ys-radius-md:   12px;
  --ys-radius-lg:   20px;
  --ys-radius-pill: 999px;

  /* Type ramp (Inter) */
  --ys-text-xs:      0.75rem;     /* 12px */
  --ys-text-sm:      0.875rem;    /* 14px */
  --ys-text-base:    1rem;        /* 16px */
  --ys-text-md:      1.125rem;    /* 18px */
  --ys-text-lg:      1.25rem;     /* 20px */
  --ys-text-xl:      1.5rem;      /* 24px */
  --ys-text-2xl:     2rem;        /* 32px */
  --ys-text-3xl:     clamp(2.25rem, 4vw, 3rem);
  --ys-text-4xl:     clamp(2.5rem, 5vw, 3.5rem);
  --ys-text-display: clamp(3rem, 7vw, 4.5rem);

  /* Elevation — Yoko reads flat. Subtle only. */
  --ys-elevation-0: none;
  --ys-elevation-1: 0 1px 2px rgba(15, 15, 20, 0.04),
                    0 1px 3px rgba(15, 15, 20, 0.06);
  --ys-elevation-2: 0 6px 16px rgba(15, 15, 20, 0.06),
                    0 2px 4px rgba(15, 15, 20, 0.04);

  /* Focus ring — Yoko blue, applied per-component (not global) so each
     component owns its focus state without compositional surprises. */
  --ys-focus-ring: 0 0 0 3px var(--ys-accent-soft),
                   0 0 0 5px var(--ys-accent);
}