/*
 * Derma Pricelist — Design Tokens
 *
 * Single source of truth for all UI styling decisions in the dashboard/admin
 * surface. The print stylesheet intentionally does NOT consume these tokens —
 * it keeps absolute pt values to preserve fidelity with the original GAS output.
 *
 * Style direction: Linear/Vercel/macOS-inspired — clean modern SaaS with a
 * blue accent and translucent white surfaces (glassmorphism) on overlays.
 *
 * Token naming follows the pattern --dp-{category}-{scale-or-role}.
 * Adding a new component? Use only these tokens. If a value you need doesn't
 * exist as a token, add it here first — never inline a literal in admin.css.
 */

:root {
	/* ============================================================
	 * 1. Color Primitives — blue palette + neutrals
	 * Use primitives only inside semantic tokens below; components
	 * should reference semantic tokens, not primitives.
	 * ============================================================ */

	/* Blue (primary) — Tailwind-style scale, picked for Korean text legibility */
	--dp-blue-50:  #eff6ff;
	--dp-blue-100: #dbeafe;
	--dp-blue-200: #bfdbfe;
	--dp-blue-300: #93c5fd;
	--dp-blue-400: #60a5fa;
	--dp-blue-500: #3b82f6;
	--dp-blue-600: #2563eb;
	--dp-blue-700: #1d4ed8;
	--dp-blue-800: #1e40af;
	--dp-blue-900: #1e3a8a;

	/* Neutral — slightly cool gray, harmonizes with the blue accent */
	--dp-neutral-0:    #ffffff;
	--dp-neutral-50:   #f8fafc;
	--dp-neutral-100:  #f1f5f9;
	--dp-neutral-200:  #e2e8f0;
	--dp-neutral-300:  #cbd5e1;
	--dp-neutral-400:  #94a3b8;
	--dp-neutral-500:  #64748b;
	--dp-neutral-600:  #475569;
	--dp-neutral-700:  #334155;
	--dp-neutral-800:  #1e293b;
	--dp-neutral-900:  #0f172a;
	--dp-neutral-950:  #020617;

	/* Functional accents (kept narrow — extend only when truly needed) */
	--dp-success-500:  #10b981;
	--dp-danger-500:   #ef4444;
	--dp-warning-500:  #f59e0b;

	/* ============================================================
	 * 2. Semantic Color Tokens
	 * The named roles the UI references. Swap the primitive on the
	 * right of these to re-theme without touching components.
	 * ============================================================ */

	/* Surfaces — translucent whites layered over a tinted page bg.
	 * The page-bg gradient makes the translucency visible. */
	--dp-bg-page:           linear-gradient(180deg, #f0f6ff 0%, #f7f9fc 60%, #f5f7fa 100%);
	--dp-bg-page-solid:     #f5f7fa;  /* fallback when gradient unsupported */
	--dp-surface-raised:    rgba(255, 255, 255, 0.72);  /* cards */
	--dp-surface-elevated:  rgba(255, 255, 255, 0.85);  /* modals, popovers */
	--dp-surface-overlay:   rgba(15, 23, 42, 0.42);     /* modal backdrop */
	--dp-surface-hover:     rgba(255, 255, 255, 0.92);

	/* Borders / dividers */
	--dp-border-subtle:     rgba(148, 163, 184, 0.24);
	--dp-border-default:    rgba(148, 163, 184, 0.40);
	--dp-border-strong:     rgba(71, 85, 105, 0.55);
	--dp-border-focus:      var(--dp-blue-500);

	/* Text */
	--dp-text-primary:      var(--dp-neutral-900);
	--dp-text-secondary:    var(--dp-neutral-600);
	--dp-text-muted:        var(--dp-neutral-500);
	--dp-text-disabled:     var(--dp-neutral-400);
	--dp-text-on-primary:   var(--dp-neutral-0);
	--dp-text-link:         var(--dp-blue-600);
	--dp-text-danger:       var(--dp-danger-500);

	/* Brand / interactive */
	--dp-color-primary:        var(--dp-blue-600);
	--dp-color-primary-hover:  var(--dp-blue-700);
	--dp-color-primary-active: var(--dp-blue-800);
	--dp-color-primary-soft:   var(--dp-blue-100);   /* chip / tag bg */
	--dp-color-primary-tint:   rgba(59, 130, 246, 0.10);

	/* Focus ring (compound) */
	--dp-ring-focus: 0 0 0 3px rgba(59, 130, 246, 0.35);
	--dp-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.30);

	/* ============================================================
	 * 3. Typography
	 * ============================================================ */

	/* Font stacks — Pretendard preferred for Korean SaaS feel, with deep fallback */
	--dp-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, "맑은 고딕", system-ui, sans-serif;
	--dp-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Roboto Mono",
		Consolas, "Liberation Mono", monospace;

	/* Type scale — modular, 1rem = 16px. Use rem so user zoom scales correctly. */
	--dp-text-2xs:   0.6875rem;  /* 11px */
	--dp-text-xs:    0.75rem;    /* 12px */
	--dp-text-sm:    0.8125rem;  /* 13px */
	--dp-text-base:  0.875rem;   /* 14px — default UI body */
	--dp-text-md:    0.9375rem;  /* 15px — form input */
	--dp-text-lg:    1rem;       /* 16px */
	--dp-text-xl:    1.125rem;   /* 18px — subhead */
	--dp-text-2xl:   1.25rem;    /* 20px — section title */
	--dp-text-3xl:   1.5rem;     /* 24px — page title */
	--dp-text-4xl:   1.875rem;   /* 30px — display */

	/* Weights */
	--dp-weight-regular:  400;
	--dp-weight-medium:   500;
	--dp-weight-semibold: 600;
	--dp-weight-bold:     700;

	/* Line heights */
	--dp-leading-tight:   1.2;
	--dp-leading-snug:    1.35;
	--dp-leading-normal:  1.5;
	--dp-leading-relaxed: 1.65;

	/* Letter spacing */
	--dp-tracking-tight:  -0.01em;
	--dp-tracking-normal: 0;
	--dp-tracking-wide:   0.025em;

	/* ============================================================
	 * 4. Spacing (4px base scale)
	 * Use these for padding, margin, gap. Never write `padding: 12px` —
	 * write `padding: var(--dp-space-3)` so future re-densification is global.
	 * ============================================================ */
	--dp-space-0:   0;
	--dp-space-px:  1px;
	--dp-space-1:   0.25rem;   /* 4px */
	--dp-space-2:   0.5rem;    /* 8px */
	--dp-space-3:   0.75rem;   /* 12px */
	--dp-space-4:   1rem;      /* 16px */
	--dp-space-5:   1.25rem;   /* 20px */
	--dp-space-6:   1.5rem;    /* 24px */
	--dp-space-7:   1.75rem;   /* 28px */
	--dp-space-8:   2rem;      /* 32px */
	--dp-space-10:  2.5rem;    /* 40px */
	--dp-space-12:  3rem;      /* 48px */
	--dp-space-16:  4rem;      /* 64px */
	--dp-space-20:  5rem;      /* 80px */
	--dp-space-24:  6rem;      /* 96px */

	/* ============================================================
	 * 5. Radius
	 * ============================================================ */
	--dp-radius-none: 0;
	--dp-radius-xs:   2px;
	--dp-radius-sm:   4px;
	--dp-radius-md:   6px;
	--dp-radius-lg:   8px;
	--dp-radius-xl:   12px;
	--dp-radius-2xl:  16px;
	--dp-radius-3xl:  24px;
	--dp-radius-full: 9999px;

	/* ============================================================
	 * 6. Shadows
	 * Soft shadows tuned for the translucent surfaces — no harsh edges.
	 * ============================================================ */
	--dp-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
	--dp-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--dp-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
	--dp-shadow-lg:  0 10px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
	--dp-shadow-xl:  0 20px 40px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);

	/* Subtle inner border for glass cards */
	--dp-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 1px 3px rgba(15, 23, 42, 0.06);

	/* ============================================================
	 * 7. Blur (backdrop) — used by glass surfaces
	 * ============================================================ */
	--dp-blur-sm: 8px;
	--dp-blur-md: 14px;
	--dp-blur-lg: 24px;
	--dp-blur-xl: 40px;

	/* ============================================================
	 * 8. Motion
	 * ============================================================ */
	--dp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--dp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dp-duration-fast: 120ms;
	--dp-duration-base: 200ms;
	--dp-duration-slow: 320ms;

	/* ============================================================
	 * 9. Z-index scale
	 * ============================================================ */
	--dp-z-base:           1;
	--dp-z-sticky:         100;
	--dp-z-dropdown:       1000;
	--dp-z-modal-backdrop: 100040;
	--dp-z-modal:          100050;
	--dp-z-popover:        100060;
	--dp-z-toast:          100070;

	/* ============================================================
	 * 10. Component sizing primitives
	 * Buttons / inputs / chips share these so they line up perfectly.
	 * ============================================================ */
	--dp-control-h-sm: 28px;
	--dp-control-h-md: 36px;
	--dp-control-h-lg: 44px;

	--dp-control-px-sm: var(--dp-space-2);
	--dp-control-px-md: var(--dp-space-3);
	--dp-control-px-lg: var(--dp-space-4);
}

