/* Kewat Industries brand theme: one file the whole app (and quotes/PDFs) can share.
   Link it before page styles: <link rel="stylesheet" href="/brand/brand.css">
   Colours are sampled from the official logo and kewatindustries.co.ke; fonts from the
   Sep 2026 price lists (Poppins) and boat brochure (Bebas Neue). See kb/brand.md. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Core brand */
  --kw-blue: #115ea6;        /* logo K, ring, "Kewat" wordmark */
  --kw-blue-deep: #0b4a85;   /* hover / pressed */
  --kw-blue-soft: #e7f0f9;   /* tinted backgrounds */
  --kw-green: #8bc53f;       /* "Industries", swoosh, accent bars */
  --kw-green-deep: #6fa52a;
  --kw-green-soft: #f0f8e6;
  --kw-grey: #b5b5b5;        /* logo ring third arc */

  /* Neutrals (price-list typography) */
  --kw-ink: #1f2328;         /* headings, product names */
  --kw-text: #374151;
  --kw-muted: #6b7280;       /* specs, small print */
  --kw-line: #e5e7eb;        /* card borders, rules */
  --kw-paper: #ffffff;
  --kw-canvas: #f7f9fb;

  /* Status (pipeline, alerts) */
  --kw-success: #4f9a1f;
  --kw-warning: #e8a317;
  --kw-danger: #d64545;

  /* Type */
  --kw-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --kw-font-display: 'Bebas Neue', 'Poppins', Impact, sans-serif; /* boat model names */
  --kw-tracking-eyebrow: 0.3em;  /* "S E C T I O N  0 1" style labels */

  /* Shape */
  --kw-radius: 6px;
  --kw-radius-lg: 12px;
  --kw-shadow: 0 1px 2px rgba(17, 94, 166, 0.06), 0 4px 16px rgba(17, 94, 166, 0.08);

  /* Assets */
  --kw-logo: url('/brand/kewat-logo.png');
  --kw-mark: url('/brand/kewat-mark-192.png');
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kw-blue: #5b9be0;
    --kw-blue-deep: #3d7fc6;
    --kw-blue-soft: #14263a;
    --kw-green: #9fd35a;
    --kw-green-deep: #8bc53f;
    --kw-green-soft: #1d2a12;
    --kw-ink: #f1f5f9;
    --kw-text: #d1d5db;
    --kw-muted: #9ca3af;
    --kw-line: #2b313a;
    --kw-paper: #161a20;
    --kw-canvas: #0f1216;
    --kw-logo: url('/brand/kewat-logo-dark.png');
  }
}
:root[data-theme="dark"] {
  --kw-blue: #5b9be0;
  --kw-blue-deep: #3d7fc6;
  --kw-blue-soft: #14263a;
  --kw-green: #9fd35a;
  --kw-green-deep: #8bc53f;
  --kw-green-soft: #1d2a12;
  --kw-ink: #f1f5f9;
  --kw-text: #d1d5db;
  --kw-muted: #9ca3af;
  --kw-line: #2b313a;
  --kw-paper: #161a20;
  --kw-canvas: #0f1216;
  --kw-logo: url('/brand/kewat-logo-dark.png');
}

/* Opt-in helpers (prefixed so they never clash with app styles) */
.kw-logo { display: inline-block; background: var(--kw-logo) left center / contain no-repeat; aspect-ratio: 1103 / 479; height: 40px; }
.kw-mark { display: inline-block; background: var(--kw-mark) center / contain no-repeat; width: 32px; height: 32px; }
.kw-eyebrow { font: 500 11px/1 var(--kw-font); letter-spacing: var(--kw-tracking-eyebrow); text-transform: uppercase; color: var(--kw-muted); }
.kw-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 3px; margin-right: 10px; vertical-align: middle; background: var(--kw-green); }
.kw-title { font: 700 clamp(22px, 3vw, 30px)/1.2 var(--kw-font); color: var(--kw-blue); margin: 0; }
.kw-display { font: 400 clamp(32px, 6vw, 56px)/1 var(--kw-font-display); color: var(--kw-green); letter-spacing: 0.01em; }
.kw-rule { height: 3px; border: 0; background: linear-gradient(90deg, var(--kw-green) 0 25%, var(--kw-blue) 25% 100%); }
.kw-price { font: 700 22px/1 var(--kw-font); color: var(--kw-blue); }
.kw-price::before { content: 'KES '; font-size: 10px; font-weight: 500; color: var(--kw-muted); vertical-align: middle; }
.kw-card { background: var(--kw-paper); border: 1px solid var(--kw-line); border-radius: var(--kw-radius); }
.kw-btn { font: 600 14px/1 var(--kw-font); padding: 10px 16px; border-radius: var(--kw-radius); border: 0; background: var(--kw-blue); color: #fff; cursor: pointer; }
.kw-btn:hover { background: var(--kw-blue-deep); }
.kw-btn.kw-accent { background: var(--kw-green); color: #12230a; }