/*
Theme Name: DiaT Studio
Theme URI: https://diat.studio
Author: DiaT
Author URI: https://diat.studio
Description: A lightweight, fully Elementor-editable theme for DiaT — Workflow Systems & Branding studio. Brand system (colors, type) is pre-loaded so Elementor's Site Settings picks it up immediately. All layout, sections, and pages are built and edited entirely in Elementor.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: diat-studio
*/

/* ============================================
   BRAND FOUNDATION — CSS custom properties
   Mirror these exact hex values into
   Elementor → Site Settings → Global Colors
   ============================================ */
:root{
  --diat-obsidian:#18181B;
  --diat-obsidian-2:#1F1F23;
  --diat-emerald:#059669;
  --diat-emerald-dark:#047857;
  --diat-amber:#D97706;
  --diat-slate:#E4E4E7;
  --diat-slate-dim:#A1A1AA;
  --diat-line: rgba(228,228,231,0.12);

  --diat-font-heading: 'Space Grotesk', sans-serif;
  --diat-font-body: 'Plus Jakarta Sans', sans-serif;
}

/* ============================================
   BASE RESET
   ============================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--diat-obsidian);
  color:var(--diat-slate);
  font-family:var(--diat-font-body);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--diat-font-heading);
  color:#fff;
  letter-spacing:-0.01em;
  margin:0;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* ============================================
   ELEMENTOR CANVAS COMPATIBILITY
   Keeps Elementor's own section/container
   widths and spacing in control — theme does
   not fight Elementor's layout system.
   ============================================ */
.elementor-section-wrap, .site-main{
  background:var(--diat-obsidian);
}

/* ============================================
   REUSABLE BRAND UTILITY CLASSES
   Available to use inside Elementor's
   "CSS Classes" field on any widget.
   ============================================ */
.diat-eyebrow{
  color:var(--diat-emerald);
  font-family:var(--diat-font-heading);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.diat-eyebrow::before{
  content:'';
  width:20px; height:1px;
  background:var(--diat-emerald);
}
.diat-btn-primary{
  background:var(--diat-emerald) !important;
  color:#fff !important;
  font-family:var(--diat-font-heading);
  font-weight:600;
  border-radius:2px !important;
  transition:background .2s ease;
}
.diat-btn-primary:hover{background:var(--diat-emerald-dark) !important;}
.diat-btn-secondary{
  background:transparent !important;
  border:1px solid var(--diat-line) !important;
  color:var(--diat-slate) !important;
  font-family:var(--diat-font-heading);
  font-weight:600;
  border-radius:2px !important;
  transition:border-color .2s ease;
}
.diat-btn-secondary:hover{border-color:var(--diat-slate-dim) !important;}
.diat-card{
  border:1px solid var(--diat-line);
  background:var(--diat-obsidian-2);
  transition:border-color .2s ease, transform .2s ease;
}
.diat-card:hover{border-color:rgba(228,228,231,0.28); transform:translateY(-2px);}
.diat-divider{
  border:none;
  border-top:1px solid var(--diat-line);
}
.diat-section-dark-alt{
  background:var(--diat-obsidian-2) !important;
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */
@media (max-width:860px){
  body{font-size:15px;}
}