READERS DIGEST ONLINE

/**

• Global Colour Scheme: Coffee Inspired
  **/

/* Primary Coffee Colours / :root { –coffee-dark-brown: #4B2E14; / Dark Roast / –coffee-medium-brown: #6F4E37; / Medium Roast / –coffee-light-brown: #D2B48C; / Light Roast / –coffee-cream: #F3E9DC; / Creamy Coffee / –coffee-mocha: #837060; / Mocha Shade */

/* Contrasting Borders / –border-dark: #2C1A0A; / Very Dark Brown for strong border / –border-light: #A67B5B; / Lighter border for subtle contrast */

/* Tasteful Contrasting Shades / –contrast-olive: #556B2F; / Deep Olive Green / –contrast-soft-blue: #6B8EAD; / Muted Blue / –contrast-warm-gray: #8B8C89; / Warm Gray / –contrast-terracotta: #D05C3F; / Warm Terracotta */
}

/* Usage Examples */

body {
background-color: var(–coffee-cream);
color: var(–coffee-dark-brown);
border: 2px solid var(–border-light);
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

header, footer {
background-color: var(–coffee-medium-brown);
color: var(–coffee-cream);
border-bottom: 3px solid var(–border-dark);
}

button {
background-color: var(–coffee-mocha);
color: var(–coffee-cream);
border: 2px solid var(–border-dark);
transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
background-color: var(–contrast-terracotta);
color: var(–coffee-cream);
border-color: var(–contrast-soft-blue);
}

a {
color: var(–contrast-soft-blue);
text-decoration: none;
border-bottom: 1px solid var(–contrast-soft-blue);
}

a:hover {
color: var(–contrast-terracotta);
border-bottom-color: var(–contrast-terracotta);
}

.card {
background-color: var(–coffee-light-brown);
border: 1px solid var(–border-dark);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: var(–coffee-dark-brown);
padding: 1rem;
border-radius: 8px;
}

.alert {
background-color: var(–contrast-olive);
color: var(–coffee-cream);
border: 2px solid var(–border-dark);
padding: 1rem;
border-radius: 4px;
}