/* ═══════════════════════════════════════════════════════
   GOrecruitAI – Design Tokens  (single source of truth)
   ═══════════════════════════════════════════════════════ */
:root {
    /* ── Brand / Primary gradient ── */
    --g-primary-gradient:   linear-gradient(310deg, rgb(33, 82, 255), rgb(33, 212, 253));
    --g-primary-from:       rgb(33, 82, 255);
    --g-primary-to:         rgb(33, 212, 253);
    --g-primary-shadow:     rgba(0, 0, 0, 0.08);
    --g-primary-shadow-hover: rgba(0, 0, 0, 0.12);
    --g-primary-shadow-deep: rgba(0, 0, 0, 0.12);
    --g-primary-shadow-deep-hover: rgba(0, 0, 0, 0.16);

    /* ── Neutrals (slate scale) ── */
    --g-gray-50:  #f8fafc;
    --g-gray-100: #f1f5f9;
    --g-gray-200: #e2e8f0;
    --g-gray-300: #cbd5e1;
    --g-gray-400: #94a3b8;
    --g-gray-500: #64748b;
    --g-gray-600: #475569;
    --g-gray-700: #334155;
    --g-gray-800: #1e293b;
    --g-gray-900: #0f172a;

    /* ── Text ── */
    --g-text-heading:   var(--g-gray-900);
    --g-text-body:      var(--g-gray-700);
    --g-text-label:     var(--g-gray-600);
    --g-text-secondary: var(--g-gray-500);
    --g-text-muted:     var(--g-gray-400);

    /* ── Borders ── */
    --g-border:       var(--g-gray-200);
    --g-border-card:  #e8ecf1;
    --g-border-light: var(--g-gray-100);

    /* ── Backgrounds ── */
    --g-bg-page:    #f7f8fa;
    --g-bg-section: var(--g-gray-50);
    --g-bg-card:    #fff;
    --g-bg-sidebar: #f8f9fa;
    --g-bg-layout:  #fafafa;
    /* ── Sidebar Design Tokens ── */
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E5E7EB;
    --sidebar-active-bg: #0B132B;
    --sidebar-active-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  --sidebar-text: #6B7280;
    --sidebar-text-active: #FFFFFF;
    --sidebar-icon: #98A2B3;
    --sidebar-icon-active: #FFFFFF;
    --sidebar-hover-bg: #1118270d;
    --sidebar-hover-text: #0F172A;
    --sidebar-section-label: #4F46E5;
    --sidebar-brand-text: #2563EB;
    --sidebar-width: 235px;
    --sidebar-width-collapsed: 80px;

    /* ── Status / Semantic ── */
    --g-success:      #22c55e;
    --g-success-text: #059669;
    --g-success-bg:   #ecfdf5;
    --g-success-border: #bbf7d0;
    --g-error:        #ef4444;
    --g-error-text:   #dc2626;
    --g-error-bg:     #fef2f2;
    --g-error-border: #fecaca;
    --g-warning:      #f59e0b;
    --g-warning-bg:   #fffbeb;
    --g-warning-text: #b45309;
    --g-warning-border: #fde68a;
    --g-info:         #006ff9;
    --g-info-bg:      #e6f4ff;
    --g-orange:       #f97316;

    /* ── Brand blue (decorative highlights, pills, badges) ── */
    --g-brand:        #2c7cff;
    --g-brand-bg:     #eef7ff;
    --g-brand-border: #99d2ff;

    /* ── Action / Link blue (LinkedIn blue — candidate names, links) ── */
    --g-link-blue:    #0a66c2;
    --g-link-blue-hover: #084d94;

    /* ── Near-black (action buttons, headings) ── */
    --g-near-black:   #1a1a1a;

    /* ── Legacy dark grays (soft-ui palette) ── */
    --g-dark:         #344767;
    --g-dark-muted:   #67748e;
    --g-dark-light:   #8392ab;

    /* ── Indigo / Accent (interactive: links, focus, buttons) ── */
    --g-indigo:       #006ff9;
    --g-indigo-light: #60a5fa;
    --g-indigo-bg:    #eff6ff;
    --g-indigo-border:#93c5fd;
    --g-indigo-dark:  #1d6ae5;

    --g--heading-bg:#FAFAFACC;

    /* ── Focus ── */
    --g-focus-ring:   rgba(36, 149, 251, 0.10);
    --g-focus-border: var(--g-indigo-light);
    --g-focus-shadow: 0 0 0 3px var(--g-focus-ring);

    /* ── Typography ── */
    --g-font-sans: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --g-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace, inherit;

    /* ── Type Scale (consistent hierarchy) ── */
    --g-fs-salary: 1.75rem;        /* 28px – salary / rate display */
    --g-fs-hero-title: 1.625rem;   /* 26px – hero job title */
    --g-fs-display: 1.5rem;        /* 24px – large metric / KPI numbers */
    --g-fs-kpi: 1.375rem;          /* 22px – AI threshold, countdown numbers */
    --g-fs-page-title: 1.25rem;    /* 20px – page headings */
    --g-fs-section-title: 1.125rem;/* 18px – section headers */
    --g-fs-job:10px;
    --g-fs-section-subtitle:12px;
    --g-fs-pipeline-title:16px; /* 18px – section headers (alt) */
    --g-fs-candidate-title:17px; /* 18px – section headers (alt) */
    --g-fs-sidejob-title:18px; /* 18px – section headers (alt) */
     --g-fs-candidate-subtitle:14px; /* 14px – section headers (alt) */
    --g-fs-popup-modal:24px;
     --g-fs-job-status:28px;
       --g-fs-chart-score:32px;
    --g-fs-section-heading: 1.0625rem; /* 17px – card section headings */
    --g-fs-card-title: 1rem;       /* 16px – card headers */
    --g-fs-hero-meta: 0.9375rem;   /* 15px – hero metadata row */
    --g-fs-body: 0.875rem;         /* 14px – body / default text */
    --g-fs-table-header: 0.8125rem;/* 13px – table column headers */
    --g-fs-sm: 0.8125rem;          /* 13px – compact text */
    --g-fs-xs: 0.75rem;            /* 12px – small labels / hints */
    --g-fs-xxs: 0.6875rem;         /* 11px – micro labels / badges */
    --g-fs-xxxs: 0.625rem;         /* 10px – tiny labels / hints */

    /* ── Font Weights ── */
    --g-fw-normal: 400;
    --g-fw-medium: 500;
    --g-fw-semibold: 600;
    --g-fw-bold: 700;
    --g-fw-extrabold: 800;

    /* ── Line Heights ── */
    --g-lh-tight: 1.3;
    --g-lh-normal: 1.5;
    --g-lh-relaxed: 1.65;

    /* ── Spacing Scale ── */
    --g-space-4: 4px;
    --g-space-6: 6px;
    --g-space-8: 8px;
    --g-space-10: 10px;
    --g-space-12: 12px;
    --g-space-16: 16px;
    --g-space-18: 18px;
    --g-space-20: 20px;
    --g-space-24: 24px;
    --g-space-30: 30px;
    --g-space-32: 32px;
    --g-space-40: 40px;
    --g-space-48: 48px;
        --g-space-70: 70px;

    /* ── Button Standard ── */
    --g-btn-height: 40px;
    --g-btn-height-sm: 32px;
    --g-btn-padding-x: 20px;
    --g-btn-padding-x-sm: 14px;
    --g-btn-font-size: 0.8125rem;

    /* ── Radii ── */
    --g-radius-xs: 4px;
    --g-radius-sm: 6px;
    --g-radius-md: 8px;
    --g-radius-lg: 10px;
    --g-radius-xl: 12px;
    --g-radius-2xl: 16px;
    --g-radius-3xl: 20px;
    --g-radius-full: 9999px;

    /* ── Donut Chart Sizing ── */
    --g-donut-size: 64px;
    --g-donut-stroke: 6;
    --g-donut-radius: 26;

    /* ── Shadows ── */
    --g-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --g-shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.06);
    --g-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --g-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
    --g-shadow-card:0 20px 27px 0 rgba(0, 0, 0, 0.05);

    /* ── Transitions ── */
    --g-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --g-duration:   0.15s;
    --g-transition: var(--g-duration) var(--g-ease);
}

