/* Chang Pround Engineering brand tokens — taken from the company uniform and logo:
   navy shirt (--cp-ink), royal-blue logo loop / side panels (--cp-action), silver
   reflective stripe (--cp-silver). Shared by index.html, app.html, shop.html, tech.html.
   Tokens and small primitives only: every page keeps its own layout CSS.
   Contrast pairs used for text, checked against WCAG AA (normal text >= 4.5:1):
     #FFFFFF on --cp-action        #1E6BD8  5.1:1   (buttons)
     #FFFFFF on --cp-action-hover  #1858B3  6.8:1   (badge text on --cp-sky-soft: 5.8:1)
     #FFFFFF on --cp-ink           #0C1E4A  16.2:1
     --cp-sky on --cp-ink          #7FB2FF  7.5:1   (accent text only on dark)
     --cp-action on --cp-bg        #F5F8FD  4.75:1  (links)
     --cp-text-2 on --cp-bg        #475569  7.1:1                                    */

@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=Prompt:wght@600;700&family=Montserrat:wght@600;700&display=swap');

:root {
  /* brand */
  --cp-ink: #0C1E4A;          /* uniform navy: header, footer, hero panels */
  --cp-ink-2: #16306B;        /* raised surfaces on navy */
  --cp-action: #1E6BD8;       /* logo royal blue: primary buttons, links, selected states */
  --cp-action-hover: #1858B3;
  --cp-sky: #7FB2FF;          /* accent on navy, highlights (never white text on it) */
  --cp-sky-soft: #E3EDFF;     /* tinted chips / selected rows */
  --cp-silver: #C9CED6;       /* reflective-stripe accent line */

  /* surfaces + text */
  --cp-bg: #F5F8FD;
  --cp-surface: #FFFFFF;
  --cp-line: #E2E8F0;
  --cp-input-line: #64748B;
  --cp-text: #0C1E4A;
  --cp-text-2: #475569;
  --cp-text-on-ink: #F8FAFC;
  --cp-text-on-ink-2: #CBD5E1;

  /* status (text colour on its soft background) */
  --cp-success: #166534; --cp-success-bg: #F0FDF4;
  --cp-warn: #92400E;    --cp-warn-bg: #FFFBEB;
  --cp-danger: #B91C1C;  --cp-danger-bg: #FEF2F2;

  /* charts: series order is fixed so a metric keeps its colour across views */
  --cp-chart-1: #1E6BD8;
  --cp-chart-2: #0C1E4A;
  --cp-chart-3: #7FB2FF;
  --cp-chart-4: #047857;
  --cp-chart-5: #B45309;
  --cp-chart-6: #7C3AED;

  /* type */
  --cp-font: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cp-font-head: 'Prompt', 'Anuphan', system-ui, sans-serif;

  /* shape */
  --cp-radius-sm: 10px;       /* inputs, buttons */
  --cp-radius: 16px;          /* cards */
  --cp-radius-pill: 999px;
  --cp-shadow: 0 4px 16px rgba(12, 30, 74, .07);
  --cp-shadow-lg: 0 12px 32px rgba(12, 30, 74, .14);

  /* spacing scale */
  --cp-s1: 4px; --cp-s2: 8px; --cp-s3: 12px; --cp-s4: 16px;
  --cp-s5: 24px; --cp-s6: 32px; --cp-s7: 48px; --cp-s8: 64px;
  --cp-max: 1200px;
  --cp-gutter: 16px;          /* phone side gutter; pages raise it on wider screens */
}

