/* ============================================================
   Bright Connect — Colors & Type Tokens
   Western Australia's largest independent embedded network operator
   ============================================================ */

/* ---------- Fonts ---------- */

:root {
  /* ---------- Core brand colors (from style guide) ---------- */
  --bc-blue:          #2E599D;   /* Primary Blue */
  --bc-teal:          #478EA4;   /* Primary Teal */
  --bc-deep-blue:     #313d98;   /* Extended: deepest blue */
  --bc-bright-teal:   #24a7b1;   /* Extended: saturated teal */
  --bc-light-teal:    #6ecbd2;   /* Extended: highlight teal */
  --bc-cyan:          #00a7d9;   /* Extended: cyan blue */
  --bc-navy:          #1a2332;   /* Dark surface */
  --bc-black:         #000000;
  --bc-white:         #ffffff;

  /* ---------- Neutrals ---------- */
  --bc-fg-1:          #000000;   /* Headings on light */
  --bc-fg-2:          #333333;   /* Body text */
  --bc-fg-3:          #666666;   /* Secondary body */
  --bc-fg-4:          #8c97a6;   /* Muted / captions */
  --bc-fg-inverse:    #ffffff;

  --bc-bg-1:          #ffffff;   /* Page */
  --bc-bg-2:          #fafbfc;   /* Subtle fill */
  --bc-bg-3:          #f1f4f8;   /* Raised fill */
  --bc-bg-dark:       #1a2332;   /* Dark mode / proposal confidentiality page */
  --bc-bg-dark-2:     #223047;

  --bc-border-1:      #e4e8ee;   /* Default hairline */
  --bc-border-2:      #cfd6e0;   /* Input border */
  --bc-border-dark:   rgba(255,255,255,0.10);

  /* ---------- Semantic (UI functional states only — not marketing) ---------- */
  --bc-success:       #22c55e;
  --bc-warn:          #f59e0b;
  --bc-danger:        #ef4444;
  --bc-info:          var(--bc-teal);

  /* ---------- Gradients ---------- */
  --bc-grad-primary:  linear-gradient(116deg, #1bb0a4 1%, #2971a8 50%, #143b9c 100%); /* brand blend (MRS bc-www.scss / invoice v2) */
  --bc-grad-sweep:    linear-gradient(180deg, #313d98 0%, #00a7d9 38%, #24a7b1 70%, #6ecbd2 100%); /* @kind color */
  --bc-grad-wave:     linear-gradient(138deg, #143b9c 1%, #2971a8 40%, #1bb0a4 85%); /* brand blend, blue-to-teal */
  --bc-grad-soft:     linear-gradient(135deg, rgba(20,59,156,0.06) 0%, rgba(27,176,164,0.06) 100%);

  /* ---------- Type families ----------
     Primary is Varela Round (per brand team). Grold Rounded is retained as a
     licensed fallback for premium collateral and PDF/print work where it's
     explicitly specified. Web/UI: Varela first. */
  --bc-font-display:  'Varela Round', 'Grold Rounded', Arial, sans-serif;
  --bc-font-body:     'Varela Round', 'Grold Rounded', Arial, sans-serif;
  --bc-font-email:    Arial, Helvetica, sans-serif;
  --bc-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type weights (named) ---------- */
  --bc-w-extralight:  200; /* @kind font */
  --bc-w-light:       300; /* @kind font */
  --bc-w-semilight:   350; /* @kind font */
  --bc-w-regular:     400; /* @kind font */
  --bc-w-medium:      500; /* @kind font */
  --bc-w-bold:        700; /* @kind font */
  --bc-w-black:       900; /* @kind font */

  /* ---------- Type scale (web / px) ---------- */
  --bc-fs-xs:         12px;   /* micro-labels — avoid for body; min is 15px */
  --bc-fs-sm:         14px;
  --bc-fs-base:       16px;
  --bc-fs-md:         18px;
  --bc-fs-lg:         20px;
  --bc-fs-xl:         24px;
  --bc-fs-2xl:        32px;
  --bc-fs-3xl:        40px;
  --bc-fs-4xl:        56px;
  --bc-fs-5xl:        72px;

  /* Line heights */
  --bc-lh-tight:      1.1;  /* @kind font */
  --bc-lh-snug:       1.25; /* @kind font */
  --bc-lh-normal:     1.5;  /* @kind font */
  --bc-lh-relaxed:    1.7;  /* @kind font */

  /* Letter-spacing */
  --bc-ls-tight:      -0.01em; /* @kind font */
  --bc-ls-normal:     0;       /* @kind font */
  --bc-ls-wide:       0.04em;  /* @kind font */
  --bc-ls-widest:     0.18em;  /* @kind font */

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

  /* ---------- Radii ---------- */
  --bc-radius-xs: 4px;
  --bc-radius-sm: 6px;
  --bc-radius-md: 10px;   /* default buttons/inputs — matches shadcn --radius: 0.75rem adjusted */
  --bc-radius-lg: 12px;   /* cards */
  --bc-radius-xl: 16px;
  --bc-radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --bc-shadow-xs: 0 1px 2px rgba(15, 30, 60, 0.04);
  --bc-shadow-sm: 0 1px 3px rgba(15, 30, 60, 0.06), 0 1px 2px rgba(15, 30, 60, 0.04);
  --bc-shadow-md: 0 4px 12px rgba(15, 30, 60, 0.08), 0 2px 4px rgba(15, 30, 60, 0.04);
  --bc-shadow-lg: 0 12px 32px rgba(15, 30, 60, 0.12), 0 4px 8px rgba(15, 30, 60, 0.05);
  --bc-shadow-xl: 0 24px 56px rgba(15, 30, 60, 0.18);
  --bc-shadow-teal-glow: 0 0 0 3px rgba(71, 142, 164, 0.18);

  /* ---------- Motion ---------- */
  --bc-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --bc-ease-out:      cubic-bezier(0, 0, 0.2, 1);     /* @kind other */
  --bc-dur-fast:      120ms; /* @kind other */
  --bc-dur-base:      200ms; /* @kind other */
  --bc-dur-slow:      320ms; /* @kind other */
}

/* ============================================================
   Semantic / element-level defaults
   ============================================================ */

.bc-body {
  font-family: var(--bc-font-body);
  font-weight: var(--bc-w-regular);
  font-size: var(--bc-fs-base);
  line-height: var(--bc-lh-normal);
  color: var(--bc-fg-2);
  background: var(--bc-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bc-h1 {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-w-bold);
  font-size: var(--bc-fs-4xl);
  line-height: var(--bc-lh-tight);
  letter-spacing: var(--bc-ls-tight);
  color: var(--bc-fg-1);
}
.bc-h2 {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-w-bold);
  font-size: var(--bc-fs-3xl);
  line-height: var(--bc-lh-tight);
  color: var(--bc-fg-1);
}
.bc-h3 {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-w-medium);
  font-size: var(--bc-fs-2xl);
  line-height: var(--bc-lh-snug);
  color: var(--bc-fg-1);
}
.bc-h4 {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-w-medium);
  font-size: var(--bc-fs-xl);
  line-height: var(--bc-lh-snug);
  color: var(--bc-fg-1);
}
.bc-eyebrow {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-w-medium);
  font-size: var(--bc-fs-sm);
  letter-spacing: var(--bc-ls-widest);
  text-transform: uppercase;
  color: var(--bc-blue);
}
.bc-p {
  font-family: var(--bc-font-body);
  font-weight: var(--bc-w-regular);
  font-size: var(--bc-fs-base);
  line-height: var(--bc-lh-relaxed);
  color: var(--bc-fg-2);
}
.bc-small { font-size: var(--bc-fs-sm); color: var(--bc-fg-3); }
.bc-mono  { font-family: var(--bc-font-mono); font-size: var(--bc-fs-sm); }

/* Gradient text (use sparingly — accent headings) */
.bc-text-gradient {
  background: var(--bc-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Utility backgrounds */
.bc-bg-gradient    { background: var(--bc-grad-primary); }
.bc-bg-gradient-sweep { background: var(--bc-grad-sweep); }
.bc-bg-navy        { background: var(--bc-bg-dark); color: var(--bc-fg-inverse); }