/* ============================================
   PHOENIX ACCOUNTING GROUP - CSS Variables
   Design System Tokens
   ============================================ */

:root {
  /* ─── Brand Colors ─── */
  --color-navy:        #0B1D3A;
  --color-navy-dark:   #060F20;
  --color-navy-mid:    #132848;
  --color-navy-light:  #1C3A5E;
  --color-gold:        #C9A84C;
  --color-gold-light:  #E8C86A;
  --color-gold-dark:   #A07830;
  --color-red:         #B20600;

  /* ─── Neutral Colors ─── */
  --color-white:       #FFFFFF;
  --color-off-white:   #F8F9FC;
  --color-gray-100:    #F0F3F8;
  --color-gray-200:    #E1E6EF;
  --color-gray-300:    #C4CCDB;
  --color-gray-400:    #8892A4;
  --color-gray-500:    #5A6478;
  --color-gray-600:    #3D4558;
  --color-gray-700:    #252E40;
  --color-black:       #0A0C10;

  /* ─── Accent Colors (per service) ─── */
  --color-accent-1:    #D44000;  /* 海外進出 */
  --color-accent-2:    #E87020;  /* M&A */
  --color-accent-3:    #0A8B7A;  /* PMI */
  --color-accent-4:    #5E8F20;  /* 移転価格 */
  --color-accent-5:    #C9A84C;  /* 上場支援 */
  --color-accent-6:    #2060B8;  /* 業務プロセス */
  --color-accent-7:    #8B30B0;  /* 資産管理 */
  --color-accent-8:    #B20600;  /* グローバル税務 */

  /* ─── Typography ─── */
  --font-primary:      'Montserrat', 'Noto Sans JP', sans-serif;
  --font-heading:      'Cormorant Garamond', sans-serif;
  --font-body:         'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --font-accent:       'Cormorant Garamond', serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.25rem;
  --text-hero:  3.75rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;
  --leading-loose:    2.2;

  --tracking-tight:   -0.04em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* ─── Spacing ─── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;
  --space-40:   10rem;
  --space-48:   12rem;

  /* ─── Layout ─── */
  --max-width:       1440px;
  --container-pad:   clamp(1.5rem, 5vw, 5rem);
  --nav-height:      80px;
  --nav-height-scrolled: 64px;

  /* ─── Border Radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.10);
  --shadow-xl:    0 24px 64px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.12);
  --shadow-gold:  0 8px 32px rgba(201,168,76,0.28);
  --shadow-navy:  0 8px 48px rgba(11,29,58,0.40);
  --shadow-inset: inset 0 0 60px rgba(0,0,0,0.4);

  /* ─── Transitions ─── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    600ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-ease:    500ms ease;

  /* ─── Z-index ─── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-cursor:    600;

  /* ─── Gradients ─── */
  --gradient-navy:    linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 50%, var(--color-navy-light) 100%);
  --gradient-gold:    linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 50%, var(--color-gold-light) 100%);
  --gradient-hero:    linear-gradient(160deg, rgba(6,15,32,0.92) 0%, rgba(11,29,58,0.75) 50%, rgba(19,40,72,0.65) 100%);
  --gradient-card:    linear-gradient(180deg, transparent 0%, rgba(11,29,58,0.85) 100%);
  --gradient-section: linear-gradient(180deg, #F8F9FC 0%, #FFFFFF 100%);
}