/*
    cf-scheme.css

    This file defines custom CSS variables for Cloudflare branding colors
    and can be used to add more specific styles not covered by Tailwind CSS.
*/

/* Define Cloudflare-specific color palette using CSS variables */
:root {
    --cloudflare-blue: #F38020; /* Cloudflare Orange - Primary Accent */
    --cloudflare-dark-blue: #0A0F17; /* Dark Blue - Background/Text */
    --cloudflare-light-gray: #f7f7f7; /* Light Gray - Section Background */
    --cloudflare-text-color: #262626; /* Dark Gray - Main Text */
    --cloudflare-white: #ffffff; /* White */
    --cloudflare-gray-text: #6b7280; /* Medium Gray - Secondary Text */
}

/* Base body styling (though much is handled by Tailwind in index.html) */
body {
    font-family: 'Inter', sans-serif; /* Cloudflare often uses Inter or similar sans-serif fonts */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--cloudflare-text-color); /* Default text color */
    background-color: var(--cloudflare-dark-blue); /* Default background color */
}

/* Header specific styles */
.header-bg {
    background-color: var(--cloudflare-blue); /* Cloudflare Orange for header */
}

/* Section background colors */
.section-bg-light {
    background-color: var(--cloudflare-light-gray); /* Light background for alternating sections */
}

.section-bg-dark {
    background-color: var(--cloudflare-dark-blue); /* Dark background for alternating sections */
}

/* Text colors based on brand */
.text-cloudflare-blue {
    color: var(--cloudflare-blue); /* Use for headings or important text */
}

.text-cloudflare-white {
    color: var(--cloudflare-white);
}

.text-cloudflare-gray {
    color: var(--cloudflare-gray-text);
}

/* Primary Button styles */
.btn-primary {
    background-color: var(--cloudflare-blue);
    color: var(--cloudflare-white);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* For proper padding and margin */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Tailwind classes handle padding, border-radius, font-weight, but can be overridden here */
}

.btn-primary:hover {
    background-color: #e06d1c; /* Slightly darker orange on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.btn-primary:active {
    transform: translateY(0); /* Return to original position on click */
}

/* Additional utility classes can be added here if needed */
/* For example, specific shadow effects or borders */
.shadow-custom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments can also be placed here if Tailwind's default
   breakpoints are not sufficient, but for this demo, Tailwind handles most. */