/* ==========================================================================
   H-Board Design System — Foundations
   Tokens extracted from frontend/tailwind.config.js + frontend/src/index.css
   Dark mode is the primary surface. Light mode is the mirror set.
   ========================================================================== */

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

/* Poppins — brand sans, local TTFs in fonts/ */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:100; font-display:swap; src:url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:100; font-display:swap; src:url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:200; font-display:swap; src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

/* ──────────────────────────────────────────────────────────────────────────
   1. RAW COLOR PALETTE
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Dark surface hierarchy (canonical from tailwind.config.js → `surface`) */
  --hb-surface-0: #101418;  /* Canvas / deepest background */
  --hb-surface-1: #1E252B;  /* Cards, panels (elevated) */
  --hb-surface-2: #252B32;  /* Nested panels, table headers, hover */
  --hb-surface-3: #2C333A;  /* Active states, raised UI */

  /* Alternate dark surface set used in Dashboard (GitHub-inspired) */
  --hb-surface-canvas-alt: #0D1117;
  --hb-surface-panel-alt:  #161B22;
  --hb-surface-hover-alt:  #21262D;

  /* Dark text */
  --hb-text-primary-d:   #E0E6ED;   /* Off-white body text */
  --hb-text-secondary-d: #B1B9C4;   /* Muted labels */
  --hb-text-heading-d:   #FFFFFF;   /* Pure white, titles only */
  --hb-text-muted-d:     #6B7280;

  /* Dark borders */
  --hb-border-default-d: #30363D;   /* Subtle card delimiter */
  --hb-border-strong-d:  #3D444D;   /* Hover / focus */

  /* Light text & surfaces (from index.css :root) */
  --hb-surface-canvas-l: #F9FAFB;
  --hb-surface-card-l:   #FFFFFF;
  --hb-surface-nested-l: #F0F2F5;
  --hb-surface-active-l: #E5E7EB;

  --hb-text-primary-l:   #1C1E21;
  --hb-text-secondary-l: #6B7280;
  --hb-text-heading-l:   #111827;

  --hb-border-default-l: #E5E7EB;
  --hb-border-strong-l:  #D1D5DB;

  /* Brand / accent colors
     Primary is a pure blue. Gradients pair blue→purple (logo, CTA hover). */
  --hb-blue-400:   #60A5FA;
  --hb-blue-500:   #3B82F6;         /* selection, focus ring */
  --hb-blue-600:   #2563EB;         /* primary button */
  --hb-blue-700:   #1D4ED8;         /* primary hover */
  --hb-purple-500: #8B5CF6;         /* gradient pair */
  --hb-purple-600: #7C3AED;
  --hb-indigo-500: #6366F1;         /* folder palette */
  --hb-pink-500:   #EC4899;
  --hb-red-500:    #EF4444;
  --hb-orange-500: #F97316;
  --hb-yellow-500: #EAB308;
  --hb-green-500:  #22C55E;
  --hb-emerald-500:#10B981;
  --hb-teal-500:   #14B8A6;
  --hb-gray-500:   #6B7280;

  /* Priority scale (from KanbanCard.tsx) */
  --hb-priority-low:    #6B7280;
  --hb-priority-medium: #3B82F6;
  --hb-priority-high:   #F97316;
  --hb-priority-urgent: #EF4444;

  /* Board-type gradient pairs (Dashboard.tsx cards) */
  --hb-grad-canvas:   linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --hb-grad-kanban:   linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  --hb-grad-database: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --hb-grad-brand:    linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); /* logo mark */

  /* Element palettes (from Kanban column colors) */
  --hb-col-gray:   #9CA3AF;
  --hb-col-blue:   #60A5FA;
  --hb-col-green:  #34D399;
  --hb-col-yellow: #FBBF24;
  --hb-col-orange: #F97316;
  --hb-col-red:    #F87171;
  --hb-col-pink:   #EC4899;
  --hb-col-purple: #A78BFA;
  --hb-col-teal:   #2DD4BF;
  --hb-col-sky:    #38BDF8;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS — light default
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --bg-canvas:        var(--hb-surface-canvas-l);
  --bg-card:          var(--hb-surface-card-l);
  --bg-nested:        var(--hb-surface-nested-l);
  --bg-active:        var(--hb-surface-active-l);

  --text-primary:     var(--hb-text-primary-l);
  --text-secondary:   var(--hb-text-secondary-l);
  --text-heading:     var(--hb-text-heading-l);

  --border-default:   var(--hb-border-default-l);
  --border-strong:    var(--hb-border-strong-l);

  --accent:           var(--hb-blue-600);
  --accent-hover:     var(--hb-blue-700);
  --accent-soft-bg:   #EFF6FF;      /* bg-blue-50 */
  --accent-soft-text: var(--hb-blue-600);
  --focus-ring:       var(--hb-blue-500);

  --danger:           var(--hb-red-500);
  --warning:          var(--hb-orange-500);
  --success:          var(--hb-green-500);
}

