/* ==========================================================
   LUCIFER'S CORNER DESIGN SYSTEM
   Core Variables
   Version 1.0
========================================================== */

:root{

/*==========================================================
  BRAND
==========================================================*/

--lc-red:#ff3131;
--lc-dark-red:#b51212;

--lc-bg:#050505;
--lc-bg2:#0b0b0b;
--lc-panel:#111111;
--lc-card:#181818;
--lc-border:#2b2b2b;

--lc-white:#ffffff;
--lc-text:#d9d9d9;
--lc-muted:#8b8b8b;


/*==========================================================
  CATEGORY COLORS
==========================================================*/

--lc-photo:#ff3131;
--lc-video:#ff9800;
--lc-model:#a335ff;
--lc-market:#22d35b;
--lc-politics:#2d8cff;
--lc-community:#ff3131;
--lc-admin:#f4c542;


/*==========================================================
  CATEGORY GLOWS
==========================================================*/

--glow-photo:
0 0 8px rgba(255,49,49,.35);

--glow-video:
0 0 8px rgba(255,152,0,.35);

--glow-model:
0 0 8px rgba(163,53,255,.35);

--glow-market:
0 0 8px rgba(34,211,91,.35);

--glow-politics:
0 0 8px rgba(45,140,255,.35);

--glow-community:
0 0 8px rgba(255,49,49,.35);

--glow-admin:
0 0 8px rgba(244,197,66,.35);


/*==========================================================
  PANELS
==========================================================*/

--radius:14px;

--panel-shadow:
0 10px 30px rgba(0,0,0,.45);

--hover-shadow:
0 18px 40px rgba(0,0,0,.60);


/*==========================================================
  TRANSITIONS
==========================================================*/

--speed:.25s;
--speed-fast:.15s;


/*==========================================================
  TYPOGRAPHY
==========================================================*/

--heading:'Inter',sans-serif;
--body:'Inter',sans-serif;

--hero-size:64px;
--title-size:34px;
--subtitle-size:18px;
--body-size:16px;
--small-size:14px;


/*==========================================================
  SPACING
==========================================================*/

--space-xs:8px;
--space-sm:12px;
--space-md:20px;
--space-lg:32px;
--space-xl:48px;


/*==========================================================
  HEADER
==========================================================*/

--header-height:82px;


/*==========================================================
  BUTTONS
==========================================================*/

--button-radius:10px;
--button-height:52px;


/*==========================================================
  CONTENT
==========================================================*/

--max-width:1500px;

}


/*==========================================================
  GLOBAL FOUNDATION
==========================================================*/

html{
    scroll-behavior:smooth;
}

body{
    background:var(--lc-bg);
    color:var(--lc-text);
    font-family:var(--body);
    font-size:var(--body-size);
    line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--heading);
    color:var(--lc-white);
    font-weight:700;
    margin:0 0 16px;
}

a{
    color:inherit;
    text-decoration:none;
    transition:all var(--speed);
}

a:hover{
    color:var(--lc-red);
}

img{
    max-width:100%;
    height:auto;
}

button,
.button,
input[type="submit"]{
    border:none;
    border-radius:var(--button-radius);
    cursor:pointer;
    transition:all var(--speed);
}


/*==========================================================
  FORUM COLOR HELPERS
==========================================================*/

.lc-photo{
    --accent:var(--lc-photo);
    --accent-glow:var(--glow-photo);
}

.lc-video{
    --accent:var(--lc-video);
    --accent-glow:var(--glow-video);
}

.lc-model{
    --accent:var(--lc-model);
    --accent-glow:var(--glow-model);
}

.lc-market{
    --accent:var(--lc-market);
    --accent-glow:var(--glow-market);
}

.lc-politics{
    --accent:var(--lc-politics);
    --accent-glow:var(--glow-politics);
}

.lc-community{
    --accent:var(--lc-community);
    --accent-glow:var(--glow-community);
}

.lc-admin{
    --accent:var(--lc-admin);
    --accent-glow:var(--glow-admin);
}


/*==========================================================
  UTILITY CLASSES
==========================================================*/

.lc-panel{
    background:var(--lc-panel);
    border:1px solid var(--lc-border);
    border-radius:var(--radius);
    box-shadow:var(--panel-shadow);
}

.lc-card{
    background:var(--lc-card);
    border:1px solid var(--lc-border);
    border-radius:var(--radius);
    box-shadow:var(--panel-shadow);
    transition:all var(--speed);
}

.lc-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--hover-shadow);
}