/**
 * VATECH Asia Customer Portal Design Tokens & Variables
 * Apple Minimalist Design System Harmonized with Official VATECH Red (#db072f)
 */

:root {
  /* Official Brand Colors */
  --color-brand-red: #db072f;         /* Official VATECH Red */
  --color-brand-red-hover: #b80526;   /* Tactical hover state */
  --color-brand-red-subtle: rgba(219, 7, 47, 0.08); /* Soft tinted background */
  --color-brand-red-tint: rgba(219, 7, 47, 0.14);   /* Selected / active highlight */
  --color-brand-red-glow: rgba(219, 7, 47, 0.22);
  --color-brand-blue: #0071e3;        /* Refined Medical / Apple Blue */
  --color-brand-gray: #f5f5f7;        /* Apple Signature Soft Gray */
  --color-brand-black: #1d1d1f;       /* Deep Apple Charcoal Black */
  --color-brand-white: #ffffff;       /* Pristine White */
  --color-brand-green: #34c759;       /* Modern Success Emerald */
  --color-brand-green-x: #85bb5a;     /* Green X Series Accent */
  --color-brand-orange: #ff9500;      /* Modern Notice Amber */
  --color-folder-yellow: #ffc107;     /* Standard Directory Tree Folder Yellow */
  --color-folder-yellow-subtle: rgba(255, 193, 7, 0.12); /* Folder Soft Yellow Surface */

  /* Apple-Minimalist Layout & Chrome Surfaces */
  --color-sidebar-bg: #fbfbfd;        /* Translucent, clean Apple sidebar */
  --color-sidebar-header-bg: #ffffff;
  --color-sidebar-border: rgba(0, 0, 0, 0.08);
  --color-sidebar-text: #48484a;
  --color-sidebar-text-hover: #1d1d1f;
  --color-sidebar-text-active: var(--color-brand-red);
  --color-sidebar-active-bg: rgba(219, 7, 47, 0.08);
  --color-sidebar-active-border: var(--color-brand-red);

  --color-app-bg: #f5f5f7;            /* Apple signature soft canvas */
  --color-topbar-bg: rgba(255, 255, 255, 0.82);
  --color-topbar-border: rgba(0, 0, 0, 0.08);
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.08);
  --color-input-border: #d2d2d7;
  --color-input-focus-border: var(--color-brand-red);
  --color-input-focus-shadow: rgba(219, 7, 47, 0.14);

  /* Typography Colors (WCAG AA Compliant on Canvas, Card, and Sidebar Surfaces) */
  --color-text-primary: #1d1d1f;      /* High-contrast Apple slate charcoal */
  --color-text-secondary: #48484a;    /* Body and standard copy (6.8:1+ contrast) */
  --color-text-muted: #59595e;        /* Subtitles, labels, metadata (5.1:1+ contrast) */
  --color-text-light: #6e6e73;        /* Monospace hashes, timestamps (4.5:1+ contrast) */
  --color-text-white: #ffffff;

  /* Typography Scale & Families */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", 'Vatech Sans', 'Pretendard', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Pretendard', 'Segoe UI', Roboto, sans-serif;
  --font-mono: SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Apple & Unified Component Token Aliases */
  --ap-border: rgba(0, 0, 0, 0.08);
  --ap-border-subtle: rgba(0, 0, 0, 0.04);
  --ap-border-hover: rgba(0, 0, 0, 0.16);
  --ap-card-bg: #ffffff;
  --ap-bg: #f5f5f7;
  --ap-sidebar-bg: #fbfbfd;
  --ap-text-primary: var(--color-text-primary);
  --ap-text-secondary: var(--color-text-secondary);
  --ap-text-tertiary: var(--color-text-muted);
  --ap-text-quaternary: var(--color-text-light);
  --vt-red: var(--color-brand-red);
  --vt-red-hover: var(--color-brand-red-hover);
  --vt-red-subtle: var(--color-brand-red-subtle);
  --vt-red-glow: var(--color-brand-red-glow);

  /* Legacy & Bootstrap Bridge Aliases */
  --vat-primary: var(--color-brand-red);
  --vat-primary-dark: var(--color-brand-red-hover);
  --vat-secondary: var(--color-text-secondary);
  --vat-dark: var(--color-text-primary);
  --vat-sidebar-bg: var(--color-sidebar-bg);
  --vat-light: var(--color-app-bg);
  --vat-gray: var(--color-text-muted);
  --vat-font-family: var(--font-body);

  /* Shadows & Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.16);
  --shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.12);

  /* Geometry & Sizing */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms ease;
  --transition-normal: 250ms var(--ease-apple);
  --transition-slow: 400ms var(--ease-apple);
}