/* ── Global Typography Reset ── */
html, body {
    font-family: var(--g-font-sans);
    font-size: var(--g-fs-body);
    line-height: var(--g-lh-normal);
    color: var(--g-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Heading hierarchy ── */
h1 { font-size: var(--g-fs-hero-title);    font-weight: var(--g-fw-bold);     line-height: var(--g-lh-tight); color: var(--g-text-heading); margin: 0; }
h2 { font-size: var(--g-fs-page-title);    font-weight: var(--g-fw-bold);     line-height: var(--g-lh-tight); color: var(--g-text-heading); margin: 0; }
h3 { font-size: var(--g-fs-section-heading); font-weight: var(--g-fw-bold);   line-height: var(--g-lh-tight); color: var(--g-text-heading); margin: 0; }
h4 { font-size: var(--g-fs-card-title);    font-weight: var(--g-fw-semibold); line-height: var(--g-lh-tight); color: var(--g-text-heading); margin: 0; }
h5 { font-size: var(--g-fs-body);          font-weight: var(--g-fw-semibold); line-height: var(--g-lh-normal); color: var(--g-text-heading); margin: 0; }
h6 { font-size: var(--g-fs-sm);            font-weight: var(--g-fw-semibold); line-height: var(--g-lh-normal); color: var(--g-text-heading); margin: 0; }

/* ── Body text elements — inherit body size (14px) ── */
p {
    font-size: var(--g-fs-body);
    line-height: var(--g-lh-relaxed);
    color: var(--g-text-body);
    margin: 0;
}

span {
    font-size: inherit;
    color: inherit;
}

label {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
}

a {
    font-size: inherit;
    color: var(--g-link-blue);
    text-decoration: none;
}

li {
    font-size: var(--g-fs-body);
    line-height: var(--g-lh-relaxed);
    color: var(--g-text-body);
}

td, th {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
}

th {
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

input, select, textarea {
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
}

button {
    font-size: var(--g-fs-sm);
    font-family: inherit;
    font-weight: var(--g-fw-semibold);
}

small {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

strong, b {
    font-weight: var(--g-fw-bold);
}

/* ── Breakpoints (reference — CSS media queries cannot use custom properties)
   xs:  425px    mobile small
   sm:  640px    mobile large
   md:  768px    tablet
   lg:  800px    sidebar collapse
   xl:  1024px   tablet landscape
   2xl: 1280px   small desktop
   3xl: 1440px   desktop
   4xl: 1600px   zoom threshold
── */