@charset "UTF-8";

/* ======================================================================
   CAPYDIM — CENTRAL COLOR PALETTE
   ======================================================================
   Purpose:
   - One place to maintain the website's brand and interface colors.
   - Team and site styles reference the official CapyDim brand variables.
   - Brand palette, component colors, border weights, radii, shadows.

   Imported automatically by the two main stylesheets.
   Change values here to change design tokens across the site.
   ====================================================================== */

:root {
    /* ================================================================
       01. OFFICIAL BRAND COLORS
       ================================================================ */

    /* ================================================================
       OFFICIAL CAPYDIM ENGINEERING BRAND PALETTE
       Primary colors: #000000 / #CE360A / #FC7123 / #FD9132
       ================================================================ */

    --CapyDim-brand-black: #000000;
    --CapyDim-brand-black-rgb: 0, 0, 0;

    --CapyDim-brand-blacktrans: rgba(var(--CapyDim-brand-black-rgb), 0.5);
    --CapyDim-brand-blacktrans-medium: rgba(var(--CapyDim-brand-black-rgb), 0.25);
    --CapyDim-brand-blacktrans-soft: rgba(var(--CapyDim-brand-black-rgb), 0.125);
    --CapyDim-brand-blacktrans-subtle: rgba(var(--CapyDim-brand-black-rgb), 0.0625);

    --CapyDim-brand-white: #ffffff;
    --CapyDim-brand-white-rgb: 255, 255, 255;

    --CapyDim-brand-whitetrans: rgba(var(--CapyDim-brand-white-rgb), 0.5);
    --CapyDim-brand-whitetrans-medium: rgba(var(--CapyDim-brand-white-rgb), 0.25);
    --CapyDim-brand-whitetrans-soft: rgba(var(--CapyDim-brand-white-rgb), 0.125);
    --CapyDim-brand-whitetrans-subtle: rgba(var(--CapyDim-brand-white-rgb), 0.0625);

    --CapyDim-brand-dark-gray: #404040;
    --CapyDim-brand-dark-gray-rgb: 64, 64, 64;

    --CapyDim-brand-dark-graytrans: rgba(var(--CapyDim-brand-dark-gray-rgb), 0.5);
    --CapyDim-brand-dark-graytrans-medium: rgba(var(--CapyDim-brand-dark-gray-rgb), 0.25);
    --CapyDim-brand-dark-graytrans-soft: rgba(var(--CapyDim-brand-dark-gray-rgb), 0.125);
    --CapyDim-brand-dark-graytrans-subtle: rgba(var(--CapyDim-brand-dark-gray-rgb), 0.0625);

    --CapyDim-brand-gray: #808080;
    --CapyDim-brand-gray-rgb: 128, 128, 128;

    --CapyDim-brand-graytrans: rgba(var(--CapyDim-brand-gray-rgb), 0.5);
    --CapyDim-brand-graytrans-medium: rgba(var(--CapyDim-brand-gray-rgb), 0.25);
    --CapyDim-brand-graytrans-soft: rgba(var(--CapyDim-brand-gray-rgb), 0.125);
    --CapyDim-brand-graytrans-subtle: rgba(var(--CapyDim-brand-gray-rgb), 0.0625);

    --CapyDim-brand-light-gray: #bfbfbf;
    --CapyDim-brand-light-gray-rgb: 191, 191, 191;

    --CapyDim-brand-light-graytrans: rgba(var(--CapyDim-brand-light-gray-rgb), 0.5);
    --CapyDim-brand-light-graytrans-medium: rgba(var(--CapyDim-brand-light-gray-rgb), 0.25);
    --CapyDim-brand-light-graytrans-soft: rgba(var(--CapyDim-brand-light-gray-rgb), 0.125);
    --CapyDim-brand-light-graytrans-subtle: rgba(var(--CapyDim-brand-light-gray-rgb), 0.0625);

    --CapyDim-brand-dark-orange: #ce360a;
    --CapyDim-brand-dark-orange-rgb: 206, 54, 10;

    --CapyDim-brand-dark-orangetrans: rgba(var(--CapyDim-brand-dark-orange-rgb), 0.5);
    --CapyDim-brand-dark-orangetrans-medium: rgba(var(--CapyDim-brand-dark-orange-rgb), 0.25);
    --CapyDim-brand-dark-orangetrans-soft: rgba(var(--CapyDim-brand-dark-orange-rgb), 0.125);
    --CapyDim-brand-dark-orangetrans-subtle: rgba(var(--CapyDim-brand-dark-orange-rgb), 0.0625);

    --CapyDim-brand-orange: #fc7123;
    --CapyDim-brand-orange-rgb: 252, 113, 35;

    --CapyDim-brand-orangetrans: rgba(var(--CapyDim-brand-orange-rgb), 0.5);
    --CapyDim-brand-orangetrans-medium: rgba(var(--CapyDim-brand-orange-rgb), 0.25);
    --CapyDim-brand-orangetrans-soft: rgba(var(--CapyDim-brand-orange-rgb), 0.125);
    --CapyDim-brand-orangetrans-subtle: rgba(var(--CapyDim-brand-orange-rgb), 0.0625);

    --CapyDim-brand-light-orange: #fd9132;
    --CapyDim-brand-light-orange-rgb: 253, 145, 50;

    --CapyDim-brand-light-orangetrans: rgba(var(--CapyDim-brand-light-orange-rgb), 0.5);
    --CapyDim-brand-light-orangetrans-medium: rgba(var(--CapyDim-brand-light-orange-rgb), 0.25);
    --CapyDim-brand-light-orangetrans-soft: rgba(var(--CapyDim-brand-light-orange-rgb), 0.125);
    --CapyDim-brand-light-orangetrans-subtle: rgba(var(--CapyDim-brand-light-orange-rgb), 0.0625);

}

/* ======================================================================
   02. BORDER / OUTLINE / STROKE THICKNESS
   ====================================================================== */
:root {
    --CapyDim-line-p3em: .3em; /* 12 reference(s) */
    --CapyDim-line-1px: 1px; /* 70 reference(s) */
    --CapyDim-line-2px: 2px; /* 42 reference(s) */
    --CapyDim-line-3px: 3px; /* 10 reference(s) */
    --CapyDim-line-4px: 4px; /* 2 reference(s) */
    --CapyDim-line-5px: 5px; /* 1 reference(s) */
    --CapyDim-line-10px: 10px; /* 2 reference(s) */
}

/* ======================================================================
   03. CORNER RADII / SHAPES
   ====================================================================== */
:root {
    --CapyDim-radius-p25rem: .25rem; /* 13 reference(s) */
    --CapyDim-radius-p2rem: .2rem; /* 2 reference(s) */
    --CapyDim-radius-p3rem: .3rem; /* 3 reference(s) */
    --CapyDim-radius-full: 100%; /* 7 reference(s) */
    --CapyDim-radius-10px: 10px; /* 1 reference(s) */
    --CapyDim-radius-1px: 1px; /* 6 reference(s) */
    --CapyDim-radius-200px: 200px; /* 2 reference(s) */
    --CapyDim-radius-25px: 25px; /* 1 reference(s) */
    --CapyDim-radius-30pct: 30%; /* 2 reference(s) */
    --CapyDim-radius-round: 50%; /* 34 reference(s) */
    --CapyDim-radius-80pct: 80%; /* 3 reference(s) */
    --CapyDim-radius-8px: 8px; /* 3 reference(s) */
}

/* Swiper compatibility: keep the library's theme color aligned with CapyDim. */
:root {
    --swiper-theme-color: var(--CapyDim-brand-orange);
}