/* =============================================================
   りらみゅ / Lilla Music Online — Design Tokens
   空パステル × 上品グラデーション
   ============================================================= */

:root {
  /* ---------- Sky (primary / ロゴ由来) ---------- */
  --sky-50:  #F4FAFF;
  --sky-100: #E6F3FF;
  --sky-200: #CCE8FF;
  --sky-300: #A5D8FF;
  --sky-400: #7CC4F8;
  --sky-500: #52ABEC;
  --sky-600: #2A87CF;
  --sky-700: #2A73AF;   /* white text OK (4.8:1) */
  --sky-800: #1F5688;

  /* ---------- Sakura (accent / ほっぺ・音符) ---------- */
  --rose-50:  #FFF6F9;
  --rose-100: #FFEAF1;
  --rose-200: #FFD3E1;
  --rose-300: #FFB3C6;
  --rose-400: #FF8FAB;
  --rose-500: #EE6291;
  --rose-600: #CE3A6E;  /* white text OK (4.7:1) */
  --rose-700: #B92F63;

  /* ---------- Support ---------- */
  --lav-100: #F3EEFF;
  --lav-200: #E5DCFF;
  --lav-300: #CDBDF9;
  --lav-500: #8E6FD8;
  --lemon-100: #FFF9E3;
  --lemon-200: #FFF0B8;
  --lemon-300: #FFE38F;
  --lemon-600: #B98A15;
  --mint-100: #EAFBF5;
  --mint-200: #C9F0E3;
  --mint-600: #159C74;

  /* ---------- Ink (文字) ---------- */
  --ink-900: #2E3D57;   /* 11.0:1 on white */
  --ink-700: #435471;   /* 8.0:1  */
  --ink-500: #6B7C93;   /* 4.6:1  */
  --ink-300: #9FADC0;   /* 装飾のみ */
  --ink-100: #DDE6F1;

  /* ---------- Surface ---------- */
  --surface:      #FFFFFF;
  --surface-soft: #F7FBFF;
  --surface-sunk: #EFF6FE;
  --border:       #DCEBFA;
  --border-strong:#C3DDF3;

  /* ---------- Semantic ---------- */
  --color-primary:      var(--sky-600);
  --color-on-primary:   #FFFFFF;
  --color-secondary:    var(--rose-400);
  --color-cta:          var(--rose-600);
  --color-foreground:   var(--ink-900);
  --color-muted:        var(--ink-500);
  --color-success:      var(--mint-600);
  --color-warning:      var(--lemon-600);
  --color-danger:       #D14343;
  --color-ring:         #4EA6F0;

  /* ---------- Gradients ---------- */
  --grad-sky:    linear-gradient(180deg, #EAF6FF 0%, #F5F1FF 52%, #FFF1F6 100%);
  --grad-hero:   linear-gradient(175deg, #CFEAFF 0%, #E4F1FF 38%, #F4EEFF 72%, #FFEFF5 100%);
  --grad-card:   linear-gradient(160deg, #FFFFFF 0%, #F8FCFF 100%);
  --grad-cta:    linear-gradient(135deg, #D9497C 0%, #B92F63 100%);
  --grad-blue:   linear-gradient(135deg, #57B3F1 0%, #2A73AF 100%);
  --grad-candy:  linear-gradient(120deg, #A5D8FF 0%, #CDBDF9 48%, #FFB3C6 100%);
  --grad-shine:  linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 80%);

  /* ---------- Shadow (青みのある柔らかい影) ---------- */
  --sh-xs: 0 1px 2px rgba(52,94,145,.08);
  --sh-sm: 0 2px 8px rgba(52,94,145,.10);
  --sh-md: 0 8px 24px rgba(52,94,145,.12);
  --sh-lg: 0 18px 44px rgba(52,94,145,.16);
  --sh-xl: 0 30px 70px rgba(52,94,145,.20);
  --sh-cta:0 10px 24px rgba(185,47,99,.30);
  --sh-inset: inset 0 -2px 0 rgba(52,94,145,.06);

  /* ---------- Radius ---------- */
  --r-xs:  8px;
  --r-sm:  14px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* ---------- Space (density 5 / standard) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Typography ---------- */
  --font-display: "Fredoka", "Zen Maru Gothic", system-ui, sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Fredoka",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs:   0.75rem;   /* 12 — ラベルのみ */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.0625rem; /* 17 本文 */
  --fs-lg:   clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.5rem + 3vw, 3.5rem);
  --fs-4xl:  clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-base:  1.8;   /* 和文本文はゆったり */
  --ls-wide:  .08em;
  --ls-jp:    .02em;

  /* ---------- Layout ---------- */
  --wrap:  1180px;
  --wrap-narrow: 760px;
  --wrap-app: 1080px;
  --header-h: 68px;
  --bottomnav-h: 66px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22,.68,.32,1);
  --ease-soft:  cubic-bezier(.33,.9,.4,1);
  --ease-back:  cubic-bezier(.34,1.56,.5,1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --z-deco: 0;
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;
}