/*
Theme Name: CertaPro
Theme URI: https://certapro.com
Author: CertaPro Painters
Author URI: https://certapro.com
Description: Custom theme for the CertaPro Painters marketing network (WordPress Multisite, sub-directory).
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
License: Proprietary
License URI: https://certapro.com
Update URI: false
Text Domain: certapro
Tags: custom-menu, featured-images
*/

/* The design token scale, in :root. See README.md "Design tokens". No build step. */

:root {

  /* Brand ------------------------------------------------------------------ */
  --cp-color-brand-gold: #fdb913;
  --cp-color-brand-red: #d2242a;
  --cp-color-brand-blue: #0057d8;

  /* Text ------------------------------------------------------------------- */
  --cp-color-text-primary: #1f1c18;
  --cp-color-text-secondary: #6b6b6b;
  --cp-color-text-tertiary: #6f6c69;
  --cp-color-text-muted: #9a9691;
  --cp-color-text-inverse: #ffffff;
  --cp-color-text-on-dark: #fffbf0;
  --cp-color-text-accent: #fdb913;
  --cp-color-text-destructive: #a81b21;
  --cp-color-text-link: #0057d8;
  --cp-color-text-disabled: #9a9691;

  /* Background ------------------------------------------------------------- */
  --cp-color-bg-page: #ffffff;
  --cp-color-bg-subtle: #f7f7f7;
  --cp-color-bg-cream: #fffbf0;
  --cp-color-bg-inverse: #1f1c18;
  --cp-color-bg-inverse-hover: #453e34;

  /* Surface ---------------------------------------------------------------- */
  --cp-color-surface-default: #ffffff;
  --cp-color-surface-raised: #ffffff;
  --cp-color-surface-overlay: #f7f7f7;
  --cp-color-surface-impressed: #f0f0f0;
  --cp-color-surface-dark: #1f1c18;
  --cp-color-surface-dark-secondary: #453e34;
  --cp-color-surface-dark-impressed: #373129;
  --cp-color-surface-ghost: rgb(0 0 0 / 8%);
  --cp-color-surface-ghost-press: rgb(0 0 0 / 12%);
  --cp-color-surface-disabled: #e8e6e3;

  /* Border ----------------------------------------------------------------- */
  --cp-color-border-default: #e8e6e3;
  --cp-color-border-strong: #dadada;
  --cp-color-border-outline: #1f1c18;
  --cp-color-border-inverse: rgb(255 255 255 / 10%);
  --cp-color-border-field: #8f8f8f;
  --cp-color-focus-ring: #1f1c18;

  /* Interactive ------------------------------------------------------------ */
  --cp-color-interactive-primary: #fdb913;
  --cp-color-interactive-primary-text: #1f1c18;
  --cp-color-interactive-primary-active: #e2a000;
  --cp-color-interactive-secondary: #ffffff;
  --cp-color-interactive-secondary-text: #1f1c18;
  --cp-color-interactive-ghost: #f7f7f7;
  --cp-color-interactive-ghost-text: #9a9691;
  --cp-color-interactive-destructive: #d2242a;
  --cp-color-interactive-destructive-text: #ffffff;
  --cp-color-interactive-destructive-surface: #f9e1e0;
  --cp-color-interactive-destructive-surface-hover: #f2c8c7;
  --cp-color-interactive-destructive-border: rgb(0 0 0 / 0%);

  /* Status ----------------------------------------------------------------- */
  --cp-color-status-error: #d2242a;
  --cp-color-status-success: #0f7038;
  --cp-color-status-warning: #fdb913;
  --cp-color-status-info: #0057d8;

  /* Spacing ---------------------------------------------------------------- */
  --cp-space-0-5: 2px;
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 20px;
  --cp-space-6: 24px;
  --cp-space-7: 32px;
  --cp-space-8: 40px;
  --cp-space-10: 48px;
  --cp-space-12: 56px;
  --cp-space-14: 64px;
  --cp-space-16: 80px;
  --cp-space-20: 96px;

  /* Radius ----------------------------------------------------------------- */
  --cp-radius-none: 0;
  --cp-radius-xs: 4px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 10px;
  --cp-radius-lg: 16px;
  --cp-radius-xl: 20px;
  --cp-radius-2xl: 24px;
  --cp-radius-full: 999px;

  /* Font family ------------------------------------------------------------ */
  --cp-font-body: Gilroy, Roboto, sans-serif;
  --cp-font-heading: var(--cp-font-body);
  --cp-font-display: 'Plus Jakarta Sans', var(--cp-font-body);

  --cp-weight-regular: 400;
  --cp-weight-medium: 500;
  --cp-weight-semibold: 600;
  --cp-weight-bold: 700;
  --cp-weight-extrabold: 800;

  /* Type sizes, Desktop ---------------------------------------------------- */
  --cp-text-display-xl: 80px;
  --cp-text-display: 64px;
  --cp-text-h1: 48px;
  --cp-text-h2: 44px;
  --cp-text-h3: 36px;
  --cp-text-h4: 24px;
  --cp-text-h5: 20px;
  --cp-text-eyebrow: 24px;
  --cp-text-body-title: 18px;
  --cp-text-body-large: 18px;
  --cp-text-body: 16px;
  --cp-text-body-tight: 16px;
  --cp-text-caption: 14px;
  --cp-text-label: 14px;
  --cp-text-navigation: 14px;
  --cp-text-button: 16px;
  --cp-text-button-large: 18px;
  --cp-text-whisper: 12px;
  --cp-text-nav-link: 12px;

  /* Line heights ----------------------------------------------------------- */
  --cp-leading-display-xl: 1;
  --cp-leading-display: 0.95;
  --cp-leading-h1: 1.25;
  --cp-leading-h2: 1.2;
  --cp-leading-h3: 1.2;
  --cp-leading-h4: 1.33;
  --cp-leading-h5: 1.4;
  --cp-leading-eyebrow: 1;
  --cp-leading-body-title: 1.56;
  --cp-leading-body-large: 1.56;
  --cp-leading-body: 1.5;
  --cp-leading-body-tight: 1.31;
  --cp-leading-caption: 1.5;
  --cp-leading-label: 1.43;
  --cp-leading-navigation: 1.71;
  --cp-leading-button: 1.5;
  --cp-leading-button-large: 1.33;
  --cp-leading-whisper: 1.5;
  --cp-leading-nav-link: 1.33;

  /* Letter spacing --------------------------------------------------------- */
  --cp-tracking-display-xl: -0.0125em;
  --cp-tracking-display: -0.01em;
  --cp-tracking-h1: -0.01em;
  --cp-tracking-h2: -0.01em;
  --cp-tracking-h3: -0.02em;
  --cp-tracking-label: 0.01em;
  --cp-tracking-whisper: 0.02em;

  /* Layout ----------------------------------------------------------------- */
  --cp-container-max: 1264px;
  --cp-container-pad: 32px;
  --cp-gutter: 20px;

  /* Header ----------------------------------------------------------------- */
  --cp-header-height: 48px;
  --cp-header-offset: var(--cp-space-7);
  --cp-header-clearance: calc(var(--cp-header-offset) * 2 + var(--cp-header-height));

  /* Max line length -------------------------------------------------------- */
  --cp-measure: 68ch;

  /* Motion ----------------------------------------------------------------- */
  --cp-transition: 150ms ease;

  /* Stacking --------------------------------------------------------------- */
  --cp-z-dropdown: 100;
  --cp-z-sticky: 200;
  --cp-z-overlay: 300;
}

