/* ============================================================
   Hookpie — Design Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --primary: #1A73E8;
  --primary-hover: #1557B0;
  --primary-light: #E8F0FE;
  --primary-subtle: #F0F4FF;

  /* ---- Semantic Colors ---- */
  --success: #1E8E3E;
  --success-light: #E6F4EA;
  --warning: #F9AB00;
  --warning-light: #FEF7E0;
  --error: #D93025;
  --error-light: #FCE8E6;
  --info: #1A73E8;
  --info-light: #E8F0FE;

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --bg: #F8F9FA;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E8EAED;
  --border-focus: #1A73E8;

  /* ---- Text ---- */
  --text-primary: #202124;
  --text-secondary: #5F6368;
  --text-tertiary: #80868B;
  --text-inverse: #FFFFFF;
  --text-link: #1A73E8;

  /* ---- Sidebar ---- */
  --sidebar-bg: #FFFFFF;
  --sidebar-width: 240px;
  --sidebar-item-hover: #F1F3F4;
  --sidebar-item-active-bg: #E8F0FE;
  --sidebar-item-active-text: #1A73E8;

  /* ---- Elevation / Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(60, 64, 67, 0.08);
  --shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.10), 0 1px 2px rgba(60, 64, 67, 0.06);
  --shadow-md: 0 4px 12px rgba(60, 64, 67, 0.10), 0 2px 4px rgba(60, 64, 67, 0.06);
  --shadow-lg: 0 8px 24px rgba(60, 64, 67, 0.12), 0 4px 8px rgba(60, 64, 67, 0.08);
  --shadow-xl: 0 16px 40px rgba(60, 64, 67, 0.14), 0 8px 16px rgba(60, 64, 67, 0.10);

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 15px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Typography ---- */
  --font-sans: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* ---- Transitions ---- */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}