/* =========================================================
   CoreMaster – Personal Design System (v1)
   Author: Walter Smolko

   Philosophy:
   - Dark mode by default
   - High readability
   - Large tap targets
   - Minimal rounding
   - Subtle shadows
   - Accent colors used intentionally
   - No gradients unless purposeful
========================================================= */

:root {

  --ui-scale: .9;
  --radius-sm: .4rem;
  --radius-md: .7rem;
  --radius-lg: 1rem;

  /* ===== Brand Colors ===== */

  --green:        #10A37E;
  --green-light:  #34B896;
  --green-dark:   #0C8A6B;
  
  --red:          #F04361;
  --red-light:    #F46A82;
  --red-dark:     #D73752;
  
  --orange:       #D88A2A; /* #D88A2A #D18427 #C97C22 */
  --orange-light: #EEA94A; /* ? */
  --orange-dark:  #C97C22; /* #C77414 #C97C22 */
  
  --blue:         #6B7BFF;
  --blue-light:   #7A82D6; /* ? */
  --blue-dark:    #5263ff; /* #484FB0 #5263ff #5566fc */
  
  --focus: var(--green);
  --focus-ring: rgba(16, 163, 126, 0.25);
}

/* ===========================
   DARK THEME (default)
=========================== */

[data-theme="dark"] {

  --bg: #0F1115;
  --card: #1A1D23;
  --card-elevated: #21252D;
  --border: #2A2F38;

  --text: #F2F3F5;
  --text-muted: #9AA0A6;
  --text-danger:  var(--red);
  --text-success: var(--green);
  --text-warning: var(--orange);
  --text-info:    var(--blue);

  --neutral-bg: #2A2F38;
  --neutral-hover: #343A44;
  --neutral-text: #F2F3F5;
  --neutral-border: #3A414C;
  
  --danger:  var(--red);
  --success: var(--green);
  --warning: var(--orange);
  --info:    var(--blue);
}

/* ===========================
   LIGHT THEME
=========================== */

[data-theme="light"] {

  --bg: #F5F6F8;
  --card: #FFFFFF;
  --card-elevated: #FAFBFC;
  --border: #E3E6EA;

  --text: #1C1F26;
  --text-muted: #5F6672;
  --text-danger:  var(--red);
  --text-success: var(--green);
  --text-warning: var(--orange);
  --text-info:    var(--blue);

  --neutral-bg: #E7EAF0;
  --neutral-hover: #DCE1E8;
  --neutral-text: #1C1F26;
  --neutral-border: #C9CFD8;
  
  --danger:  var(--red);
  --success: var(--green);
  --warning: var(--orange);
  --info:    var(--blue);
}

/* ===== Base ===== */

* { 
  box-sizing: border-box; 
}

html { 
  font-size: calc(20px * var(--ui-scale)); 
  letter-spacing: 0.02em;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 5%;
}

/* ===== Typography ===== */

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

h2 {
  margin: 2rem 0 .4rem 0;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

h3 {
  margin: 0 0 .4rem;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

p {
  color: var(--text);
  line-height: 1.6;
}

a, 
a:link,
a:visited {
  color: var(--text-info);
}

a:hover,
a:active {
  color: var(--text-warning);
}

.text-muted { color: var(--text-muted); }
.text-success { color: var(--text-success); }
.text-danger { color: var(--text-danger); }
.text-warning { color: var(--text-warning); }
.text-info { color: var(--text-info); }

/* ===== Cards ===== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ===== Buttons ===== */

.button {
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin: .25rem .25rem .25rem 0;
  transition: 0.2s ease;
}

.button {
  transition: background 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.08s ease;
}

.button:active {
  transform: scale(0.98);
}

.button-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-text);
}

.button-neutral-outline {
  background: transparent;
  color: var(--neutral-text);
  border: 1px solid var(--neutral-border);
}

.button-red,
.button-danger {
  background: var(--danger);
  color: white;
}

.button-green,
.button-success {
  background: var(--success);
  color: white;
}

.button-orange,
.button-warning {
  background: var(--warning);
  color: white;
}

.button-blue,
.button-info {
  background: var(--info);
  color: white;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: var(--neutral-hover);
  }
  
  .button-neutral:hover {
    background: var(--neutral-hover);
  }
  
  .button-neutral-outline:hover {
    background: var(--neutral-bg);
  }
  
  .button-red:hover,
  .button-danger:hover {
    background: var(--red-dark);
  }
  
  .button-green:hover,
  .button-success:hover {
    background: var(--green-dark);
  }
  
  .button-orange:hover,
  .button-warning:hover {
    background: var(--orange-dark);
    color: white;
  }
  
  .button-blue:hover,
  .button-info:hover {
    background: var(--blue-dark);
    color: white;
  }
}

/* ===== Inputs ===== */

.input {
  background: var(--card-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem;
  color: var(--text);
  width: 100%;
  margin-top: .5rem;
}

.input:focus,
.input:focus-visible {
  outline: none;
  border: 1px solid var(--focus);
  box-shadow: 0 0 0 .15rem var(--focus-ring);
}

/* ===== Badges ===== */

.badge {
  display: inline-block;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  font-size: .6rem;
  font-weight: 600;
  margin-right: .3rem;
}

.badge-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-text);
  border: 1px solid var(--neutral-bg);
}

.badge-neutral-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--neutral-border);
}

.badge-green,
.badge-success {
  background: var(--success);
  color: white;
  border: 1px solid var(--success);
}

.badge-red,
.badge-danger {
  background: var(--danger);
  color: white;
  border: 1px solid var(--danger);
}

.badge-orange,
.badge-warning {
  background: var(--warning);
  color: white;
  border: 1px solid var(--warning);
}

.badge-blue,
.badge-info {
  background: var(--info);
  color: white;
  border: 1px solid var(--info);
}

/* ===== Icons ===== */

.icon {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-small {
  width: .8rem;
  height: .8rem;
  vertical-align: -0.15rem;
  color: var(--info);
}

.icon-active {
  fill: currentColor;
}

.icon-img {
  width: 1.2rem;
  height: 1.2rem;
}

/* ==== Flex Container ==== */

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-item {
  padding: 0;
  margin: .25rem;
  text-align: left;
  width: 100%;
}

.flex-item:first-child {
  margin-left: 0;
}

.flex-item:last-child {
  margin-right: 0;
}

@media (max-width: 36rem) {
  .flex-container {
    flex-direction: column;
  }

  .flex-item {
    margin: .25rem 0;
  }
}

/* ===== Swatches ===== */

.swatch {
  height: 3rem;
  border-radius: var(--radius-sm);
  max-width: 100%;
}

/* ===== Footer ===== */

footer {
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}