/* ========================================================================== WS TOKENS Workshop de Plantas Medicinais Desenvolvimento: Elias Lopes Foca Lá Comunicação e Design ========================================================================== */ :root { /* ====================================================================== CORES PRINCIPAIS ====================================================================== */ --ws-color-primary:#328f3d;; --ws-color-primary-hover: #004D0D; --ws-color-primary-active: #004D0D; --ws-color-dark: #004D0D; --ws-color-dark-hover: #004D0D; --ws-color-dark-active: #004D0D;; --ws-color-action: #328f3d; --ws-color-action-hover: #004D0D; --ws-color-action-active: #004D0D; --ws-color-lime: #4fe512; --ws-color-yellow: #aca014; --ws-color-yellow-light: #fff632; --ws-color-cyan: #18c5bd; --ws-color-cyan-hover: #2ce4dc; --ws-color-cyan-active: #079c96; /* ====================================================================== CORES NEUTRAS ====================================================================== */ --ws-color-white: #ffffff; --ws-color-black: #000000; --ws-color-text: #3d393b; --ws-color-text-light: #ffffff; --ws-color-muted: #737373; --ws-color-background: #ffffff; --ws-color-background-dark: #003d17; --ws-color-border: #d7d7d7; --ws-color-border-light: rgba(255, 255, 255, 0.55); /* ====================================================================== CORES SEMÂNTICAS ====================================================================== */ --ws-primary: var(--ws-color-primary); --ws-primary-hover: var(--ws-color-primary-hover); --ws-primary-active: var(--ws-color-primary-active); --ws-dark: var(--ws-color-dark); --ws-dark-hover: var(--ws-color-dark-hover); --ws-dark-active: var(--ws-color-dark-active); --ws-action: var(--ws-color-action); --ws-action-hover: var(--ws-color-action-hover); --ws-action-active: var(--ws-color-action-active); --ws-secondary: var(--ws-color-yellow); --ws-secondary-hover: var(--ws-color-yellow-light); --ws-secondary-active: #81770b; --ws-accent: var(--ws-color-lime); --ws-info: var(--ws-color-cyan); /* ====================================================================== TIPOGRAFIA ====================================================================== */ --ws-font-primary: "Outfit", sans-serif; --ws-font-regular: 400; --ws-font-medium: 500; --ws-font-semibold: 600; --ws-font-bold: 700; --ws-font-extrabold: 800; /* ====================================================================== TAMANHOS DE TEXTO ====================================================================== */ --ws-text-xs: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem); --ws-text-sm: clamp(0.82rem, 0.77rem + 0.18vw, 0.95rem); --ws-text-base: clamp(1rem, 0.93rem + 0.25vw, 1.15rem); --ws-text-lg: clamp(1.15rem, 1rem + 0.45vw, 1.45rem); --ws-text-xl: clamp(1.4rem, 1.15rem + 0.8vw, 2rem); --ws-text-2xl: clamp(1.8rem, 1.35rem + 1.4vw, 2.75rem); /* ====================================================================== ESCALA DE TÍTULOS ====================================================================== */ --ws-h1: clamp(2.7rem, 1.75rem + 3vw, 4.375rem); --ws-h2: clamp(2.35rem, 1.55rem + 2.5vw, 3.75rem); --ws-h3: clamp(2rem, 1.4rem + 2vw, 3.1rem); --ws-h4: clamp(1.7rem, 1.25rem + 1.45vw, 2.55rem); --ws-h5: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); --ws-h6: clamp(1.2rem, 1rem + 0.7vw, 1.65rem); /* ====================================================================== ALTURAS DE LINHA ====================================================================== */ --ws-line-height-tight: 1.08; --ws-line-height-heading: 1.15; --ws-line-height-base: 1.55; --ws-line-height-loose: 1.75; /* ====================================================================== ESPAÇAMENTOS ====================================================================== */ --ws-space-1: 0.25rem; --ws-space-2: 0.5rem; --ws-space-3: 0.75rem; --ws-space-4: 1rem; --ws-space-5: 1.5rem; --ws-space-6: 2rem; --ws-space-7: 3rem; --ws-space-8: 4rem; --ws-space-9: 5rem; --ws-space-10: 6rem; /* ====================================================================== BORDAS ====================================================================== */ --ws-border-width: 1px; --ws-radius-xs: 3px; --ws-radius-sm: 5px; --ws-radius-md: 8px; --ws-radius-lg: 14px; --ws-radius-xl: 22px; --ws-radius-pill: 999px; --ws-border-default: var(--ws-border-width) solid var(--ws-color-border); --ws-border-light: var(--ws-border-width) solid var(--ws-color-border-light); /* ====================================================================== SOMBRAS ====================================================================== */ --ws-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08); --ws-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.14); --ws-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.22); /* ====================================================================== OVERLAYS ====================================================================== */ --ws-overlay-dark-40: rgba(0, 61, 23, 0.4); --ws-overlay-dark-60: rgba(0, 61, 23, 0.6); --ws-overlay-dark-75: rgba(0, 61, 23, 0.75); --ws-overlay-dark-85: rgba(0, 48, 18, 0.85); --ws-overlay-black-40: rgba(0, 0, 0, 0.4); /* ====================================================================== TRANSIÇÕES ====================================================================== */ --ws-transition-fast: 150ms ease; --ws-transition-normal: 250ms ease; --ws-transition-slow: 400ms ease; /* ====================================================================== LAYOUT ====================================================================== */ --ws-container: 1240px; --ws-container-wide: 1440px; --ws-header-height: 90px; --ws-header-height-mobile: 72px; /* ====================================================================== Z-INDEX ====================================================================== */ --ws-z-base: 1; --ws-z-dropdown: 100; --ws-z-header: 500; --ws-z-modal: 1000; }