/*
 * styles/tokens.css
 * parloh design tokens — single source of truth.
 * Every CSS custom property used across the product lives here.
 * Import this first on every page, before any other stylesheet.
 * Next.js migration: move to styles/tokens.css, import in _app.js.
 */

/* ── FONT FACE ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Renade';
  src: local('Renade'), local('Renade-Regular'),
       url('/fonts/Renade-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ── LIGHT MODE TOKENS ───────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:             #f9f8f6;
  --surface:        #ffffff;
  --surface2:       #f4f2ee;
  --surface3:       #edeae4;
  --surface-inverse: #111009; /* intentional dark sections — does not flip in dark mode */

  /* Borders */
  --border:        rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.12);

  /* Text */
  --text-primary:   #111009;
  --text-secondary: #5c5852;
  --text-tertiary:  #9c9790;

  /* Brand */
  --accent:       #e8441a;
  --accent-hover: #d13a14;
  --accent-soft:  rgba(232, 68, 26, 0.07);
  --accent-soft2: rgba(232, 68, 26, 0.14);

  /* Semantic colours */
  --green:        #1a6b3a;
  --green-soft:   rgba(26, 107, 58, 0.08);
  --green-border: rgba(26, 107, 58, 0.18);

  --blue:         #2563eb;
  --blue-soft:    rgba(37, 99, 235, 0.08);

  --amber:        #d97706;
  --amber-soft:   rgba(217, 119, 6, 0.08);
  --amber-border: rgba(217, 119, 6, 0.20);

  --red:          #dc2626;
  --red-soft:     rgba(220, 38, 38, 0.08);

  /* Glassmorphism — used in nav, hero card, check-in banner only */
  --glass:        rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.9);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* Radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  /* Typography */
  --font-body:     'Hind', 'Noto Sans', 'Noto Sans Thai', 'Noto Sans KR', 'Noto Sans SC', system-ui, sans-serif;
  --font-display:  'Teko', 'Noto Sans', system-ui, sans-serif;
  --font-wordmark: 'Renade', 'Teko', system-ui, sans-serif;

  /* Transitions vocabulary (Tomás, DDR #004) */
  --transition-page:  300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-modal: 250ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-micro: 150ms ease;
  --transition-success: 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── DARK MODE TOKENS ────────────────────────────────────────── */
:root.dark {
  /* Surfaces */
  --bg:        #0f0e0c;
  --surface:   #1a1916;
  --surface2:  #222018;
  --surface3:  #2a2825;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* Text */
  --text-primary:   #f2efe9;
  --text-secondary: #9c9790;
  --text-tertiary:  #5c5852;

  /* Brand — accent stays consistent */
  --accent:       #e8441a;
  --accent-hover: #f05020;
  --accent-soft:  rgba(232, 68, 26, 0.12);
  --accent-soft2: rgba(232, 68, 26, 0.20);

  /* Semantic colours — dark mode variants */
  --green:        #34d068;
  --green-soft:   rgba(52, 208, 104, 0.10);
  --green-border: rgba(52, 208, 104, 0.20);

  --blue:         #60a5fa;
  --blue-soft:    rgba(96, 165, 250, 0.10);

  --amber:        #fbbf24;
  --amber-soft:   rgba(251, 191, 36, 0.10);
  --amber-border: rgba(251, 191, 36, 0.20);

  --red:          #f87171;
  --red-soft:     rgba(248, 113, 113, 0.10);

  /* Glassmorphism */
  --glass:        rgba(26, 25, 22, 0.80);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Shadows — deeper in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50);
}

/* ── Component layout vars (used by dashboard, checkin, passport) ─────────── */
:root {
  --sidebar-w:   240px;
  --topbar-h:    60px;
  --shadow:      0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
}