/*
 * CyberPlan Design Tokens
 * Source: audited from cyberplan-store.html / cyberplan-product-flagship.html (Phase 1)
 * These mirror the values that should also be entered as Elementor Global Colors / Global Fonts.
 * Do not hardcode these hex values elsewhere — reference the variables so a future
 * rebrand only requires editing this file + the Elementor Global Kit.
 */

:root {
  /* Brand colors */
  --cp-navy: #0A2540;
  --cp-charcoal: #101C2B;
  --cp-deep-green: #04211D;
  --cp-blue: #2F5FDB;
  --cp-blue-bright: #4671E8;
  --cp-teal: #12B8A6;
  --cp-teal-text: #0D8275; /* WCAG AA-compliant variant of teal for text on white — see Phase 7 audit. Use --cp-teal for decorative/graphic elements, --cp-teal-text for any actual copy (eyebrow labels, links, small print). */

  /* Text */
  --cp-text: var(--cp-charcoal);
  --cp-text-muted: #5B6B7C;
  --cp-text-faint: #7A8896;
  --cp-text-faintest: #8A97A6;

  /* Surfaces */
  --cp-bg: #FFFFFF;
  --cp-bg-alt: #F5F7FA;
  --cp-border: #E1E6EC;
  --cp-border-strong: #C4D0DE;
  --cp-border-soft: #B8C4D2;

  /* Typography */
  --cp-font-primary: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --cp-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing scale */
  --cp-space-xs: 4px;
  --cp-space-sm: 8px;
  --cp-space-md: 16px;
  --cp-space-lg: 24px;
  --cp-space-xl: 40px;
  --cp-space-2xl: 64px;

  /* Radius */
  --cp-radius-sm: 6px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 20px;
}

html[dir="rtl"] body {
  font-family: var(--cp-font-primary);
  color: var(--cp-text);
  background: var(--cp-bg);
}

/* Elements that use the monospace/technical font per the original design
   (pricing figures, license codes, file specs) */
.cp-mono,
.price,
.woocommerce-Price-amount,
.cp-license-code,
.cp-file-spec {
  font-family: var(--cp-font-mono);
}

/* Headings inherit brand navy unless overridden inside a dark section */
h1, h2, h3, h4,
.entry-title,
.woocommerce-products-header__title,
.product_title {
  color: var(--cp-navy);
  font-family: var(--cp-font-primary);
}

a {
  color: var(--cp-blue);
}

.cp-section-alt {
  background: var(--cp-bg-alt);
}

.cp-border {
  border-color: var(--cp-border);
}

/* ---------------------------------------------------------------
   WooCommerce forms (Login / Register / Lost Password / Checkout)
   These use WooCommerce's native My Account endpoints — no custom
   pages needed, just styling to match the brand (Phase 6).
   --------------------------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-account .woocommerce form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cp-text);
  margin-bottom: var(--cp-space-sm);
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce form input.input-text {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 3px;
  font-family: var(--cp-font-primary);
  font-size: 14px;
  background: var(--cp-bg-alt);
}

.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2 {
  border: 1px solid var(--cp-border);
  padding: var(--cp-space-lg);
  border-radius: var(--cp-radius-sm);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #customer_login button.button {
  background: var(--cp-navy);
  color: #fff;
  border: none;
  padding: 13px 22px;
  font-family: var(--cp-font-primary);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: var(--cp-radius-sm);
  cursor: pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--cp-blue);
  color: #fff;
}

/* Search results (search.php) */
.cp-search-results { max-width: 780px; margin: 0 auto; padding: 64px 32px; }
.cp-search-results .cp-result { border-top: 1px solid var(--cp-border); padding: 24px 0; }
.cp-search-results .cp-result:first-child { border-top: none; }
.cp-search-results .cp-result h2 { font-size: 19px; margin-bottom: 8px; }
.cp-search-results .cp-result h2 a { text-decoration: none; color: var(--cp-navy); }
.cp-search-empty { color: var(--cp-text-muted); padding: 40px 0; text-align: center; }