/**
 * File: /brand/penguinsigns/css/tokens.css
 * Purpose: PenguinSigns brand-specific design tokens.
 *
 * Defines PenguinSigns colors, surfaces, imagery, and other visual
 * values consumed by shared platform CSS components.
 *
 * Values are taken from the existing PenguinSigns CSS in
 * brand/penguinsigns/css/ (style, critical, buttons, quantity,
 * and categories_carousel).
 *
 * This file must contain configuration values only.
 *
 * This file must not contain:
 * - Component layout
 * - Structural styling
 * - CSS selectors
 * - Application behavior
 */

 :root {
    /* ==========================================
       Primary Brand Colors
       ========================================== */

    /* settings.php primary_color; category ribbon; owl-nav */
    --brand-primary: #2b6cb0;
    /* buttons.css hover */
    --brand-primary-hover: #1957a3;
    --brand-primary-soft: #2b6cb082;

    /* footer, carousel bar, product-card border, CTA buttons */
    --brand-secondary: #195094;


    /* ==========================================
       Accent Colors
       ========================================== */

    --brand-accent: #2b6cb0;
    --brand-accent-hover: #195094;

    /* buttons.css :active */
    --brand-selection: #007185;
    --brand-selection-shadow: rgba(43, 108, 176, 0.30);
    --brand-accent-shadow: rgba(25, 80, 148, 0.25);


    /* ==========================================
       Interactive Controls
       ========================================== */

    --brand-control-accent: #007185;


    /* ==========================================
       Brand Surfaces
       ========================================== */

    /* product cards, cart header, checkout header */
    --brand-surface: #eff9fb;
    /* quantity container; category hover */
    --brand-surface-soft: #f8f9fa;

    --brand-navbar: #eff9fb;
    --brand-footer: #195094;


    /* ==========================================
       Brand Text
       ========================================== */

    --brand-text-on-primary: #ffffff;

    /* category pills in categories_carousel.css */
    --brand-text-accent: #000000;
    --brand-text-accent-hover: #000000;


    /* ==========================================
       Customization Modal
       ========================================== */

    /*
     * PenguinSigns has no dedicated modal color stylesheet.
     * These follow the existing navy/blue chrome.
     */

    --brand-modal-header: #195094;
    --brand-modal-preview-background: #0d2a4d;


    /* ==========================================
       Brand Imagery
       ========================================== */

    --brand-page-background:
        url('/brand/penguinsigns/img/penguin_bg.png');
}