/* ================================================================
 * Optional dark-mode preset — kept inert by default; flip a class
 * on <html> later (e.g., `<html data-dp-theme="dark">`) to activate.
 * Defined here so components don't need dark-mode-specific selectors.
 * ================================================================ */
[data-dp-theme="dark"] {
	--dp-bg-page:          linear-gradient(180deg, #0b1220 0%, #0f172a 60%, #0a0f1c 100%);
	--dp-bg-page-solid:    #0a0f1c;
	--dp-surface-raised:   rgba(30, 41, 59, 0.65);
	--dp-surface-elevated: rgba(30, 41, 59, 0.85);
	--dp-surface-overlay:  rgba(2, 6, 23, 0.62);
	--dp-surface-hover:    rgba(51, 65, 85, 0.72);

	--dp-border-subtle:    rgba(148, 163, 184, 0.16);
	--dp-border-default:   rgba(148, 163, 184, 0.28);
	--dp-border-strong:    rgba(203, 213, 225, 0.45);

	--dp-text-primary:     var(--dp-neutral-50);
	--dp-text-secondary:   var(--dp-neutral-300);
	--dp-text-muted:       var(--dp-neutral-400);
	--dp-color-primary-soft: rgba(59, 130, 246, 0.18);

	--dp-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ================================================================
 * Reduced-motion respect
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dp-duration-fast: 1ms;
		--dp-duration-base: 1ms;
		--dp-duration-slow: 1ms;
	}
}