/**
 * KabaTrak Design Tokens
 *
 * Token layers:
 * 1. Primitive tokens: raw colors, spacing, sizes, radii, shadows.
 * 2. Semantic tokens: UI intent such as surfaces, text, borders, feedback.
 * 3. Compatibility aliases: existing token names mapped to the new system.
 */

/* App-wide brand font. Loaded here (not dashboard.css) so every page —
   admin, youth, auth, profiling — renders the same family. */
@font-face {
    font-family: "Nunito Sans";
    src: url("../assets/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("../assets/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Primitive Typography
       Both family tokens point to Nunito Sans so the whole app renders one
       consistent family. System fallbacks kick in only if the woff fails. */
    --font-family-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-display: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Primitive Spacing */
    --space-0: 0px;
    --space-025: 2px;
    --space-050: 4px;
    --space-075: 6px;
    --space-100: 8px;
    --space-125: 10px;
    --space-150: 12px;
    --space-175: 14px;
    --space-200: 16px;
    --space-225: 18px;
    --space-250: 20px;
    --space-300: 24px;
    --space-350: 28px;
    --space-400: 32px;
    --space-450: 36px;
    --space-500: 40px;
    --space-550: 44px;
    --space-600: 48px;
    --space-700: 56px;
    /* Primitive Sizing */
    --size-icon-xs: 16px;
    --size-icon-sm: 18px;
    --size-icon-md: 20px;
    --size-icon-lg: 22px;
    --size-icon-xl: 24px;
    --size-control-compact: 33px;
    --size-control-sm: 40px;
    --size-control-md: 42px;
    --size-control-lg: 44px;
    --size-field-md: 50px;
    --size-field-lg: 56px;
    --size-avatar-md: 44px;
    --size-logo-md: 48px;
    --size-logo-lg: 60px;
    --layout-sidebar: 260px;
    --layout-sidebar-compact: 232px;
    --layout-card-sm: 420px;
    --layout-content-md: 1080px;
    --layout-content-lg: 1440px;
    --layout-auth-max: 1600px;
    --layout-reading-measure: 672px;
    /* Primitive Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 18px;
    --radius-3xl: 20px;
    --radius-4xl: 26px;
    --radius-full: 999px;
    /* Primitive Borders */
    --border-width-hairline: 0.5px;
    --border-width-thin: 1px;
    --border-width-medium: 1.5px;
    --border-width-thick: 2px;
    /* Primitive Elevation */
    --shadow-xs: 0 6px 14px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 6px 14px rgba(15, 23, 42, 0.12);
    --shadow-md: 0 8px 16px rgba(15, 23, 42, 0.16);
    --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 18px 40px rgba(15, 23, 42, 0.14);
    --shadow-2xl: 0 24px 60px rgba(15, 23, 42, 0.16);
    --shadow-focus-ring: 0 0 0 3px rgba(0, 62, 107, 0.18);
    /* Primitive Motion */
    --motion-duration-fast: 0.18s;
    --motion-duration-base: 0.2s;
    --motion-duration-slow: 0.3s;
    --motion-ease-standard: ease;
    --motion-ease-emphasized: ease-out;
    /* Primitive Layers */
    --z-base: 0;
    --z-content: 1;
    --z-sticky: 5;
    --z-overlay: 10;
    --z-dropdown: 20;
    /* Primitive Colors */
    --color-white: #FFFFFF;
    --color-neutral-50: #FAFAFA;
    --color-neutral-75: #FBFDFF;
    --color-neutral-100: #F8FBFE;
    --color-neutral-150: #F7F7F7;
    --color-neutral-200: #EEF3F8;
    --color-neutral-250: #E5E7EB;
    --color-neutral-300: #DFE6EF;
    --color-neutral-325: #E3E8EF;
    --color-neutral-350: #DCE6EF;
    --color-neutral-400: #D4E4F3;
    --color-neutral-450: #CED8E2;
    --color-neutral-500: #9CA3AF;
    --color-neutral-550: #8A96A3;
    --color-neutral-600: #7B8794;
    --color-neutral-650: #7A8794;
    --color-neutral-700: #6B7280;
    --color-neutral-750: #5F6B78;
    --color-neutral-800: #4B5563;
    --color-neutral-850: #425466;
    --color-neutral-900: #394552;
    --color-neutral-925: #1F2937;
    --color-neutral-950: #111827;
    --color-brand-50: #F3FBFF;
    --color-brand-75: #F3F8FE;
    --color-brand-100: #EEF5FF;
    --color-brand-150: #E7F1FA;
    --color-brand-300: #C7DBF7;
    --color-brand-400: #0288D1;
    --color-brand-500: #4D77FF;
    --color-brand-800: #1F5577;
    --color-brand-850: #1D4A7C;
    --color-brand-900: #003E6B;
    --color-teal-50: #F4FBFB;
    --color-teal-100: #EAF6F6;
    --color-teal-500: #19A7A2;
    --color-teal-600: #176966;
    --color-teal-700: #128C87;
    --color-teal-800: #1B4F4D;
    --color-green-500: #1AA86D;
    --color-green-600: #14A86A;
    --color-green-700: #0F6A48;
    --color-green-800: #1F5F3F;
    --color-green-900: #2E7D32;
    --color-yellow-100: #FFF6DB;
    --color-yellow-150: #FFF6E3;
    --color-yellow-300: #F3D7A6;
    --color-yellow-350: #F0DE9A;
    --color-yellow-500: #F7B801;
    --color-yellow-600: #F0A800;
    --color-yellow-800: #8B5E00;
    --color-yellow-900: #6A4A0F;
    --color-orange-500: #FB8500;
    --color-orange-600: #F38339;
    --color-orange-700: #C95A16;
    --color-pink-500: #E449FF;
    --color-violet-500: #6A67FF;
    --color-violet-600: #7B8FFF;
    --color-purple-700: #9440AD;
    --color-red-100: #FFF1F2;
    --color-red-150: #FFF0F0;
    --color-red-300: #F6C6CC;
    --color-red-400: #E9A6B0;
    --color-red-500: #E18694;
    --color-red-700: #D32F2F;
    --color-red-900: #9A1C1C;
    --color-red-950: #7A1F2C;
    --color-alpha-white-70: rgba(255, 255, 255, 0.7);
    --color-alpha-white-95: rgba(243, 248, 254, 0.95);
    --color-alpha-brand-12: rgba(0, 62, 107, 0.12);
    --color-alpha-brand-18: rgba(0, 62, 107, 0.18);
    --color-alpha-brand-20: rgba(0, 62, 107, 0.2);
    --color-alpha-teal-10: rgba(25, 167, 162, 0.1);
    --color-alpha-teal-12: rgba(25, 167, 162, 0.12);
    --color-alpha-teal-18: rgba(25, 167, 162, 0.18);
    --color-alpha-teal-20: rgba(25, 167, 162, 0.2);
    --color-alpha-teal-25: rgba(25, 167, 162, 0.25);
    --color-alpha-teal-35: rgba(25, 167, 162, 0.35);
    --color-alpha-teal-50: rgba(25, 167, 162, 0.5);
    --color-alpha-teal-55: rgba(25, 167, 162, 0.55);
    --color-alpha-orange-22: rgba(255, 168, 124, 0.22);
    --color-alpha-yellow-20: rgba(255, 196, 82, 0.2);
    --color-alpha-yellow-72: rgba(255, 236, 179, 0.72);
    --color-alpha-blue-12: rgba(77, 119, 255, 0.12);
    --color-alpha-blue-16: rgba(77, 119, 255, 0.16);
    --color-alpha-violet-18: rgba(118, 116, 255, 0.18);
    --color-alpha-pink-16: rgba(228, 73, 255, 0.16);
    --color-alpha-green-20: rgba(94, 217, 161, 0.2);
    --color-alpha-green-25: rgba(94, 217, 161, 0.25);
    --color-alpha-grid-x: rgba(148, 163, 184, 0.35);
    --color-alpha-grid-y: rgba(148, 163, 184, 0.4);
    --color-alpha-bar: rgba(123, 143, 255, 0.8);
    --color-alpha-warning-border: rgba(240, 173, 0, 0.35);
    --color-alpha-surface-translucent: rgba(255, 255, 255, 0.72);
    /* Semantic Foundations */
    --color-background-page: var(--color-brand-50);
    --color-background-subtle: var(--color-brand-150);
    --color-background-surface: var(--color-white);
    --color-background-surface-muted: var(--color-brand-75);
    --color-background-surface-translucent: var(--color-alpha-surface-translucent);
    --color-background-header-start: var(--color-alpha-white-70);
    --color-background-header-end: var(--color-alpha-white-95);
    --color-background-pill: var(--color-alpha-white-70);
    --color-text-primary: var(--color-neutral-950);
    --color-text-secondary: var(--color-neutral-800);
    --color-text-header-meta: var(--color-neutral-800);
    --color-text-tertiary: var(--color-neutral-700);
    --color-text-heading: var(--color-neutral-925);
    --color-text-brand: var(--color-brand-900);
    --color-text-link: var(--color-brand-900);
    --color-text-inverse: var(--color-white);
    --color-border-strong: var(--color-neutral-500);
    --color-border-default: var(--color-neutral-250);
    --color-border-card: var(--color-neutral-400);
    --color-border-header: rgba(212, 228, 243, 0.8);
    --color-border-pill: var(--color-alpha-brand-20);
    --color-border-input-default: var(--color-neutral-800);
    --color-border-input-focus: var(--color-neutral-950);
    --color-border-input-error: var(--color-red-400);
    --color-border-input-error-focus: var(--color-red-500);
    --color-icon-default: var(--color-neutral-800);
    --color-icon-active: var(--color-brand-900);
    --color-icon-muted: var(--color-neutral-250);
    --color-icon-inverse: var(--color-white);
    --color-icon-check: var(--color-green-900);
    --color-icon-alert: var(--color-red-700);
    --color-icon-pending: var(--color-yellow-500);
    --color-icon-pending-strong: var(--color-orange-500);
    --color-feedback-surface: var(--color-neutral-150);
    --color-feedback-success-bg: #E8F7EE;
    --color-feedback-success-border: #BFE7CF;
    --color-feedback-success-text: var(--color-green-800);
    --color-feedback-error-bg: var(--color-red-100);
    --color-feedback-error-border: var(--color-red-300);
    --color-feedback-error-text: var(--color-red-950);
    --color-feedback-warning-bg: var(--color-yellow-150);
    --color-feedback-warning-border: var(--color-yellow-300);
    --color-feedback-warning-text: var(--color-yellow-900);
    --color-feedback-info-bg: var(--color-brand-100);
    --color-feedback-info-border: var(--color-brand-300);
    --color-feedback-info-text: var(--color-brand-850);
    --color-status-success: var(--color-green-900);
    --color-status-warning: var(--color-yellow-500);
    --color-status-error: var(--color-red-700);
    --color-status-info: #219EBC;
    --color-status-pending-bg: var(--color-alpha-yellow-72);
    --color-status-pending-border: var(--color-alpha-warning-border);
    --color-status-pending-text: var(--color-yellow-800);
    --color-status-review-bg: var(--color-alpha-orange-22);
    --color-status-review-text: var(--color-orange-700);
    --color-status-progress-bg: var(--color-alpha-blue-16);
    --color-status-progress-text: #355AC7;
    --color-status-returned-bg: var(--color-alpha-pink-16);
    --color-status-returned-text: var(--color-purple-700);
    --color-status-verified-bg: var(--color-alpha-green-20);
    --color-status-verified-text: #0D8C57;
    --color-status-neutral-bg: var(--color-neutral-200);
    --color-status-neutral-text: #4C6273;
    --gradient-surface-card: linear-gradient(180deg, var(--color-background-surface) 0%, var(--color-background-surface-muted) 100%);
    --gradient-surface-header: linear-gradient(90deg, var(--color-background-header-start), var(--color-background-header-end));
    --shadow-surface-subtle: var(--shadow-xs);
    --shadow-surface-card: var(--shadow-xl);
    --shadow-surface-float-sm: var(--shadow-sm);
    --shadow-surface-float-md: var(--shadow-md);
    --shadow-surface-overlay: var(--shadow-2xl);
    --shadow-focus: var(--shadow-focus-ring);
    /* Semantic Dashboard Tokens */
    --dashboard-bg: var(--color-background-page);
    --dashboard-sidebar: #F9FCFF;
    --dashboard-panel: var(--color-background-surface);
    --dashboard-border: #E3EBF3;
    --dashboard-input-border: var(--color-neutral-350);
    --dashboard-search-border: var(--color-neutral-325);
    --dashboard-shadow: var(--shadow-lg);
    --dashboard-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.06);
    --dashboard-shadow-active: 0 10px 20px rgba(25, 167, 162, 0.25);
    --dashboard-muted: var(--color-neutral-750);
    --dashboard-muted-light: var(--color-neutral-550);
    --dashboard-placeholder: #9AA5B1;
    --dashboard-teal: var(--color-teal-500);
    --dashboard-teal-dark: var(--color-teal-700);
    --dashboard-teal-text: var(--color-teal-600);
    --dashboard-teal-hover: var(--color-teal-800);
    --dashboard-filter-text: #365064;
    --dashboard-filter-border-hover: #BFD8D6;
    --dashboard-blue: var(--color-brand-500);
    --dashboard-pink: var(--color-pink-500);
    --dashboard-green: var(--color-green-500);
    --dashboard-row-hover: #F8FCFF;
    --dashboard-table-header: var(--color-neutral-100);
    --dashboard-table-divider: #EDF2F7;
    --dashboard-input-text: var(--color-neutral-850);
    --dashboard-pill-border: var(--color-alpha-teal-20);
    --dashboard-pill-shadow: var(--shadow-xs);
    --dashboard-action-bg: var(--color-alpha-teal-10);
    --dashboard-action-bg-hover: var(--color-alpha-teal-18);
    --dashboard-action-border: var(--color-alpha-teal-35);
    --dashboard-action-border-hover: var(--color-alpha-teal-55);
    --dashboard-focus-shadow: 0 0 0 3px rgba(25, 167, 162, 0.12);
    --dashboard-orb-teal: var(--color-alpha-teal-12);
    --dashboard-orb-blue: var(--color-alpha-blue-12);
    --dashboard-grid-x: var(--color-alpha-grid-x);
    --dashboard-grid-y: var(--color-alpha-grid-y);
    --dashboard-chart-bar: var(--color-alpha-bar);
    --dashboard-donut-text: #66717D;
    --dashboard-notice-warning-bg: var(--color-yellow-100);
    --dashboard-notice-warning-border: var(--color-yellow-350);
    --dashboard-notice-warning-text: var(--color-yellow-800);
    --dashboard-notice-success-bg: #EBFFF6;
    --dashboard-notice-success-border: #B9EDD2;
    --dashboard-notice-success-text: var(--color-green-700);
    --dashboard-notice-error-bg: var(--color-red-150);
    --dashboard-notice-error-border: #EFC2C2;
    --dashboard-notice-error-text: var(--color-red-900);
    --gradient-dashboard-canvas: radial-gradient(900px 500px at 15% 10%, #F8FCFF 0%, #F2F7FC 55%, #EEF4FA 100%);
    /* Compatibility Aliases */
    --bg-page: var(--color-background-page);
    --bg-subtle: var(--color-background-subtle);
    --bg-surface: var(--color-background-surface);
    --bg-card-start: var(--color-background-surface);
    --bg-card-end: var(--color-background-surface-muted);
    --bg-header-start: var(--color-background-header-start);
    --bg-header-end: var(--color-background-header-end);
    --bg-pill: var(--color-background-pill);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-header-meta: var(--color-text-header-meta);
    --text-tertiary: var(--color-text-tertiary);
    --text-link: var(--color-text-link);
    --text-brand: var(--color-text-brand);
    --text-heading: var(--color-text-heading);
    --message-surface: var(--color-feedback-surface);
    --message-success-bg: var(--color-feedback-success-bg);
    --message-success-border: var(--color-feedback-success-border);
    --message-success-text: var(--color-feedback-success-text);
    --message-error-bg: var(--color-feedback-error-bg);
    --message-error-border: var(--color-feedback-error-border);
    --message-error-text: var(--color-feedback-error-text);
    --message-warning-bg: var(--color-feedback-warning-bg);
    --message-warning-border: var(--color-feedback-warning-border);
    --message-warning-text: var(--color-feedback-warning-text);
    --message-info-bg: var(--color-feedback-info-bg);
    --message-info-border: var(--color-feedback-info-border);
    --message-info-text: var(--color-feedback-info-text);
    --status-success: var(--color-status-success);
    --status-warning: var(--color-status-warning);
    --status-error: var(--color-status-error);
    --status-info: var(--color-status-info);
    --input-border-primary: var(--color-border-input-default);
    --input-border-secondary: var(--color-border-input-focus);
    --input-error-border: var(--color-border-input-error);
    --input-error-bg: #FFF6F7;
    --input-error-border-focus: var(--color-border-input-error-focus);
    --icon-default: var(--color-icon-default);
    --icon-active: var(--color-icon-active);
    --icon-muted: var(--color-icon-muted);
    --icon-inverse: var(--color-icon-inverse);
    --icon-check: var(--color-icon-check);
    --icon-alert: var(--color-icon-alert);
    --icon-pending: var(--color-icon-pending);
    --icon-pending-strong: var(--color-icon-pending-strong);
    --line-strong: var(--color-border-strong);
    --line-default: var(--color-neutral-50);
    --line-divider: var(--color-border-default);
    --border-card: var(--color-border-card);
    --border-header: var(--color-border-header);
    --border-pill: var(--color-border-pill);
    --glow-brand-strong: var(--color-alpha-brand-18);
    --glow-brand-soft: var(--color-alpha-brand-12);
    --shadow-elevated: 0 6px 16px rgba(15, 23, 42, 0.06);
    --shadow-card: var(--shadow-surface-card);
    --shadow-float-sm: var(--shadow-surface-float-sm);
    --shadow-float-md: var(--shadow-surface-float-md);
}

/* ============================================================
   ADMIN ANNOUNCEMENTS REDESIGN TOKENS
   Strictly additive. No existing token above is modified.
   Used only by the barangay announcements page (body.ann-page).
   ============================================================ */
:root {
    /* Tightened radii used on the announcements page only.
       Existing --radius-* tokens stay unchanged for other pages. */
    --radius-ann-input: 4px;
    --radius-ann-card: 6px;
    --radius-ann-control: 8px;
    /* Tightened, named status palette for announcement state pills. */
    --color-status-published-bg: #DCF5E5;
    --color-status-published-text: #1F6B33;
    --color-status-published-dot: #2E7D32;
    --color-status-draft-bg: #FFF1D6;
    --color-status-draft-text: #8A5A00;
    --color-status-draft-dot: #C2841B;
    --color-status-archived-bg: #ECEEF1;
    --color-status-archived-text: #4B5563;
    --color-status-archived-dot: #6B7280;
    --color-status-expired-bg: #FDE2E2;
    --color-status-expired-text: #9A1F1F;
    --color-status-expired-dot: #D32F2F;
    /* KPI tile icon backgrounds for the four announcement quick-info tiles. */
    --color-kpi-icon-violet-bg: #EEEAFE;
    --color-kpi-icon-violet-text: #6E59E0;
    --color-kpi-icon-amber-bg: #FFF1D6;
    --color-kpi-icon-amber-text: #B07700;
    --color-kpi-icon-tangerine-bg: #FFE7D9;
    --color-kpi-icon-tangerine-text: #C2410C;
    /* Modal / overlay / toast surfaces. */
    --color-overlay-modal: rgba(11, 18, 32, 0.45);
    --color-toast-bg: #0B3B33;
    --color-toast-text: #FFFFFF;
    /* Restrained shadow set — KPI tiles, primary buttons, and active
       states deliberately sit flat on hairline borders. */
    --shadow-flat-hairline: 0 1px 0 rgba(15, 23, 42, 0.04);
    --shadow-modal: 0 8px 24px rgba(11, 18, 32, 0.18);
    --shadow-focus-teal: 0 0 0 3px rgba(0, 182, 155, 0.18);
    /* Missing 300 step in the teal ramp, used by the edit-button border. */
    --color-teal-300: #5BD1B2;
}

/* ============================================================
   MOBILE UI KIT TOKENS — Phase 1
   These values are added by the KabaTrak Mobile UI Kit and are
   used only by the redesigned Youth mobile pages. They are
   strictly additive; no existing token above is modified.
   ============================================================ */
:root {
    /* Mobile canvas reference (kit is designed at 360px) */
    --mobile-canvas-max: 480px;
    /* Welcome banner — rounded-bottom hero used on Youth Home */
    --radius-banner: 32px;
    /* Bottom tab bar (mobile/tablet only; hidden on desktop) */
    --tabbar-height: 64px;
    --tabbar-bg: var(--color-background-surface);
    --tabbar-border: var(--color-border-default);
    --tabbar-icon-size: 24px;
    --tabbar-color-active: var(--color-brand-900);
    --tabbar-color-inactive: var(--color-neutral-800);
    --tabbar-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    /* Category badge palette — taken from the Mobile UI Kit
       (used on announcements, events, programs, projects).
       Each pair is a soft tinted background + accessible foreground. */
    --badge-meeting-bg: #E7F1FA;
    --badge-meeting-text: #003E6B;
    --badge-health-bg: #DCFCF5;
    --badge-health-text: #00826E;
    --badge-sports-bg: #FFF3DC;
    --badge-sports-text: #B46E00;
    --badge-community-bg: #EDE9FE;
    --badge-community-text: #4C1D95;
    --badge-default-bg: var(--color-neutral-200);
    --badge-default-text: var(--color-text-secondary);
    /* High-contrast "NEW" pill for fresh announcements/events */
    --badge-new-bg: var(--color-teal-700);
    --badge-new-text: var(--color-text-inverse);
    /* Coming Soon placeholder cards (Discover row on Home) */
    --coming-soon-bg: var(--color-background-subtle);
    --coming-soon-border: var(--color-border-default);
    --coming-soon-title: var(--color-text-heading);
    --coming-soon-meta: var(--color-text-secondary);
    --coming-soon-pill-bg: var(--color-background-surface);
    --coming-soon-pill-text: var(--color-text-link);
}