/*
 * FjordPuls: Base Styles & Design Tokens
 * File: fjordpuls.css
 * Description: Defines CSS custom properties (variables) for colors, fonts,
 * and sets global base styles for the entire site.
 */

/* -----------------------------------------
 * :root -> GLOBAL DESIGN TOKENS
 * ----------------------------------------- */
:root {
    /* Color Palette (Cold) */
    --color-primary: #0D2B45;       /* Midnight Blue */
    --color-secondary: #205D67;      /* Pine Green */
    --color-accent: #46C2CB;        /* Aurora Cyan */
    --color-background: #F0F4F8;    /* Glacier White */
    --color-surface: #FFFFFF;       /* Pure White for cards/modals */
    --color-text-primary: #1A1A1A;  /* Charcoal */
    --color-text-secondary: #5a6570;/* Muted Gray */
    --color-text-inverted: #FFFFFF; /* White text on dark backgrounds */
    --color-border: #E5E7EB;        /* Light Gray border */

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing & Sizing */
    --header-height: 80px;
    --container-padding: 1.5rem; /* 24px */
    --border-radius-md: 0.5rem;   /* 8px */
    --border-radius-lg: 0.75rem;  /* 12px */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* -----------------------------------------
 * BASE & ELEMENT STYLES
 * ----------------------------------------- */

/* Apply a natural box layout model to all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Enables smooth scrolling for anchor links */
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 80px); /* Offset for fixed header */
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/*
 * Note: Since Tailwind CSS is used, most element styling is done via utility classes.
 * These are fallback/base styles.
 */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 800; /* Extra-bold for headings by default */
    line-height: 1.2;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--color-accent);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    /* Provides default vertical spacing for all main sections */
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
}

/* -----------------------------------------
 * TAILWIND CSS CONFIGURATION (via @layer)
 * You can extend Tailwind's base styles or add new utilities here.
 * ----------------------------------------- */

@layer base {
    /* Example: Make all list items have a small margin */
    /* li {
        @apply mb-2;
    } */
}

@layer components {
    /*
     * Custom reusable components can be defined here.
     * Example: .btn-primary { @apply ... }
     * This will be done in fjordpuls1.css
    */
}

@layer utilities {
    /*
     * Custom utility classes.
     * Example: .text-shadow { text-shadow: ... }
    */
    .text-balance {
        text-wrap: balance;
    }
}