/* Dark mode — toggled by .dark on <html>, matches App.tsx */
.dark {
  --bg-canvas:        var(--hb-surface-0);
  --bg-card:          var(--hb-surface-1);
  --bg-nested:        var(--hb-surface-2);
  --bg-active:        var(--hb-surface-3);

  --text-primary:     var(--hb-text-primary-d);
  --text-secondary:   var(--hb-text-secondary-d);
  --text-heading:     var(--hb-text-heading-d);

  --border-default:   var(--hb-border-default-d);
  --border-strong:    var(--hb-border-strong-d);

  --accent-soft-bg:   rgba(59, 130, 246, 0.15);  /* blue-900/20-ish */
  --accent-soft-text: #60A5FA;                   /* blue-400 */
}

/* ──────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   Poppins everywhere (local TTFs in fonts/). JetBrains Mono for code.
   Weights available 100–900 + italics; core usage 400/500/600/700.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Poppins', system-ui, Avenir, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Fluid-ish scale — everything in rem, tight leading on headings */
  --fs-xs:    0.75rem;   /* 12px — metadata, count badges */
  --fs-sm:    0.875rem;  /* 14px — body small, labels, menu items */
  --fs-base:  1rem;      /* 16px — body */
  --fs-lg:    1.125rem;  /* 18px */
  --fs-xl:    1.25rem;   /* 20px — modal / section titles */
  --fs-2xl:   1.5rem;    /* 24px */
  --fs-3xl:   1.875rem;  /* 30px */
  --fs-4xl:   2.25rem;   /* 36px */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wider:  0.05em;   /* uppercase section labels */
}

/* Base body */
body, .hb-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Semantic element styles — also exposed as utility classes */
.hb-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}
.hb-h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}
.hb-h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.hb-h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.hb-body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.hb-caption { font-size: var(--fs-xs); color: var(--text-secondary); }
.hb-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.hb-overline {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
}
.hb-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-nested);
  color: var(--text-primary);
}

/* Gradient text — used by logo wordmark in Dashboard sidebar */
.hb-gradient-text {
  background: var(--hb-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. SPACING, RADII, ELEVATION, MOTION
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* 4px base grid. Canvas snaps to 8px when grid enabled (see Toolbar.tsx). */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */

  /* Radii — rounded-lg (8) for chrome, rounded-xl (12) for inputs,
     rounded-2xl (16) for modals, rounded-full for pills/avatars. */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;   /* default button, toolbar, menu items */
  --radius-xl:   12px;  /* inputs, cards */
  --radius-2xl:  16px;  /* modals, empty-state tiles */
  --radius-full: 9999px;

  /* Shadows — soft and minimal. System leans on borders, not shadow. */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.35);

  /* Dark mode coloured glow — e.g. card hover on Dashboard */
  --shadow-glow-blue: 0 10px 30px -10px rgba(59, 130, 246, 0.35);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;   /* transition-colors / transition-all default */
  --dur-slow:   320ms;

  /* Focus ring — matches focus:ring-2 focus:ring-blue-500 */
  --ring-width: 2px;
  --ring-color: var(--focus-ring);
  --ring-offset: 2px;

  /* Layout */
  --sidebar-w:    16rem;  /* w-64 */
  --toolbar-w:    3.5rem;
  --header-h:    3.75rem;
  --kanban-col-w: 20rem;  /* w-80 */
}

/* Selection colour — from index.css */
::selection        { background-color: rgba(59, 130, 246, 0.3); }
.dark ::selection  { background-color: rgba(59, 130, 246, 0.5); }

/* Scrollbar — thin 8px, themed */
.hb-scroll::-webkit-scrollbar        { width: 8px; height: 8px; }
.hb-scroll::-webkit-scrollbar-track  { background: var(--bg-nested); border-radius: 4px; }
.hb-scroll::-webkit-scrollbar-thumb  { background: var(--border-strong); border-radius: 4px; }
.hb-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }