/* ============================================================
   lib/styles/global.css — Fishermens Academy Global Styles
   Layer 1: CSS custom properties, resets, base typography,
   and utility classes. Loaded first in index.html.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

:root {
    /* Brand — Primary */
    --color-harbor-blue: #1A365D;
    --color-sunrise-gold: #D69E2E;

    /* Brand — Secondary */
    --color-clay-terra: #C05621;
    --color-success-green: #2F855A;
    --color-alert-crimson: #C53030;

    /* Neutral Palette */
    --color-alabaster-white: #F8F9FA;
    --color-slate-gray: #4A5568;
    --color-dark-charcoal: #1A202C;
    --color-white: #FFFFFF;

    /* Hover / Interactive Variants */
    --color-blue-hover: #102A4C;
    --color-gold-hover: #ECC94B;
    --color-gold-active: #B7791F;

    /* Typography */
    --font-heading: 'Merriweather', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Heading Sizes — Mobile First */
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;

    /* Body Sizes */
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 12px;
    --fs-button: 16px;

    /* Line Heights */
    --lh-heading-1: 1.3;
    --lh-heading-2: 1.35;
    --lh-heading-3: 1.4;
    --lh-heading-4: 1.45;
    --lh-body: 1.6;
    --lh-small: 1.5;
    --lh-label: 1.4;

    /* Letter Spacing */
    --ls-h1: -0.5px;
    --ls-h2: -0.25px;
    --ls-button: 0.5px;

    /* Spacing Scale (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Container Padding — Mobile First */
    --container-padding: 24px;

    /* Max Content Width */
    --max-content-width: 1200px;

    /* Border Radius - Brand Specific */
    --radius-admin: 4px;
    /* Data density */
    --radius-student: 8px;
    /* Compassion / Softness */
    --radius-full: 9999px;

    /* Accessibility Minimums */
    --min-touch-target: 44px;

    /* Shadows */
    --shadow-soft: 0px 4px 12px rgba(26, 54, 93, 0.08);
    --shadow-hover: 0px 8px 24px rgba(26, 54, 93, 0.12);
    --shadow-admin: 0px 2px 4px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;

    /* Focus Outline - Accessibility */
    --focus-outline: 2px solid var(--color-sunrise-gold);
    --focus-offset: 4px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-above: 10;
    --z-navbar: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* ==========================================================================
   2. BOX MODEL RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   3. BASE HTML
   ========================================================================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--color-alabaster-white);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-dark-charcoal);
    background-color: var(--color-alabaster-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ==========================================================================
   4. TYPOGRAPHY — BASE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-harbor-blue);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading-1);
    letter-spacing: var(--ls-h1);
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading-2);
    letter-spacing: var(--ls-h2);
    margin-top: var(--space-xl);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading-3);
    margin-top: var(--space-lg);
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-heading-4);
}

p {
    color: var(--color-slate-gray);
    margin-bottom: var(--space-md);
    max-width: 70ch;
}

small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-slate-gray);
}

strong,
b {
    font-weight: var(--fw-semibold);
    color: var(--color-dark-charcoal);
}

/* ==========================================================================
   5. LINKS & INTERACTIVITY
   ========================================================================== */

a {
    color: var(--color-harbor-blue);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-sunrise-gold);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-admin);
    /* fallback radius for outline */
}

/* ==========================================================================
   6. LISTS
   ========================================================================== */

ul,
ol {
    padding-left: var(--space-lg);
    color: var(--color-slate-gray);
}

li {
    margin-bottom: var(--space-sm);
    line-height: var(--lh-body);
}

/* ==========================================================================
   7. IMAGES & MEDIA
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    object-fit: cover;
    border-radius: var(--radius-student);
}

/* ==========================================================================
   8. FORMS — BASE RESETS
   ========================================================================== */

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
}

button,
a.button-link {
    cursor: pointer;
    border: none;
    background: none;
    min-height: var(--min-touch-target);
    /* Accessibility touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   9. HORIZONTAL RULE
   ========================================================================== */

hr {
    border: none;
    border-top: 1px solid var(--color-slate-gray);
    opacity: 0.2;
    margin: var(--space-2xl) 0;
}

/* ==========================================================================
   10. SELECTION & SCROLLBAR
   ========================================================================== */

::selection {
    background-color: var(--color-sunrise-gold);
    color: var(--color-harbor-blue);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-alabaster-white);
}

::-webkit-scrollbar-thumb {
    background: var(--color-slate-gray);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-harbor-blue);
}

/* ==========================================================================
   11. UTILITY CLASSES
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only--focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Typography Utilities */
.text-blue {
    color: var(--color-harbor-blue);
}

.text-gold {
    color: var(--color-sunrise-gold);
}

.text-crimson {
    color: var(--color-alert-crimson);
}

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

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

/* Layout Utilities */
.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Noscript Fallback */
.noscript-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-3xl) var(--container-padding);
    text-align: center;
    background-color: var(--color-harbor-blue);
    color: var(--color-alabaster-white);
}

.noscript-fallback h1 {
    color: var(--color-sunrise-gold);
    margin-bottom: var(--space-md);
}

.noscript-fallback p {
    color: var(--color-alabaster-white);
    max-width: 480px;
}

.noscript-fallback a {
    color: var(--color-sunrise-gold);
    text-decoration: underline;
}