/**
 * Yono Apps Hub — brand tokens
 * Direction: ink + teal + gold (logo accent). Avoids purple-on-white AI look.
 * Fonts loaded via <link> in header.php for better LCP / SEO performance.
 */
:root {
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;

    /* Type scale — readable on phone, clear hierarchy */
    --text-xs: 0.8125rem;   /* 13px — labels / meta */
    --text-sm: 0.875rem;    /* 14px — secondary UI */
    --text-base: 1rem;      /* 16px — body / list titles */
    --text-md: 1.0625rem;   /* 17px — emphasis */
    --text-lg: 1.1875rem;   /* 19px — section heads */
    --text-xl: 1.375rem;    /* 22px — page titles */
    --leading-body: 1.55;
    --leading-tight: 1.25;

    --bg-body: #EEF2F4;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F7F9FA;
    --text-dark: #0B1220;
    --text-main: #0B1220;
    --text-muted: #5B6575;

    --brand-primary: #0F766E;
    --brand-primary-dark: #0D5C56;
    --brand-primary-deep: #134E4A;
    --brand-secondary: #14B8A6;
    --brand-accent: #F5B800;
    --brand-accent-deep: #E8910C;

    --brand-gradient: linear-gradient(135deg, #14B8A6 0%, #0F766E 55%, #0D5C56 100%);
    --brand-gradient-hero: linear-gradient(135deg, #2DD4BF 0%, #0F766E 100%);
    --brand-accent-gradient: linear-gradient(135deg, #F5B800 0%, #E8910C 100%);
    --brand-gradient-wide: linear-gradient(135deg, #2DD4BF 0%, #0F766E 50%, #134E4A 100%);

    --brand-shadow: rgba(15, 118, 110, 0.28);
    --brand-shadow-soft: rgba(15, 118, 110, 0.14);
    --brand-glow: rgba(15, 118, 110, 0.35);
    --brand-glow-strong: rgba(15, 118, 110, 0.45);
    --brand-glow-medium: rgba(15, 118, 110, 0.22);
    --brand-glow-light: rgba(15, 118, 110, 0.12);
    --brand-glow-faint: rgba(15, 118, 110, 0.06);
    --brand-glow-subtle: rgba(15, 118, 110, 0.05);
    --brand-glow-border: rgba(15, 118, 110, 0.14);
    --brand-surface: #F0FDFA;
    --brand-surface-border: #99F6E4;

    --hot-bg: #FFFBEB;
    --hot-border: #FCD34D;
    --hot-text: #B45309;
    --new-bg: #ECFDF5;
    --new-border: #6EE7B7;
    --new-text: #047857;

    --border: #E2E8F0;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-soft: 0 8px 24px rgba(11, 18, 32, 0.04);
    --header-height: 72px;
    --transition-smooth: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}