/**
 * variables.css — Fitcom Brand Design Tokens
 *
 * Design direction:
 * - app.fitcomfitness.com design language (orange brand top bar)
 * - Coach端 = Grab driver (big buttons, big cards, zero learning curve)
 * - Apple visual quality (12px radius, whitespace, typography hierarchy)
 * - Chinese: line-height 1.6-1.8, min font 14px, min button height 48px
 */

:root {
  /* ── Brand Colors ── */
  --fitcom-orange: #F6921E;
  --fitcom-orange-light: #FDB96A;
  --fitcom-orange-dark: #D47A0E;
  --fitcom-orange-bg: rgba(246, 146, 30, 0.06);
  --fitcom-teal: #17808C;
  --fitcom-teal-light: #1FA3B2;
  --fitcom-dark: #262626;
  --fitcom-dark-video: #1A1A1A;
  --fitcom-white: #FFFFFF;

  /* ── Functional Colors ── */
  --success: #34C759;       /* Apple green */
  --success-light: #dcfce7;
  --warning: #FF9500;       /* Apple orange-warning */
  --warning-light: #fef3c7;
  --danger: #FF3B30;        /* Apple red */
  --danger-light: #fee2e2;
  --info: #007AFF;          /* Apple blue */
  --info-light: #dbeafe;

  /* ── Surface & Background ── */
  --bg-primary: #F2F2F7;    /* Apple system grey 6 */
  --bg-card: #FFFFFF;
  --bg-sidebar: var(--fitcom-dark);
  --bg-topbar: var(--fitcom-orange);
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-active: rgba(246, 146, 30, 0.08);
  --bg-skeleton: #E5E5EA;   /* loading placeholder */

  /* ── Text ── */
  --text-primary: #1C1C1E;  /* Apple label */
  --text-secondary: #3C3C43; /* Apple secondary label, with opacity handled per-use */
  --text-tertiary: #8E8E93; /* Apple tertiary */
  --text-muted: #AEAEB2;    /* Apple quaternary */
  --text-inverse: #FFFFFF;
  --text-link: var(--fitcom-orange);

  /* ── Borders ── */
  --border-default: #E5E5EA; /* Apple separator */
  --border-light: #F2F2F7;
  --border-focus: var(--fitcom-orange);

  /* ── Status Colors (Content Workflow) ── */
  --status-planning: #8E8E93;
  --status-to-shoot: #FF9500;
  --status-editing: #007AFF;
  --status-to-upload: #AF52DE;
  --status-published: #34C759;

  /* ── Branch Colors ── */
  --branch-melaka-klj: #F6921E;
  --branch-melaka-mt: #DC2626;
  --branch-seremban-ks: #17808C;

  /* ── Typography ──
   * Min font size: 14px (Chinese readability)
   * Chinese line-height: 1.6-1.8
   */
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body: 'Poppins', 'Noto Sans SC', sans-serif;
  --font-chinese: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --text-sm: 0.875rem;   /* 14px — minimum size */
  --text-base: 1rem;     /* 16px — body default */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px — hero KPI numbers */

  --leading-tight: 1.3;     /* headings, English */
  --leading-normal: 1.5;    /* English body */
  --leading-relaxed: 1.7;   /* Chinese body — 1.6-1.8 range */

  /* ── Spacing (Apple-style generous) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Border Radius (Apple: 12px default) ── */
  --radius-sm: 8px;
  --radius-md: 12px;       /* Apple standard */
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows (subtle, Apple-like) ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* ── Touch Targets (Grab-style: big and easy) ── */
  --touch-min: 48px;       /* minimum button / tap target height */
  --touch-lg: 56px;        /* large action buttons */
  --touch-xl: 64px;        /* hero action cards */

  /* ── Layout ── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
  --topbar-height: 56px;
  --header-height: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-height: 64px; /* taller for easier touch */
  --content-max-width: 1200px;
}