/* Commercial skin ---------------------------------------------------------- */

[data-cp-theme="commercial"] {
  --cp-color-text-primary: #fffbf0;
  --cp-color-text-secondary: #b5a897;
  --cp-color-text-tertiary: #acacac;
  --cp-color-text-muted: #776f66;
  --cp-color-text-inverse: #1f1c18;
  --cp-color-text-destructive: #ff9ba0;
  --cp-color-text-link: #7fb2ff;
  --cp-color-text-disabled: #776f66;

  --cp-color-bg-page: #1f1c18;
  --cp-color-bg-subtle: #272624;
  --cp-color-bg-cream: #1f1c18;
  --cp-color-bg-inverse: #ffffff;
  --cp-color-bg-inverse-hover: #e8e6e3;

  --cp-color-surface-default: #1f1c18;
  --cp-color-surface-raised: #3d372f;
  --cp-color-surface-overlay: #272624;
  --cp-color-surface-impressed: #3d3832;
  --cp-color-surface-dark-secondary: #3d372f;
  --cp-color-surface-ghost: rgb(255 255 255 / 10%);
  --cp-color-surface-ghost-press: rgb(255 255 255 / 16%);

  --cp-color-border-default: rgb(255 255 255 / 10%);
  --cp-color-border-strong: rgb(255 255 255 / 20%);
  --cp-color-border-outline: rgb(255 255 255 / 40%);
  --cp-color-border-inverse: #e8e6e3;
  --cp-color-border-field: rgb(255 255 255 / 40%);
  --cp-color-focus-ring: #fffbf0;

  --cp-color-interactive-secondary: #3d372f;
  --cp-color-interactive-secondary-text: #fffbf0;
  --cp-color-interactive-ghost: #3d372f;
  --cp-color-interactive-ghost-text: #b5a897;
  --cp-color-interactive-destructive-surface: #4c211f;
  --cp-color-interactive-destructive-surface-hover: #6b2e2c;

  --cp-color-interactive-destructive-border: #d2242a;
}

/* Responsive tokens -------------------------------------------------------- */

@media (max-width: 1199.98px) {
  :root {
    --cp-text-display-xl: 72px;
    --cp-tracking-display-xl: -0.014em;
    --cp-text-display: 56px;
    --cp-text-h1: 44px;
    --cp-text-h2: 40px;
    --cp-text-h3: 32px;
    --cp-text-eyebrow: 20px;

    --cp-leading-display: 0.96;
    --cp-leading-h1: 1.2;
  }
}

@media (max-width: 767.98px) {
  :root {
    --cp-text-display-xl: 48px;
    --cp-tracking-display-xl: -0.0104em;
    --cp-tracking-h3: -0.01em;
    --cp-text-display: 36px;
    --cp-text-h1: 32px;
    --cp-text-h2: 28px;
    --cp-text-h3: 24px;
    --cp-text-h4: 20px;
    --cp-text-h5: 18px;
    --cp-text-eyebrow: 16px;
    --cp-text-body-title: 16px;
    --cp-text-body-large: 16px;
    --cp-text-caption: 13px;
    --cp-text-label: 13px;
    --cp-text-button-large: 16px;

    --cp-text-navigation: 16px;

    --cp-header-offset: var(--cp-space-4);

    --cp-leading-display-xl: 1.08;
    --cp-leading-display: 1.11;
    --cp-leading-h1: 1.19;
    --cp-leading-h3: 1.25;
    --cp-leading-h4: 1.4;
    --cp-leading-h5: 1.33;
    --cp-leading-body-title: 1.5;
    --cp-leading-body-large: 1.5;
    --cp-leading-body-tight: 1.38;
    --cp-leading-caption: 1.54;
    --cp-leading-label: 1.38;
    --cp-leading-navigation: 1.5;
    --cp-leading-button-large: 1.5;

    --cp-gutter: 16px;
    --cp-container-max: 100%;
    --cp-container-pad: 16px;
  }
}