/* UdstillerGuide Design System — Colors + Type Tokens
   Extracted from udstillerguide-v3/web/static/css/theme.css
   Built on Web Awesome 3.5.0 + Font Awesome Sharp Duotone + Figtree */

/* ------------------------------------------------------------------ */
/* Fonts                                                              */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* =================================================================
     BRAND COLORS  (from design-system.md + theme.css)
     ================================================================= */
  --brand-primary-base:  #314F59; /* Teal — primary actions, navigation */
  --brand-primary-hover: #428B98;
  --brand-primary-active:#2D444C;
  --brand-highlight:     #7FBEC6; /* light teal — used in dark mode */
  --brand-accent:        #E07A5F; /* Coral — ONE CTA per page */
  --brand-accent-hover:  #c96a50;
  --brand-warning:       #D4A017; /* Golden */
  --brand-success:       #00883C;
  --brand-danger:        #DC2626;
  --brand-info:          #2563EB;

  /* =================================================================
     SEMANTIC SURFACE TOKENS (light mode)
     ================================================================= */
  --bg:               #f8f9fa;
  --surface:          #ffffff;
  --surface-hover:    #f1f5f9;
  --border:           #e2e8f0;
  --text:             #1d2327;
  --text-muted:       #64748b;

  /* Foreground shortcuts */
  --fg1: var(--text);
  --fg2: var(--text-muted);
  --fg-on-primary: #ffffff;

  /* Sidebar */
  --sidebar-bg:           #ffffff;
  --sidebar-active-bg:    #e6f0f3;
  --sidebar-active-text:  #314F59;
  --sidebar-hover-bg:     #f1f5f9;

  /* Topbar (always dark teal in light mode) */
  --topbar-bg:   #314F59;
  --topbar-text: #ffffff;

  /* Duotone icon layers (used by wa-icon[family="sharp-duotone"]) */
  --duotone-primary:   var(--brand-primary-base);
  --duotone-secondary: var(--brand-accent);

  /* =================================================================
     TYPOGRAPHY
     ================================================================= */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* Scale — matches in-product usage */
  --fs-xs:    0.72rem;  /* ~11.5px — meta, msg-id */
  --fs-sm:    0.78rem;  /* ~12.5px — team-mini-meta */
  --fs-base:  0.875rem; /* 14px — tables, activity */
  --fs-md:    0.9rem;   /* menu links */
  --fs-lg:    1rem;     /* body */
  --fs-xl:    1.1rem;   /* topbar brand, stat icon */
  --fs-2xl:   1.3rem;   /* auth h1 */
  --fs-3xl:   1.5rem;   /* page h1, stat-value */

  --fw-light:    300;   /* "Udstiller" in logo */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;   /* "Guide" in logo, page headings */

  --lh-tight: 1.2;
  --lh-body:  1.5;

  /* Letter-spacing for section labels */
  --ls-section: 0.08em;

  /* =================================================================
     SPACING (mirrors Web Awesome wa-space-*)
     ================================================================= */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-s:   0.75rem;
  --sp-m:   1rem;
  --sp-l:   1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;

  /* =================================================================
     RADII
     ================================================================= */
  --radius-xs:   4px;   /* small chips, badge-role */
  --radius-s:    8px;   /* icon tiles, readonly-note */
  --radius-m:    10px;  /* .card */
  --radius-l:    16px;  /* larger surfaces */
  --radius-pill: 99px;  /* instance-badge, nav-badge */
  --radius-full: 50%;   /* activity-icon circle */

  /* =================================================================
     ELEVATION / SHADOWS
     ================================================================= */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-sidebar: 2px 0 8px rgba(0,0,0,0.2); /* mobile drawer */

  /* =================================================================
     MOTION
     ================================================================= */
  --motion-fast:   0.1s;   /* hovers on rows */
  --motion-base:   0.15s;  /* menu-link */
  --easing:        ease;

  /* =================================================================
     BREAKPOINTS (informational — CSS uses raw px in @media queries)
     ================================================================= */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* ================================================================== */
/* DARK THEME                                                         */
/* ================================================================== */
.wa-dark {
  --bg:            #182028;
  --surface:       #243440;
  --surface-hover: #2a3e4c;
  --border:        #354A56;
  --text:          #d0dce4;
  --text-muted:    #a8b5c4;

  --sidebar-bg:           #1a2430;
  --sidebar-active-bg:    #1A2E38;
  --sidebar-active-text:  #7FBEC6;
  --sidebar-hover-bg:     #16202a;

  --topbar-bg:   #1a2430;
  --topbar-text: #d0dce4;

  --duotone-primary:   var(--brand-highlight);
  --duotone-secondary: var(--brand-accent);
}

/* ================================================================== */
/* BASE                                                               */
/* ================================================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
}

/* ================================================================== */
/* SEMANTIC TYPOGRAPHY                                                */
/* ================================================================== */

h1, .h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
}
h2, .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

p, .p {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text);
}

small, .small { font-size: var(--fs-base); color: var(--text-muted); }

/* Uppercase section label pattern used for sidebar, table headers */
.label-section {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-section);
  color: var(--text-muted);
}

/* Stat value pattern */
.stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Code / message IDs */
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ================================================================== */
/* LOGO — "Udstiller" light 300 + "Guide" bold 700 coral              */
/* ================================================================== */
.brand-logo { font-size: var(--fs-xl); color: inherit; text-decoration: none; }
.brand-logo .brand-light { font-weight: var(--fw-light); }
.brand-logo .brand-bold  { font-weight: var(--fw-bold); color: var(--brand-accent); }