/* ================================================================
   BASE.CSS  —  Design Foundation
   Project T.A.H.I.T.I. Account Portal — Refactored CSS System
   ================================================================
   Load order in templates:
     1. base.css         ← you are here  (tokens + reset + typography)
     2. layout.css       (wrappers, grids, auth layouts)
     3. components.css   (buttons, cards, tables, modals …)
     4. utilities.css    (spacing, flex, display helpers)
     5. pages/[page].css (page-level overrides only)
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES  —  Design Tokens
   ================================================================ */
:root {
    /* ── Brand / Accent ── */
    --clr-accent:         #4f8ef7;   /* primary blue — slightly desaturated */
    --clr-accent-hover:   #3a7ae3;
    --clr-success:        #34c47c;
    --clr-success-faint:  rgba(52, 196, 124, 0.12);
    --clr-danger:         #e05263;
    --clr-danger-faint:   rgba(224, 82, 99, 0.12);
    --clr-warning:        #f0b429;
    --clr-warning-faint:  rgba(240, 180, 41, 0.12);
    --clr-info:           #4f8ef7;
    --clr-info-faint:     rgba(79, 142, 247, 0.12);

    /* ── Spacing Scale (rem) ── */
    --sp-1:   0.25rem;   /*  4px */
    --sp-2:   0.5rem;    /*  8px */
    --sp-3:   0.75rem;   /* 12px */
    --sp-4:   1rem;      /* 16px */
    --sp-5:   1.25rem;   /* 20px */
    --sp-6:   1.5rem;    /* 24px */
    --sp-8:   2rem;      /* 32px */
    --sp-10:  2.5rem;    /* 40px */
    --sp-12:  3rem;      /* 48px */

    /* ── Typography ── */
    --font-sans:   'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    --font-brand:  'VTF Justina HUM', 'Inter', Arial, sans-serif;
    --font-mono:   'Courier New', Courier, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.5rem;
    --line-height: 1.65;

    /* ── Border Radius ── */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-lg:  12px;
    --radius-xl:  18px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition:       all 0.2s ease;
    --transition-slow:  all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index layers ── */
    --z-base:    1;
    --z-header:  100;
    --z-toggle:  200;
    --z-modal:   1000;
    --z-toast:   2000;
}

/* ================================================================
   2. THEME TOKENS  —  Dark (default) & Light
   ================================================================
   Dark theme is the default in this portal.
   All colour references in components MUST use these variables.
   Raw hex values (#000, #fff) are FORBIDDEN in component CSS.
   ================================================================ */
:root,
[data-theme="dark"] {
    /* Backgrounds — avoid pure black; use warm near-blacks */
    --bg-page:       #16181d;   /* page background    */
    --bg-surface:    #1e2028;   /* cards, panels      */
    --bg-elevated:   #262931;   /* input fields, rows */
    --bg-overlay:    rgba(0, 0, 0, 0.60);  /* modal backdrops   */

    /* Text — avoid pure white; use off-white */
    --text-primary:  #e8eaf0;
    --text-secondary:#9aa3b5;
    --text-muted:    #6b7694;
    --text-inverse:  #16181d;

    /* Borders */
    --border:        #2e3240;
    --border-strong: #424a60;

    /* Interactive states */
    --hover-surface: #262931;
    --focus-ring:    rgba(79, 142, 247, 0.35);

    /* Shadows */
    --shadow-sm:  0 1px 4px  rgba(0,0,0,0.30);
    --shadow:     0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.55);

    /* Glass (for landing page) */
    --glass-bg:     rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.12);

    /* Scrollbar */
    --scrollbar-track: #16181d;
    --scrollbar-thumb: #2e3240;
}

[data-theme="light"] {
    --bg-page:       #f0f2f6;
    --bg-surface:    #ffffff;
    --bg-elevated:   #e8ecf2;
    --bg-overlay:    rgba(0, 0, 0, 0.45);

    --text-primary:  #1a1d2e;
    --text-secondary:#4e5673;
    --text-muted:    #7b829e;
    --text-inverse:  #f0f2f6;

    --border:        #d8dce8;
    --border-strong: #b8bdd0;

    --hover-surface: #edf0f6;
    --focus-ring:    rgba(79, 142, 247, 0.25);

    --shadow-sm:  0 1px 4px  rgba(0,0,0,0.08);
    --shadow:     0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.18);

    --glass-bg:     rgba(0,0,0,0.04);
    --glass-border: rgba(0,0,0,0.10);

    --scrollbar-track: #f0f2f6;
    --scrollbar-thumb: #d8dce8;
}

/* ================================================================
   3. RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
    -webkit-font-smoothing: antialiased;
}

/* ================================================================
   4. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ================================================================
   5. TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--sp-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base);}

/* Page title accent — replaces the raw [data-theme] h1 colour blocks
   scattered across legacy page CSS files */
h1 { color: var(--clr-accent); }
h2, h3 { color: var(--text-primary); }

p {
    margin-bottom: var(--sp-4);
    color: var(--text-secondary);
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
    color: var(--clr-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

strong, b { color: var(--text-primary); }

code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

code { padding: 0.15em 0.4em; }

pre {
    padding: var(--sp-4);
    overflow-x: auto;
    border: 1px solid var(--border);
}

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

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-6) 0;
}

/* ================================================================
   6. FORMS & INPUTS  (base layer — no page-specific hacks)
   ================================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    display: block;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-right: var(--sp-8);
    cursor: pointer;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

input[disabled],
select[disabled],
textarea[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark-mode select options (Firefox supports this) */
[data-theme="dark"] select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* ================================================================
   7. FOCUS VISIBLE  (accessibility)
   ================================================================ */
:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}