@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap');

/* =====================================================================
   YNetStudyHub — Brand design tokens (single source of truth)
   Brand: Navy #222f6e + Gold #edbe3c · Type: Inter
   Loaded globally via layout/head.blade.php. Use the CSS variables below
   instead of hard-coded hex values so the whole platform stays consistent.
   ===================================================================== */
:root {
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Brand */
    --brand:        #222f6e;   /* navy — primary */
    --brand-700:    #1a2456;   /* darker navy (hover/active) */
    --brand-600:    #2a3a86;
    --brand-300:    #5a67a8;   /* muted navy */
    --brand-50:     #eef1f9;   /* navy tint (backgrounds) */
    --brand-rgb:    34, 47, 110;

    /* Accent (gold) */
    --accent:       #edbe3c;
    --accent-600:   #d9a91f;   /* darker gold */
    --accent-50:    #fdf6e3;
    --accent-rgb:   237, 190, 60;

    /* Neutrals */
    --ink:          #1e293b;   /* headings/body */
    --muted:        #64748b;   /* secondary text */
    --line:         #e6e8f0;   /* borders */
    --surface:      #ffffff;   /* cards */
    --bg:           #f7f8fc;   /* page background */

    /* Shape & elevation */
    --radius-sm:    8px;
    --radius:       14px;
    --radius-lg:    18px;
    --shadow-sm:    0 1px 2px rgba(16,24,40,.05);
    --shadow:       0 8px 24px rgba(16,24,40,.10);
    --shadow-brand: 0 12px 28px rgba(var(--brand-rgb), .22);
    --shadow-accent:0 10px 24px rgba(var(--accent-rgb), .35);
}

/* ---- Bootstrap primary re-map → navy (affects public pages using BS 5.3) ---- */
:root {
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-700);
}
.bg-primary      { background-color: var(--brand) !important; }
.text-primary    { color: var(--brand) !important; }
.border-primary  { border-color: var(--brand) !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--brand) !important; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}

/* ---- Reusable brand components (framework-agnostic) ---- */
.btn-brand {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: var(--radius-sm);
    font-weight: 700; font-size: .95rem; line-height: 1;
    background: var(--brand); color: #fff !important; border: none;
    text-decoration: none; cursor: pointer;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-brand:hover { background: var(--brand-700); transform: translateY(-2px); box-shadow: var(--shadow-brand); }

.btn-accent {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: var(--radius-sm);
    font-weight: 700; font-size: .95rem; line-height: 1;
    background: var(--accent); color: var(--brand) !important; border: none;
    text-decoration: none; cursor: pointer;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-accent:hover { background: var(--accent-600); transform: translateY(-2px); box-shadow: var(--shadow-accent); }

.brand-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    background: var(--brand-50); color: var(--brand);
}
.brand-badge.accent { background: var(--accent-50); color: var(--accent-600); }

.brand-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---- Typography: one typeface platform-wide (Inter) ---- */
body,
.main,
.sidebar,
.header,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.card-title, .pagetitle h1, .nav-link, .btn {
    font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6, .pagetitle h1, .card-title {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}