/* ============================================================
   FamilyHub v2.0 — Design Tokens
   Blueprint §9.1 — Full CSS Custom Property System
   ============================================================ */

/* ── Google Fonts Import ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&display=swap');

:root {

  /* ── Brand Identity (Blueprint §9.1) ────────────────────── */
  --color-brand:        #0D1B2A;
  --color-accent:       #0A7B6C;

  /* ── Background / Surface ───────────────────────────────── */
  --color-bg:           #FFFFFF;
  --color-surface:      #F8FAFC;
  --color-surface-2:    #F1F5F9;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:       #E2E8F0;
  --color-border-focus: #0A7B6C;

  /* ── Typography ─────────────────────────────────────────── */
  --color-text:         #0F172A;
  --color-text-muted:   #64748B;
  --color-text-inverse: #F8FAFC;
  --color-text-accent:  #0A7B6C;
  --color-text-link:    #0A7B6C;

  /* ── Status Colours ─────────────────────────────────────── */
  --color-danger:       #EF4444;
  --color-danger-bg:    #FEF2F2;
  --color-danger-text:  #B91C1C;
  --color-warning:      #F59E0B;
  --color-warning-bg:   #FFFBEB;
  --color-warning-text: #B45309;
  --color-success:      #10B981;
  --color-success-bg:   #F0FDF4;
  --color-success-text: #15803D;
  --color-info:         #3B82F6;
  --color-info-bg:      #EFF6FF;
  --color-info-text:    #1D4ED8;

  /* ── Sidebar ─────────────────────────────────────────────── */
  --color-sidebar-bg:          #0D1B2A;
  --color-sidebar-text:        #94A3B8;
  --color-sidebar-text-active: #F1F5F9;
  --color-sidebar-hover:       rgba(255,255,255,0.07);
  --color-sidebar-active:      rgba(10,123,108,0.25);
  --color-sidebar-border:      rgba(255,255,255,0.08);
  --color-sidebar-accent:      #14B8A6;

  /* ── Topbar ─────────────────────────────────────────────── */
  --color-topbar-bg:    #FFFFFF;
  --color-topbar-border:#E2E8F0;

  /* ── Overlays ───────────────────────────────────────────── */
  --color-overlay:       rgba(15, 23, 42, 0.55);
  --color-overlay-light: rgba(15, 23, 42, 0.25);

  /* ── Entity Type Colours ─────────────────────────────────── */
  --entity-person:      #3B82F6;
  --entity-task:        #10B981;
  --entity-project:     #6366F1;
  --entity-event:       #F59E0B;
  --entity-note:        #8B5CF6;
  --entity-document:    #64748B;
  --entity-tag:         #14B8A6;
  --entity-date:        #EC4899;
  --entity-budget:      #22C55E;
  --entity-recipe:      #F97316;
  --entity-contact:     #06B6D4;
  --entity-media:       #A855F7;
  --entity-post:        #EF4444;
  --entity-timetable:   #0EA5E9;
  --entity-meal:        #84CC16;
  --entity-shopping:    #F43F5E;
  --entity-idea:        #FBBF24;
  --entity-research:    #7C3AED;
  --entity-book:        #D97706;
  --entity-trip:        #0891B2;
  --entity-place:       #DC2626;
  --entity-weblink:     #2563EB;
  --entity-reminder:    #C026D3;

  /* ── Edge / Relation Colours (Blueprint §6.5) ────────────── */
  --edge-assigned-to:   #3B82F6;
  --edge-part-of:       #8B5CF6;
  --edge-blocked-by:    #EF4444;
  --edge-tagged-with:   #10B981;
  --edge-mentions:      #F59E0B;
  --edge-linked-to:     #94A3B8;
  --edge-parent-of:     #6366F1;
  --edge-related-to:    #14B8A6;
  --edge-attaches:      #F97316;
  --edge-reacts-to:     #EC4899;

  /* ── Typography ─────────────────────────────────────────── */
  --font-body:          "Geist", system-ui, -apple-system, sans-serif;
  --font-heading:       "Instrument Serif", Georgia, serif;
  --font-mono:          "Geist Mono", "Fira Code", monospace;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.3125rem;  /* 21px */
  --text-2xl:   1.625rem;   /* 26px */
  --text-3xl:   2rem;       /* 32px */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /* 2px  */
  --space-1:    0.25rem;   /* 4px  */
  --space-1-5:  0.375rem;  /* 6px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-2-5:  0.625rem;  /* 10px */
  --space-3:    0.75rem;   /* 12px */
  --space-3-5:  0.875rem;  /* 14px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* ── Border Radius (Blueprint §9.1) ─────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:          0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:          0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:          0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg:          0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
  --shadow-xl:          0 20px 25px rgba(15, 23, 42, 0.10), 0 10px 10px rgba(15, 23, 42, 0.04);
  --shadow-2xl:         0 25px 50px rgba(15, 23, 42, 0.20);
  --shadow-inner:       inset 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-focus:       0 0 0 3px rgba(10, 123, 108, 0.25);
  --shadow-focus-danger:0 0 0 3px rgba(239, 68, 68, 0.25);
  --shadow-panel:       -4px 0 24px rgba(15, 23, 42, 0.12);
  --shadow-sidebar:     2px 0 12px rgba(15, 23, 42, 0.15);

  /* ── Layout (Blueprint §9.1) ────────────────────────────── */
  --sidebar-width:      240px;
  --sidebar-collapsed:  0px;
  --topbar-height:      52px;
  --breadcrumb-height:  36px;
  --panel-width:        380px;
  --fab-size:           56px;
  --graph-filter-width: 220px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   80ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-xslow:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-topbar:   300;
  --z-sidebar:  400;
  --z-overlay:  500;
  --z-panel:    600;
  --z-modal:    700;
  --z-fab:      800;
  --z-toast:    900;
  --z-tooltip:  1000;

  /* ── Kanban Column Colors ───────────────────────────────── */
  --kanban-inbox:    #64748B;
  --kanban-progress: #3B82F6;
  --kanban-review:   #F59E0B;
  --kanban-done:     #10B981;

  /* ── Scrollbar ───────────────────────────────────────────── */
  --scrollbar-width: 6px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--color-border);
}