/*
 Theme Name:   GlasScout
 Theme URI:    https://gladscout.com
 Description:  Custom theme for GladScout
 Author:       Donnie Gladfelter
 Author URI:   https://gladscout.com
 Template:     generatepress
 Version:      0.2
*/

:root {

  /* =====================================================
     WHITE / BLACK
  ===================================================== */
  --white: #ffffff;
  --black: #000000;

  /* =====================================================
     EVERGREEN
     v0.2: opened 400–500 gap; chain-shifted 500→950
  ===================================================== */
  --evergreen-50:  #f2f7f4;
  --evergreen-100: #ddeae3;
  --evergreen-200: #bdd3c5;
  --evergreen-300: #96b5a1;
  --evergreen-400: #4a7a62;
  --evergreen-500: #2d6b50;
  --evergreen-600: #1f4d3a;
  --evergreen-700: #1c4030;
  --evergreen-800: #18352a;
  --evergreen-900: #132821;
  --evergreen-950: #0d1b16;

  /* =====================================================
     INK
     Two-zone scale — intentional design decision.
     50–400: light neutral tints (backgrounds, borders)
     500–950: dark UI colors (text, surfaces, chrome)
  ===================================================== */
  --ink-50:  #f6f7f8;
  --ink-100: #e7e9eb;
  --ink-200: #cfd3d7;
  --ink-300: #afb5bc;
  --ink-400: #868f98;
  --ink-500: #1c1f23;
  --ink-600: #17191c;
  --ink-700: #131518;
  --ink-800: #0e1012;
  --ink-900: #090a0b;
  --ink-950: #040506;

  /* =====================================================
     BRASS
     v0.2: --brass-50 pushed warmer to separate from paper-100
  ===================================================== */
  --brass-50:  #fdf5e4;
  --brass-100: #f5ead1;
  --brass-200: #ead0a2;
  --brass-300: #ddb56f;
  --brass-400: #cd9a4b;
  --brass-500: #c18d3a;
  --brass-600: #977030;
  --brass-700: #725424;
  --brass-800: #4e3919;
  --brass-900: #2f2210;
  --brass-950: #181108;

  /* =====================================================
     SLATE
     v0.2: added --slate-100 and --slate-600
  ===================================================== */
  --slate-50:  #f5f7f8;
  --slate-100: #eaecee;
  --slate-200: #d2d8dc;
  --slate-300: #b5bec4;
  --slate-400: #88959e;
  --slate-500: #51606b;
  --slate-600: #404c54;
  --slate-700: #313940;
  --slate-800: #22282d;
  --slate-900: #15191c;
  --slate-950: #0b0d0f;

  /* =====================================================
     PAPER
     v0.2: removed --paper-500 (was non-monotonic).
     Scale now runs 50→950 in correct luminance order.
     Use --paper-100 wherever --paper-500 was referenced.
  ===================================================== */
  --paper-50:  #fffdfa;
  --paper-100: #faf7f2;
  --paper-200: #f2eee8;
  --paper-300: #e7e1d8;
  --paper-400: #d6cec1;
  --paper-600: #d9d3ca;
  --paper-700: #b8b1a7;
  --paper-800: #8f877d;
  --paper-900: #625c54;
  --paper-950: #322f2b;

  /* =====================================================
     SUCCESS
  ===================================================== */
  --success-50:  #f2f8f5;
  --success-100: #dbece2;
  --success-200: #b8d7c3;
  --success-300: #8cbb9f;
  --success-400: #5f9276;
  --success-500: #2f6b4f;
  --success-600: #275843;
  --success-700: #1f4534;
  --success-800: #173127;
  --success-900: #0f1f19;
  --success-950: #08110d;

  /* =====================================================
     WARNING
  ===================================================== */
  --warning-50:  #fff8ef;
  --warning-100: #f8e8cb;
  --warning-200: #f0d292;
  --warning-300: #e5b45a;
  --warning-400: #cf922e;
  --warning-500: #b7791f;
  --warning-600: #8f5f1c;
  --warning-700: #6a4618;
  --warning-800: #483012;
  --warning-900: #291b0b;
  --warning-950: #140d05;

  /* =====================================================
     ERROR
  ===================================================== */
  --error-50:  #fff5f3;
  --error-100: #f7dfdb;
  --error-200: #ecbbb3;
  --error-300: #dc8f84;
  --error-400: #c55f50;
  --error-500: #a33a2d;
  --error-600: #822f25;
  --error-700: #62241d;
  --error-800: #431915;
  --error-900: #260f0d;
  --error-950: #130706;

  /* =====================================================
     INFO
  ===================================================== */
  --info-50:  #f3f8fb;
  --info-100: #dce9f0;
  --info-200: #b8d1df;
  --info-300: #8cb2c7;
  --info-400: #5f89a5;
  --info-500: #2f5f7a;
  --info-600: #284d63;
  --info-700: #1f3c4d;
  --info-800: #162b37;
  --info-900: #0d1b22;
  --info-950: #070d11;

  /* =====================================================
     SEMANTIC TOKENS — Text
  ===================================================== */
  --color-text-primary:   var(--ink-500);
  --color-text-secondary: var(--slate-500);
  --color-text-muted:     var(--ink-400);
  --color-text-soft:      var(--slate-400);
  --color-text-inverse:   var(--paper-50);

  /* =====================================================
     SEMANTIC TOKENS — Titles
  ===================================================== */
  --color-title-primary:   var(--ink-500);
  --color-title-secondary: var(--ink-600);
  --color-title-muted:     var(--slate-500);
  --color-title-accent:    var(--evergreen-600);
  --color-title-inverse:   var(--paper-50);

  /* =====================================================
     SEMANTIC TOKENS — Links
  ===================================================== */
  --color-link:              var(--evergreen-600);
  --color-link-hover:        var(--evergreen-700);
  --color-link-subtle:       var(--slate-600);
  --color-link-subtle-hover: var(--evergreen-600);

  /* =====================================================
     SEMANTIC TOKENS — Backgrounds / Surfaces
  ===================================================== */
  --color-bg-page:    var(--paper-100);
  --color-bg-surface: var(--white);
  --color-bg-muted:   var(--paper-200);
  --color-bg-subtle:  var(--paper-100);
  --color-bg-inset:   var(--evergreen-50);
  --color-bg-dark:    var(--ink-700);
  --color-bg-accent:  var(--brass-50);

  /* =====================================================
     SEMANTIC TOKENS — Borders / Rules
  ===================================================== */
  --color-border-subtle:  var(--slate-100);
  --color-border-default: var(--slate-200);
  --color-border-strong:  var(--slate-300);
  --color-border-accent:  var(--brass-200);
  --color-border-focus:   var(--evergreen-500);

  /* =====================================================
     SEMANTIC TOKENS — Actions
  ===================================================== */
  --color-action-primary:          var(--evergreen-500);
  --color-action-primary-hover:    var(--evergreen-600);
  --color-action-primary-active:   var(--evergreen-700);
  --color-action-primary-text:     var(--white);
  --color-action-secondary-bg:     transparent;
  --color-action-secondary-hover:  var(--evergreen-50);
  --color-action-secondary-border: var(--slate-200);
  --color-action-secondary-text:   var(--ink-500);

  /* =====================================================
     SEMANTIC TOKENS — Accents
  ===================================================== */
  --color-accent-primary: var(--brass-500);
  --color-accent-soft:    var(--brass-300);
  --color-accent-subtle:  var(--brass-100);
  --color-accent-dark:    var(--brass-700);

  /* =====================================================
     SEMANTIC TOKENS — Cards / Panels
  ===================================================== */
  --color-card-bg:      var(--white);
  --color-card-border:  var(--slate-100);
  --color-panel-bg:     var(--paper-100);
  --color-panel-border: var(--slate-100);

  /* =====================================================
     SEMANTIC TOKENS — Forms
  ===================================================== */
  --color-input-bg:             var(--white);
  --color-input-border:         var(--slate-200);
  --color-input-border-hover:   var(--slate-300);
  --color-input-border-focus:   var(--evergreen-500);
  --color-input-placeholder:    var(--slate-400);

  /* =====================================================
     SEMANTIC TOKENS — Navigation
  ===================================================== */
  --color-nav-bg:         var(--paper-100);
  --color-nav-text:       var(--ink-500);
  --color-nav-text-hover: var(--evergreen-600);
  --color-nav-border:     var(--slate-100);

  /* =====================================================
     SEMANTIC TOKENS — Selection / Focus
  ===================================================== */
  --color-selection-bg:   var(--evergreen-100);
  --color-selection-text: var(--ink-700);
  --color-focus-ring:     var(--evergreen-200);

  /* =====================================================
     SEMANTIC TOKENS — Feedback
  ===================================================== */
  --color-success-bg:     var(--success-50);
  --color-success-border: var(--success-200);
  --color-success-text:   var(--success-700);
  --color-success-accent: var(--success-500);

  --color-warning-bg:     var(--warning-50);
  --color-warning-border: var(--warning-200);
  --color-warning-text:   var(--warning-700);
  --color-warning-accent: var(--warning-500);

  --color-error-bg:       var(--error-50);
  --color-error-border:   var(--error-200);
  --color-error-text:     var(--error-700);
  --color-error-accent:   var(--error-500);

  --color-info-bg:        var(--info-50);
  --color-info-border:    var(--info-200);
  --color-info-text:      var(--info-700);
  --color-info-accent:    var(--info-500);

}