/* ---- primitives (opt-in by class, no bare-element rules) ---- */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--cp-radius-sm);
  font: 600 16px/1.2 var(--cp-font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.cp-btn:focus-visible { outline: 3px solid var(--cp-sky); outline-offset: 2px; }
.cp-btn[disabled], .cp-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.cp-btn-primary { background: var(--cp-action); color: #fff; }
.cp-btn-primary:hover { background: var(--cp-action-hover); }
.cp-btn-dark { background: var(--cp-ink); color: #fff; }
.cp-btn-dark:hover { background: var(--cp-ink-2); }
.cp-btn-outline { background: var(--cp-surface); color: var(--cp-text); border-color: var(--cp-line); }
.cp-btn-outline:hover { border-color: var(--cp-action); color: var(--cp-action); }
.cp-btn-sky { background: var(--cp-sky); color: var(--cp-ink); }

.cp-card {
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius); box-shadow: var(--cp-shadow);
}
.cp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: var(--cp-radius-pill); font: 600 13px/1.4 var(--cp-font);
  background: var(--cp-sky-soft); color: var(--cp-action-hover); /* --cp-action here is 4.3:1, below AA */
}
.cp-badge-success { background: var(--cp-success-bg); color: var(--cp-success); }
.cp-badge-warn { background: var(--cp-warn-bg); color: var(--cp-warn); }
.cp-badge-danger { background: var(--cp-danger-bg); color: var(--cp-danger); }
.cp-badge-ink { background: var(--cp-ink); color: var(--cp-sky); }

/* Company logo "Chang Pround ENGINEERING": two-tone infinity mark + Montserrat wordmark.
   Markup (wordmark is text so its colour follows the background):
   <span class="cp-logo"><img class="cp-mark" src="/img/brand/mark-on-dark.png" alt="">
     <span class="cp-brand-txt"><span class="cp-brand-name">Chang Pround</span><span class="cp-brand-sub">ENGINEERING</span></span></span>
   Mark images (owner's artwork): mark.png = navy + blue loops, for light backgrounds;
   mark-on-dark.png = white + blue loops, as embroidered on the navy shirt, for the navy bars.
   Text: light background = navy #0B2A66 + royal blue; dark (.cp-on-ink / .cp-logo-light) = white + light blue. */
.cp-logo { display: inline-flex; align-items: center; gap: 10px; color: #0B2A66; text-decoration: none; line-height: 1; }
.cp-mark { height: 30px; width: auto; flex: none; display: block; }
.cp-brand-txt { display: flex; flex-direction: column; align-items: flex-start; }
.cp-brand-name { font: 700 21px/1 'Montserrat', var(--cp-font); letter-spacing: -.2px; color: inherit; white-space: nowrap; }
.cp-brand-sub { font: 600 9px/1 'Montserrat', var(--cp-font); letter-spacing: .42em; color: #1E6BD8; margin-top: 4px; white-space: nowrap; }
.cp-on-ink .cp-logo, .cp-logo.cp-logo-light { color: #fff; }
.cp-on-ink .cp-brand-sub, .cp-logo.cp-logo-light .cp-brand-sub { color: #7DB3FF; }
/* Phones: a smaller lockup leaves room for the header buttons (login wrapped to 2 lines at 375px). */
@media (max-width: 480px) {
  .cp-logo { gap: 8px; }
  .cp-brand-name { font-size: 17px; }
  .cp-mark { height: 24px; }
  .cp-brand-sub { font-size: 7.5px; letter-spacing: .36em; margin-top: 3px; }
}

/* Reflective-stripe accent (the silver band on the uniform): headers get .cp-stripe-bottom,
   the footer .cp-stripe-top. */
.cp-stripe-bottom { border-bottom: 3px solid var(--cp-silver) !important; }
.cp-stripe-top { border-top: 3px solid var(--cp-silver); }

/* Company slogan (from the uniform sheet). */
.cp-slogan { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-weight: 600; letter-spacing: .02em; }
.cp-slogan i { font-style: normal; color: var(--cp-silver); }

/* image that failed to load: pages add onerror="this.classList.add('cp-img-missing')" */
.cp-img-missing { visibility: hidden; }

/* Member profile covers (app header and the public /p/ page). The member picks one by key;
   nothing is uploaded. Keep the keys in step with COVERS in backend/src/routes/networkRoutes.js. */
.cp-cover { position: relative; background: var(--cp-ink); }
.cp-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--cp-action); }
.cp-cover-navy { background: var(--cp-ink); }
.cp-cover-sky { background: linear-gradient(135deg, var(--cp-action) 0%, var(--cp-sky) 100%); }
.cp-cover-dawn { background: linear-gradient(120deg, var(--cp-ink) 0%, var(--cp-action) 60%, #F2A623 135%); }
.cp-cover-grid { background-color: var(--cp-ink-2);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px); }
.cp-cover-waves { background-color: var(--cp-ink);
  background-image: radial-gradient(circle at 20% 120%, rgba(127,178,255,.35) 0 28%, transparent 29%),
                    radial-gradient(circle at 75% 140%, rgba(30,107,216,.45) 0 35%, transparent 36%); }
.cp-cover-mint { background: linear-gradient(135deg, #0F6E56 0%, #5DCAA5 100%); }
.cp-cover-mint::after { background: #0F6E56; }