/* 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 */
:root{
  /* Brand core (provided) */
  --cc-navy: #00274A;
  --cc-cream: #F4EBD3;

  /* Navy family (shades) */
  --navy-900: #001f3a;
  --navy-700: #00274A; /* alias for --cc-navy */
  --navy-500: #003b66;
  --navy-300: #4a6b8a;
  --navy-100: #a9c0d6;

  /* Cream family (tints) */
  --cream-900: #E6D9B8;
  --cream-700: #F4EBD3; /* alias for --cc-cream */
  --cream-100: #FBF7EE;

  /* Neutrals */
  --grey-900: #0f1720;
  --grey-700: #334155;
  --grey-500: #7b8794;
  --grey-300: #c7cbd1;
  --grey-100: #f3f4f6;

  /* Accent colors */
  --accent-orange: #F28705;
  --accent-teal:   #00A3B5;

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

  /* UI tokens */
  --surface: var(--cream-100);
  --text-on-surface: var(--grey-900);
  --text-on-dark: #FFFFFF;
  --muted: var(--grey-500);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-2: 0 6px 18px rgba(2,7,12,0.12);
}

/* Utility classes based on palette (examples) */
.btn-primary{
  background: var(--navy-700);
  color: var(--text-on-dark);
  border: 0;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform: translateY(-1px); background: var(--navy-500); }

.btn-secondary{
  background: var(--cream-700);
  color: var(--navy-700);
  border: 1px solid var(--navy-300);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
}
.btn-accent{
  background: var(--accent-orange);
  color: var(--text-on-dark);
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
}

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

/* Small components */
.card{
  background: var(--cream-700);
  border: 1px solid var(--grey-300);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-2);
}

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

/* Brand gradient */
.brand-gradient{
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--accent-teal) 100%);
  color: var(--text-on-dark);
}

/* Accessibility notes:
   - Avoid using --accent-orange or --accent-teal as body text on cream background (insufficient contrast).
   - Use navy or grey-900 for text on cream backgrounds.
*/