/**
 * ojikanri-variables.css
 * CSS Custom Properties (Design Tokens) for the ojikanri "煌" theme.
 * Luxurious night-work aesthetic: deep navy, champagne gold, rose accents.
 */

:root {
	/* ── Colour Palette ─────────────────────────────── */
	/* Deep midnight navy - sophistication */
	--oji-color-bg:           #0a0a14;
	--oji-color-bg-sub:       #0f0f1e;
	--oji-color-surface:      #161625;
	--oji-color-surface-glass: rgba(22, 22, 37, 0.85);
	--oji-color-border:       #2a2a45;
	--oji-color-border-glow:  rgba(212, 175, 87, 0.3);

	/* Champagne Gold - primary accent */
	--oji-color-accent-gold:  #d4af57;
	--oji-color-accent-gold-light: #e8c878;
	--oji-color-accent-gold-dim: rgba(212, 175, 87, 0.15);

	/* Rose Pink - secondary accent */
	--oji-color-accent-pink:  #d4487a;
	--oji-color-accent-pink-light: #e86b9a;
	--oji-color-accent-pink-dim: rgba(212, 72, 122, 0.15);

	/* Text */
	--oji-color-text:         #f5f5f8;
	--oji-color-text-muted:   #8a8aa0;
	--oji-color-text-gold:    #d4af57;

	/* Status */
	--oji-color-success:      #5cb85c;
	--oji-color-error:        #e74c3c;
	--oji-color-warning:      #f0ad4e;
	--oji-color-info:         #5bc0de;

	/* Gradients */
	--oji-gradient-gold:      linear-gradient(135deg, #d4af57 0%, #f0d78c 50%, #d4af57 100%);
	--oji-gradient-surface:   linear-gradient(180deg, rgba(22, 22, 37, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);
	--oji-gradient-shimmer:   linear-gradient(90deg, transparent 0%, rgba(212, 175, 87, 0.1) 50%, transparent 100%);
	--oji-gradient-border:    linear-gradient(135deg, rgba(212, 175, 87, 0.5) 0%, rgba(212, 72, 122, 0.3) 100%);

	/* ── Typography ─────────────────────────────────── */
	/* Display: Elegant serif for headings */
	--oji-font-display:       "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
	/* Body: Clean modern gothic */
	--oji-font-family:        "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

	--oji-font-size-xs:       0.75rem;   /* 12px */
	--oji-font-size-sm:       0.875rem;  /* 14px */
	--oji-font-size-base:     1rem;      /* 16px */
	--oji-font-size-md:       1.125rem;  /* 18px */
	--oji-font-size-lg:       1.25rem;   /* 20px */
	--oji-font-size-xl:       1.5rem;    /* 24px */
	--oji-font-size-2xl:      2rem;      /* 32px */
	--oji-font-size-3xl:      2.5rem;    /* 40px */

	--oji-font-weight-normal: 400;
	--oji-font-weight-medium: 500;
	--oji-font-weight-bold:   700;
	--oji-line-height:        1.7;
	--oji-letter-spacing:     0.02em;

	/* ── Spacing ────────────────────────────────────── */
	--oji-space-xxs:  0.25rem;  /*  4px */
	--oji-space-xs:   0.5rem;   /*  8px */
	--oji-space-sm:   0.75rem;  /* 12px */
	--oji-space-md:   1rem;     /* 16px */
	--oji-space-lg:   1.5rem;   /* 24px */
	--oji-space-xl:   2rem;     /* 32px */
	--oji-space-2xl:  3rem;     /* 48px */
	--oji-space-3xl:  4rem;     /* 64px */

	/* ── Border Radius ──────────────────────────────── */
	--oji-radius-sm:    6px;
	--oji-radius-md:    12px;
	--oji-radius-lg:    16px;
	--oji-radius-xl:    24px;
	--oji-radius-pill:  9999px;

	/* ── Shadows ────────────────────────────────────── */
	--oji-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.4);
	--oji-shadow-md:   0 4px 20px rgba(0, 0, 0, 0.5);
	--oji-shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.6);
	--oji-shadow-glow: 0 0 20px rgba(212, 175, 87, 0.15);
	--oji-shadow-pink: 0 0 20px rgba(212, 72, 122, 0.15);

	/* ── Z-index layers ─────────────────────────────── */
	--oji-z-nav:    100;
	--oji-z-modal:  200;
	--oji-z-toast:  300;

	/* ── Transitions ────────────────────────────────── */
	--oji-transition-fast:   0.15s ease-out;
	--oji-transition-normal: 0.3s ease-out;
	--oji-transition-slow:   0.5s ease-out;
	--oji-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Layout ─────────────────────────────────────── */
	--oji-container-sm:  480px;
	--oji-container-md:  768px;
	--oji-container-lg:  1024px;
	--oji-nav-height:    64px;
}