/*=====================================================================

  Clunky Design System (CDS)
  Component: Buttons
  File: buttons.css
  Version: 1.0.0

  --------------------------------------------------------------------
  PURPOSE

  Reusable button system used throughout Clunky.xyz.

  Supports:

  ✓ Primary buttons
  ✓ Secondary buttons
  ✓ Ghost buttons
  ✓ Outline buttons
  ✓ Text buttons
  ✓ Icon buttons
  ✓ Button groups
  ✓ Loading state
  ✓ Disabled state
  ✓ Focus accessibility
  ✓ Responsive sizing

  --------------------------------------------------------------------
  FUTURE EXTENSIONS

  SECTION 14 - Split Buttons
  SECTION 15 - Dropdown Buttons
  SECTION 16 - Floating Action Buttons
  SECTION 17 - Animated CTA Buttons

======================================================================*/


/*=====================================================================
SECTION 01
Base Button
======================================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.65rem;

padding:.95rem 1.65rem;

border:none;

border-radius:14px;

font-size:1rem;

font-weight:700;

line-height:1;

text-decoration:none;

white-space:nowrap;

cursor:pointer;

transition:

background-color .25s ease,

color .25s ease,

border-color .25s ease,

transform .20s ease,

box-shadow .25s ease,

opacity .25s ease;

user-select:none;

-webkit-user-select:none;

}


/*=====================================================================
SECTION 02
Hover
======================================================================*/

.btn:hover{

transform:translateY(-2px);

}


/*=====================================================================
SECTION 03
Active
======================================================================*/

.btn:active{

transform:translateY(0);

}


/*=====================================================================
SECTION 04
Keyboard Focus
======================================================================*/

.btn:focus-visible{

outline:none;

box-shadow:

0 0 0 4px rgba(37,99,235,.20);

}


/*=====================================================================
SECTION 05
Primary Button
======================================================================*/

.btn-primary{

background:var(--color-primary);

color:#ffffff;

box-shadow:

0 10px 24px rgba(37,99,235,.18);

}


.btn-primary:hover{

background:var(--color-primary-dark);

box-shadow:

0 16px 36px rgba(37,99,235,.25);

}


/*=====================================================================
SECTION 06
Secondary Button
======================================================================*/

.btn-secondary{

background:#ffffff;

border:1px solid var(--color-border);

color:var(--color-heading);

}


.btn-secondary:hover{

background:var(--color-bg-alt);

}


/*=====================================================================
SECTION 07
Outline Button
======================================================================*/

.btn-outline{

background:transparent;

border:2px solid var(--color-primary);

color:var(--color-primary);

}


.btn-outline:hover{

background:var(--color-primary);

color:#ffffff;

}


/*=====================================================================
SECTION 08
Ghost Button
======================================================================*/

.btn-ghost{

background:transparent;

color:var(--color-heading);

}


.btn-ghost:hover{

background:rgba(0,0,0,.05);

}


/*=====================================================================
SECTION 09
Text Button
======================================================================*/

.btn-text{

padding:0;

background:none;

color:var(--color-primary);

font-weight:700;

}


.btn-text:hover{

text-decoration:underline;

transform:none;

}


/*=====================================================================
SECTION 10
Icon Button
======================================================================*/

.btn-icon{

width:48px;

height:48px;

padding:0;

border-radius:50%;

background:#ffffff;

border:1px solid var(--color-border);

}


.btn-icon svg{

width:22px;

height:22px;

}


/*=====================================================================
SECTION 11
Button Sizes
======================================================================*/

.btn-sm{

padding:.70rem 1.10rem;

font-size:.90rem;

}


.btn-lg{

padding:1.15rem 2rem;

font-size:1.10rem;

}


/*=====================================================================
SECTION 12
Full Width
======================================================================*/

.btn-block{

width:100%;

}


/*=====================================================================
SECTION 13
Rounded Variant
======================================================================*/

.btn-pill{

border-radius:999px;

}


/*=====================================================================
SECTION 14
Loading State
======================================================================*/

.btn-loading{

pointer-events:none;

opacity:.75;

position:relative;

}


.btn-loading::after{

content:"";

width:16px;

height:16px;

margin-left:.75rem;

border:

2px solid rgba(255,255,255,.45);

border-top-color:#ffffff;

border-radius:50%;

animation:

button-spin .75s linear infinite;

}


/*=====================================================================
SECTION 15
Disabled
======================================================================*/

.btn:disabled,

.btn.disabled{

opacity:.45;

cursor:not-allowed;

pointer-events:none;

transform:none;

box-shadow:none;

}


/*=====================================================================
SECTION 16
Button Group
======================================================================*/

.btn-group{

display:flex;

flex-wrap:wrap;

gap:1rem;

align-items:center;

}


/*=====================================================================
SECTION 17
Hero Button Group
======================================================================*/

.hero-actions{

display:flex;

gap:1rem;

flex-wrap:wrap;

margin-top:2rem;

}


/*=====================================================================
SECTION 18
CTA Buttons
======================================================================*/

.cta-buttons{

display:flex;

justify-content:center;

gap:1.25rem;

flex-wrap:wrap;

margin-top:2.5rem;

}


/*=====================================================================
SECTION 19
Download Button
======================================================================*/

.btn-download{

background:#10b981;

color:#ffffff;

box-shadow:

0 10px 24px rgba(16,185,129,.20);

}


.btn-download:hover{

background:#059669;

}


/*=====================================================================
SECTION 20
Arrow Animation
======================================================================*/

.btn-arrow{

display:inline-flex;

align-items:center;

gap:.75rem;

}


.btn-arrow svg{

transition:

transform .25s ease;

}


.btn-arrow:hover svg{

transform:

translateX(5px);

}


/*=====================================================================
SECTION 21
Subtle Elevation
======================================================================*/

.btn-elevated{

box-shadow:

0 12px 32px rgba(15,23,42,.10);

}


.btn-elevated:hover{

box-shadow:

0 20px 42px rgba(15,23,42,.16);

}


/*=====================================================================
SECTION 22
Responsive
======================================================================*/

@media (max-width:768px){

.btn{

width:100%;

justify-content:center;

}

.hero-actions{

flex-direction:column;

align-items:stretch;

}

.btn-group{

flex-direction:column;

align-items:stretch;

}

}


/*=====================================================================
SECTION 23
Animation
======================================================================*/

@keyframes button-spin{

to{

transform:rotate(360deg);

}

}


/*=====================================================================
SECTION 24
Future Components

Insert new sections BELOW this line.

Version 1.1
SECTION 25
Split Buttons

Version 1.2
SECTION 26
Dropdown Buttons

Version 1.3
SECTION 27
Floating Action Buttons

Version 1.4
SECTION 28
Glass Buttons

======================================================================*/