/* ═══════════════════════════════════════════════════════════
   Capplon Design System — Design Tokens
   Extracted faithfully from the TNonline web UI.
   "Scandinavian Industrial" — warm charcoal + deep teal.

   Every value below is a CSS custom property. Components in
   components/*.css reference these exclusively, so a single
   change here re-themes the whole system.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Primary — deep charcoal with warmth ── */
    --tn-primary: #1A1D23;
    --tn-primary-light: #24272E;
    --tn-primary-dark: #111318;

    /* ── Accent — deep teal, industrial, confident ── */
    --tn-accent: #0D7377;
    --tn-accent-hover: #0A5C5F;
    --tn-accent-active: #084E51;
    --tn-accent-light: #EFFAFA;

    /* ── Status colors — muted, professional ── */
    --tn-success: #2D8B4E;
    --tn-success-light: #F0F9F3;
    --tn-success-text: #276749;
    --tn-warning: #B8860B;
    --tn-warning-light: #FDF8EC;
    --tn-warning-text: #92400E;
    --tn-danger: #C53030;
    --tn-danger-light: #FDF2F2;
    --tn-danger-text: #9B2C2C;
    --tn-info: #0D7377;
    --tn-info-light: #EFFAFA;

    /* ── Text — warm, readable ── */
    --tn-text-primary: #1A1A1A;
    --tn-text-secondary: #5F6368;
    --tn-text-muted: #9AA0A6;
    --tn-text-on-dark: #B8BCC2;
    --tn-text-on-dark-bright: #ECEEF0;

    /* ── Backgrounds — warm neutrals ── */
    --tn-bg-page: #F5F5F3;
    --tn-bg-card: #FFFFFF;
    --tn-bg-hover: #FAFAF8;
    --tn-bg-active: #EFFAFA;

    /* ── Borders — clean, warm ── */
    --tn-border: #E3E3E0;
    --tn-border-light: #F0F0EE;

    /* ── Sidebar ── */
    --tn-sidebar-width: 252px;
    --tn-sidebar-bg: #1A1D23;
    --tn-sidebar-hover: rgba(255, 255, 255, 0.06);
    --tn-sidebar-active: rgba(13, 115, 119, 0.25);

    /* ── Shadows — subtle, grounded ── */
    --tn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --tn-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --tn-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --tn-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

    /* ── Radius — angular, industrial ── */
    --tn-radius-sm: 3px;
    --tn-radius: 6px;
    --tn-radius-lg: 8px;
    --tn-radius-xl: 10px;

    /* ── Spacing — 8px base ── */
    --tn-space-xs: 4px;
    --tn-space-sm: 8px;
    --tn-space-md: 16px;
    --tn-space-lg: 24px;
    --tn-space-xl: 32px;

    /* ── Page gutter — horizontal padding for page content.
       The single source of truth for "how far content sits from the
       screen edge". Tapers on phones (override below) so the whole UI
       tightens at once, and .tn-bleed-mobile cancels exactly this. ── */
    --tn-page-pad-x: var(--tn-space-lg); /* 24px on desktop */

    /* ── Typography — Figtree: warm geometric, professional ── */
    --tn-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tn-font-mono: 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
    --tn-font-size-xs: 0.75rem;     /* 12px */
    --tn-font-size-sm: 0.8125rem;   /* 13px */
    --tn-font-size-base: 0.9375rem; /* 15px */
    --tn-font-size-lg: 1.0625rem;   /* 17px */
    --tn-font-size-xl: 1.1875rem;   /* 19px */
    --tn-font-size-2xl: 1.375rem;   /* 22px */
    --tn-font-size-3xl: 1.75rem;    /* 28px */

    /* ── Transitions — quick, purposeful ── */
    --tn-transition: 0.15s ease;
    --tn-transition-slow: 0.25s ease;
}

/* On phones the page gutter tightens to 16px (== Bootstrap px-3), so
   content sits closer to the edge and the whole UI feels denser. */
@media (max-width: 640px) {
    :root {
        --tn-page-pad-x: var(--tn-space-md); /* 16px */
    }
}

/* ═══════════════════════════════════════════════════════════
   Reset & Base — minimal, opinionated
   ═══════════════════════════════════════════════════════════ */

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

html, body {
    font-family: var(--tn-font-family);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
    background-color: var(--tn-bg-page);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a {
    color: var(--tn-accent);
    text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--tn-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Shared focus ring for interactive elements */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* Thin, unobtrusive scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--tn-text-muted);
    border-radius: 3px;
}

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