/*
Theme Name:  Vatlieuso
Theme URI:   https://vatlieuso.com
Author:      Vatlieuso Team
Author URI:  https://vatlieuso.com
Description: Sàn giao dịch vật liệu xây dựng số — Industrial minimalism, deep navy, hi-vis yellow. B2B/B2C marketplace for construction materials in Vietnam.
Version:     1.4.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vatlieuso
Tags: construction, marketplace, e-commerce, industrial, vietnam
*/

/* =====================================================================
   DESIGN SYSTEM — Vatlieuso.com
   Industrial minimalism: concrete, rebar, navy, hi-vis.
   ===================================================================== */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =================================================================
     COLOR — RAW TOKENS
     ================================================================= */

  /* Neutrals */
  --c-white:        #FFFFFF;
  --c-paper:        #F7F7F5;
  --c-concrete-50:  #EEEDE8;
  --c-concrete-100: #E2E0DA;
  --c-concrete-200: #CDCAC2;
  --c-concrete-300: #A8A49A;
  --c-cement-400:   #7A7770;
  --c-cement-500:   #55524C;
  --c-cement-600:   #3A3834;
  --c-cement-700:   #26251F;
  --c-black:        #0E0D09;

  /* Brand — Deep Navy */
  --c-navy-50:      #ECEFF4;
  --c-navy-100:     #D5DBE5;
  --c-navy-200:     #A9B4C8;
  --c-navy-300:     #6D7E9C;
  --c-navy-400:     #3F5578;
  --c-navy-500:     #1F3355;
  --c-navy-600:     #152445;
  --c-navy-700:     #0D1832;
  --c-navy-800:     #070F22;

  /* Hi-vis */
  --c-hivis-300:    #FFDA4A;
  --c-hivis-400:    #FFC107;
  --c-hivis-500:    #F4A100;
  --c-hivis-600:    #C97E00;

  /* Rust */
  --c-rust-400:     #C86A3A;
  --c-rust-500:     #A54A1E;

  /* Resale / Thanh Lý */
  --c-resale-bg:    #1A1612;
  --c-resale-fg:    #F7F2E8;
  --c-resale-accent: #F08A3E;
  --c-resale-warn:   #FFC107;

  /* Market */
  --c-market-up:    #0E8F4A;
  --c-market-up-bg: #E4F3EB;
  --c-market-down:  #C8321E;
  --c-market-down-bg:#F8E5E1;
  --c-market-flat:  #7A7770;

  /* Status */
  --c-success:      #0E8F4A;
  --c-success-bg:   #E4F3EB;
  --c-warning:      #F4A100;
  --c-warning-bg:   #FFF4D9;
  --c-danger:       #C8321E;
  --c-danger-bg:    #F8E5E1;
  --c-info:         #1F3355;
  --c-info-bg:      #ECEFF4;
  --red:            var(--c-danger);
  --green:          var(--c-success);

  /* =================================================================
     SEMANTIC TOKENS — LIGHT MODE
     ================================================================= */

  --bg-canvas:      var(--c-paper);
  --bg-body:        var(--c-paper);
  --bg-surface:     var(--c-white);
  --bg-sunken:      var(--c-concrete-50);
  --bg-raised:      var(--c-white);
  --bg-inverse:     var(--c-navy-700);

  --fg-1:           var(--c-cement-700);
  --fg-2:           var(--c-cement-500);
  --fg-3:           var(--c-cement-400);
  --fg-muted:       var(--c-concrete-300);
  --fg-on-inverse:  var(--c-white);
  --fg-on-accent:   var(--c-white);

  --border-1:       var(--c-concrete-100);
  --border-2:       var(--c-concrete-200);
  --border-3:       var(--c-cement-600);
  --border-focus:   var(--c-navy-500);

  --accent:         var(--c-navy-500);
  --accent-hover:   var(--c-navy-600);
  --accent-press:   var(--c-navy-700);
  --accent-soft:    var(--c-navy-50);

  --cta:            var(--c-hivis-400);
  --cta-hover:      var(--c-hivis-500);
  --cta-fg:         var(--c-cement-700);

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

  --font-display:   'Be Vietnam Pro', system-ui, sans-serif;
  --font-body:      'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.12em;

  /* =================================================================
     SPACING — 4px base
     ================================================================= */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* =================================================================
     RADII
     ================================================================= */

  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-4:    10px;
  --r-full: 9999px;

  /* =================================================================
     SHADOWS
     ================================================================= */

  --shadow-0:     none;
  --shadow-1:     0 1px 0 rgba(14,13,9,.04), 0 1px 2px rgba(14,13,9,.06);
  --shadow-2:     0 2px 4px rgba(14,13,9,.06), 0 4px 8px rgba(14,13,9,.04);
  --shadow-3:     0 4px 8px rgba(14,13,9,.08), 0 12px 24px rgba(14,13,9,.06);
  --shadow-pop:   0 10px 30px rgba(7,15,34,.18);
  --shadow-inset: inset 0 1px 0 rgba(14,13,9,.04);

  /* =================================================================
     MOTION
     ================================================================= */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-normal:    200ms;
  --dur-slow:      320ms;

  /* =================================================================
     LAYOUT
     ================================================================= */

  --container-max: 1360px;
  --container-px:  32px;
  --gutter:        24px;
  --header-h:      72px;
}

/* Dark mode */
[data-theme="dark"] {
  --bg-canvas:    var(--c-cement-700);
  --bg-surface:   var(--c-cement-600);
  --bg-sunken:    #1C1B17;
  --bg-raised:    #34322D;
  --bg-inverse:   var(--c-paper);
  --fg-1:         var(--c-paper);
  --fg-2:         var(--c-concrete-200);
  --fg-3:         var(--c-concrete-300);
  --fg-muted:     var(--c-cement-400);
  --border-1:     #3A3834;
  --border-2:     #4A4843;
  --border-3:     #6A6760;
  --border-focus: var(--c-navy-200);
  --accent:       var(--c-navy-200);
  --accent-hover: var(--c-navy-100);
  --accent-soft:  #1C2840;
}