/* ====================================================
   Æther — Design Tokens (V3B · Soft Modern)
   ----------------------------------------------------
   Single source of truth for colors, typography, spacing,
   radii, and shadows. Import once at the document root.
   ==================================================== */

:root{
  /* ---------- COLOR ---------- */
  /* Surface */
  --bg:                #FFFFFF;
  --surface:           #FFFFFF;
  --surface-soft:      #FBF9FF;

  /* Ink (text) */
  --ink:               #1A1525;
  --ink-soft:          #5A5070;
  --ink-mute:          #6E6582;

  /* Lines & dividers */
  --line:              #F0EDF5;
  --line-strong:       #E5E0EE;

  /* Brand — Electric Violet */
  --primary:           #7C3AED;
  --primary-deep:      #5B21B6;
  --primary-soft:      #F5F0FF;
  --primary-mist:      #FAF7FF;

  /* Brand secondary — Blush */
  --pink:              #FCE7F3;
  --pink-deep:         #F472B6;
  --pink-mute:         #FFF6F8;

  /* Five Elements (Saju) */
  --el-wood:           #6B8E5A;  /* 木 */
  --el-fire:           #C25A4C;  /* 火 */
  --el-earth:          #B89968;  /* 土 */
  --el-metal:          #B8B8C2;  /* 金 */
  --el-water:          #4A6B8A;  /* 水 */

  /* State colors */
  --success:           #4A8B3A;
  --warning:           #B57E1A;
  --danger:            #C4453A;
  --success-soft:      #E8F0E0;
  --warning-soft:      #FFF1D6;
  --danger-soft:       #FCE6E2;

  /* ---------- TYPOGRAPHY ---------- */
  --font-serif:        "Fraunces", ui-serif, Georgia, serif;
  --font-sans:         "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", sans-serif;
  --font-mono:         "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (rem-based; 1rem = 16px) */
  --t-xs:              0.6875rem;   /* 11px */
  --t-sm:              0.8125rem;   /* 13px */
  --t-md:              1rem;        /* 16px */
  --t-lg:              1.125rem;    /* 18px */
  --t-xl:              1.375rem;    /* 22px */
  --t-2xl:             1.625rem;    /* 26px */
  --t-3xl:             2rem;        /* 32px */
  --t-4xl:             2.625rem;    /* 42px */
  --t-5xl:             3.375rem;    /* 54px */
  --t-6xl:             4.25rem;     /* 68px */

  /* Line heights */
  --lh-tight:          1.0;
  --lh-snug:           1.15;
  --lh-normal:         1.5;
  --lh-relaxed:        1.65;

  /* Letter spacing */
  --ls-tight:          -0.03em;
  --ls-snug:           -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.04em;
  --ls-widest:         0.22em;

  /* Fraunces variation defaults */
  --fr-display:        "opsz" 144, "SOFT" 100;
  --fr-body:           "opsz" 9;

  /* ---------- SPACING ---------- */
  --s-1:               4px;
  --s-2:               8px;
  --s-3:               12px;
  --s-4:               16px;
  --s-5:               20px;
  --s-6:               24px;
  --s-7:               32px;
  --s-8:               48px;
  --s-9:               64px;
  --s-10:              80px;

  /* Layout constants */
  --shell-mobile:      430px;
  --shell-product:     540px;
  --shell-info:        760px;
  --shell-doc:         880px;
  --shell-marketing:   1100px;
  --shell-blog:        1200px;
  --gutter-mobile:     20px;
  --gutter-desktop:    24px;

  /* ---------- RADII ---------- */
  --r-xs:              6px;
  --r-sm:              10px;
  --r-md:              14px;
  --r-lg:              20px;
  --r-xl:              24px;
  --r-2xl:             28px;
  --r-pill:            999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:         0 4px 14px rgba(124, 58, 237, 0.05);
  --shadow-md:         0 8px 28px rgba(124, 58, 237, 0.07);
  --shadow-lg:         0 14px 42px rgba(124, 58, 237, 0.10);
  --shadow-glow:       0 16px 48px rgba(124, 58, 237, 0.22);
  --shadow-pink:       0 12px 36px rgba(244, 114, 182, 0.12);

  /* ---------- GRADIENTS ---------- */
  --grad-cosmic:       linear-gradient(160deg, #1A1525 0%, #5B21B6 60%, #7C3AED 100%);
  --grad-mist-violet:  linear-gradient(135deg, #FFFFFF 0%, var(--primary-mist) 100%);
  --grad-mist-pink:    linear-gradient(135deg, #FFFFFF 0%, var(--pink-mute) 100%);
  --grad-blush:        linear-gradient(135deg, var(--pink) 0%, #FCD7E5 100%);
  --grad-bar:          linear-gradient(90deg, var(--primary) 0%, var(--pink-deep) 100%);

  /* ---------- ANIMATIONS ---------- */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:            0.15s;
  --t-base:            0.25s;
  --t-slow:            0.4s;

  /* ---------- Z-INDEX ---------- */
  --z-nav:             50;
  --z-tabbar:          60;
  --z-overlay:         100;
  --z-modal:           200;
}

/* Dark-mode hook (future) — keep tokens.css future-proof */
@media (prefers-color-scheme: dark){
  /* :root { --bg: #1A1525; ... } — opt-in later */
}