/* ==========================================================
   GENERATEPRESS ELEMENT OVERRIDES
   These ensure GP-rendered elements use our semantic tokens.
   GP's own Customizer values are set as fallback defaults
   via functions.php — these rules take final precedence.
========================================================== */

/* --- Body & Base --- */
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* --- Header --- */
.site-header {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-title a,
.site-title a:hover {
  color: var(--color-title-primary);
}

.site-description {
  color: var(--color-text-secondary);
}

/* --- Navigation --- */
.main-navigation,
.main-navigation .main-nav ul li a,
#site-navigation {
  background-color: var(--color-nav-bg);
  color: var(--color-nav-text);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--color-nav-text-hover);
}

.main-navigation .main-nav ul ul {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-default);
}

/* --- Content --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-title-primary);
}

.entry-title a {
  color: var(--color-title-primary);
}

.entry-title a:hover {
  color: var(--color-title-accent);
}

hr,
.wp-block-separator {
  border-color: var(--color-border-default);
}

/* --- Buttons --- */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
  background-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
  border-color: var(--color-action-primary);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
}

.button:active,
button:active,
input[type="submit"]:active,
.wp-block-button__link:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
}

/* --- Forms --- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-primary);
}

input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover {
  border-color: var(--color-input-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-input-border-focus);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0;
}

::placeholder {
  color: var(--color-input-placeholder);
}

/* --- Sidebar Widgets --- */
.widget-title {
  color: var(--color-title-primary);
  border-color: var(--color-border-accent);
}

.widget a {
  color: var(--color-link);
}

.widget a:hover {
  color: var(--color-link-hover);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.site-footer a {
  color: var(--color-text-inverse);
}

.site-footer a:hover {
  color: var(--color-accent-soft);
}