/* assets/css/palette.css
   Complete site palette and utility tokens for DW Child (Linis IT).
   Comments in English.
   Place this file in: wp-content/themes/dw-child-theme/assets/css/palette.css
*/

/* Core brand tokens — Concept 13: Bold + Futuristic Hybrid */
:root{
  /* Brand core */
  --cc-navy: #00274A;
  --cc-cream: #F4EBD3;

  /* C13 Dark palette */
  --c13-bg:      #0A0A14;
  --c13-bg-alt:  #0E0E20;
  --c13-surface: #12122A;
  --c13-surface2:#1A1A3A;
  --c13-text:    #F0F0FF;
  --c13-muted:   rgba(240,240,255,.5);
  --c13-subtle:  rgba(240,240,255,.35);
  --c13-border:  rgba(240,240,255,.06);

  /* Accent gradient (orange → gold) */
  --c13-accent:     #F28705;
  --c13-secondary:  #FAB216;
  --c13-grad:       linear-gradient(135deg, #F28705, #FAB216);
  --c13-grad-90:    linear-gradient(90deg, #FAB216, #F28705);

  /* Legacy aliases (backwards compat) */
  --navy-900: #001f3a;
  --navy-700: #00274A;
  --navy-500: #003b66;
  --navy-300: #4a6b8a;
  --navy-100: #a9c0d6;
  --cream-900: #E6D9B8;
  --cream-700: #F4EBD3;
  --cream-100: #FBF7EE;
  --grey-900: #0f1720;
  --grey-700: #334155;
  --grey-500: #7b8794;
  --grey-300: #c7cbd1;
  --grey-100: #f3f4f6;
  --accent-orange: #F28705;
  --accent-teal:   #00A3B5;

  /* Semantic */
  --success: #2E8B57;
  --warning: #E6A700;
  --danger:  #D84747;

  /* UI tokens — now pointing to C13 dark values */
  --surface: var(--c13-bg);
  --text-on-surface: var(--c13-text);
  --text-on-dark: #FFFFFF;
  --muted: var(--c13-muted);

  /* Shadows — deeper for dark backgrounds */
  --shadow-1: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.4);
}

/* Utility classes — C13 Bold + Futuristic */
.btn-primary{
  background: var(--c13-grad);
  color: var(--c13-bg);
  border: 0;
  padding: 0.75rem 1.8rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(242,135,5,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(250,178,22,.35);
}

.btn-secondary{
  background: transparent;
  color: var(--c13-secondary);
  border: 1px solid rgba(250,178,22,.3);
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  font-weight: 600;
  transition: background .2s ease;
}
.btn-secondary:hover{
  background: rgba(250,178,22,.08);
}

.btn-accent{
  background: var(--c13-bg);
  color: var(--c13-secondary);
  padding: 0.7rem 1.6rem;
  border-radius: 50px;
  font-weight: 800;
}

/* Headings, text and body helpers */
.text-muted{ color: var(--c13-muted); font-size: .95rem; }
.lead{ color: var(--c13-muted); font-size:1.05rem; }

/* Small components */
.card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--c13-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-2);
}

/* Header dark helper */
.header-dark{
  background: linear-gradient(90deg, var(--c13-bg), var(--c13-bg-alt));
  color: var(--text-on-dark);
}

/* Brand gradient */
.brand-gradient{
  background: var(--c13-grad);
  color: var(--c13-bg);
}

/* Gradient text utility */
.gradient-text{
  background: var(--c13-grad-90);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accessibility notes:
   - C13 uses light text (#F0F0FF) on dark backgrounds (#0A0A14) — excellent contrast.
   - Gradient accent buttons: #F28705 on #0A0A14 passes WCAG AA.
*/