/* ============================================================
   ReqPath UI — shared design tokens + base components (v1.0)
   Source of truth: ReqPath Design System (July 2026).
   Every product page (dashboards, portals, auth) links this file.
   Light mode only. Flat fills. Full even borders. No emoji icons.
   ============================================================ */

:root {
    /* Brand green */
    --green-50: #edf8f3;
    --green-100: #d3f0e4;
    --green-200: #a8e1c9;
    --green-300: #74cda9;
    --green-400: #3fb488;
    --green-500: #22a67c;
    --green-600: #1d9e75; /* primary actions, active nav, key data */
    --green-700: #167e5c; /* hover / pressed */
    --green-800: #116147; /* green text on light */
    --green-900: #0c4735;

    /* Warm greige neutrals */
    --canvas: #f6f7f3;
    --surface: #ffffff;
    --sunken: #eef0ea;
    --row-alt: #fbfcfa;
    --border-subtle: #edefea;
    --border: #e1e4dd;
    --border-strong: #cfd3ca;
    --ink-300: #b6bbb4;
    --ink-400: #97a099;
    --ink-500: #6c756e;
    --ink-700: #3e4842;
    --ink-900: #18211c;

    /* Semantic */
    --success: #1d9e75;
    --success-bg: #e9f6f0;
    --success-text: #116147;
    --warning: #c6842a;
    --warning-bg: #faf0de;
    --warning-text: #8a5a15;
    --danger: #c0432e;
    --danger-bg: #f9e7e2;
    --danger-text: #8e2c1d;
    --danger-border: #e4b5ac;
    --info: #2f7e8c;
    --info-bg: #e6f1f3;
    --info-text: #215863;

    /* Departments: dot / text / tint */
    --dept-english: #b4623e;
    --dept-english-text: #7a3f27;
    --dept-english-bg: #f6e9e2;
    --dept-math: #3e6e9e;
    --dept-math-text: #2c4c6e;
    --dept-math-bg: #e7edf4;
    --dept-science: #1e8c82;
    --dept-science-text: #16605a;
    --dept-science-bg: #e4f1ef;
    --dept-social: #b58a2e;
    --dept-social-text: #6b4a15;
    --dept-social-bg: #f6eedd;
    --dept-lang: #9a4e63;
    --dept-lang-text: #6e2e40;
    --dept-lang-bg: #f4e7eb;
    --dept-arts: #6e5a86;
    --dept-arts-text: #4a3d5c;
    --dept-arts-bg: #edeaf2;
    --dept-pe: #4c7a4e;
    --dept-pe-text: #2e4a2f;
    --dept-pe-bg: #e7f0e7;
    --dept-cte: #8a6a3e;
    --dept-cte-text: #5c4425;
    --dept-cte-bg: #f2ebde;

    /* Difficulty / workload ramp (1 → 4+) */
    --diff-1: #2e9e6e;
    --diff-2: #c6a02e;
    --diff-3: #c67a2b;
    --diff-4: #b4522e;
    --diff-5: #a03e24;
    --diff-empty: #eef0ea;

    /* Type */
    --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --font-body: "Hanken Grotesk", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    /* Shape + elevation */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-xs: 0 1px 2px rgba(24, 33, 28, 0.05);
    --shadow-md: 0 4px 12px rgba(24, 33, 28, 0.08), 0 2px 4px rgba(24, 33, 28, 0.04);
    --shadow-lg: 0 12px 28px rgba(24, 33, 28, 0.1), 0 4px 8px rgba(24, 33, 28, 0.05);
    --focus-ring: 0 0 0 3px #d3f0e4;
}

/* ---------- base ---------- */
.rp * { box-sizing: border-box; }
body.rp,
.rp body {
    font-family: var(--font-body);
    background: var(--canvas);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.rp ::selection { background: var(--green-100); color: var(--green-900); }
.rp a { color: var(--green-600); text-decoration: none; }
.rp a:hover { color: var(--green-700); }

/* ---------- text helpers ---------- */
.rp-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-600);
}
.rp-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink-900);
}
.rp-sub { font-size: 15px; color: var(--ink-500); }
.rp-mono-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* ---------- card ---------- */
.rp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.rp-card--raised { box-shadow: var(--shadow-md); }
.rp-card--selected { background: var(--green-50); border-color: var(--green-200); }

/* ---------- buttons ---------- */
.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: var(--green-600);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.rp-btn:hover { background: var(--green-700); }
.rp-btn:disabled { background: var(--green-200); cursor: not-allowed; }
.rp-btn--neutral { color: var(--ink-900); background: var(--surface); border-color: var(--border-strong); }
.rp-btn--neutral:hover { background: var(--canvas); border-color: var(--ink-400); }
.rp-btn--neutral:disabled { color: var(--ink-400); background: var(--surface); border-color: var(--border); }
.rp-btn--ghost { color: var(--ink-700); background: transparent; border-color: transparent; }
.rp-btn--ghost:hover { background: var(--sunken); color: var(--ink-900); }
.rp-btn--ghost:disabled { color: var(--ink-300); background: transparent; }
.rp-btn--danger { color: var(--danger); background: var(--surface); border-color: var(--danger-border); }
.rp-btn--danger:hover { background: var(--danger-bg); }
.rp-btn--danger-solid { color: #fff; background: var(--danger); border-color: transparent; }
.rp-btn--danger-solid:hover { background: #a63a27; }
.rp-btn--sm { font-size: 12.5px; padding: 6px 12px; border-radius: var(--radius-sm); }
.rp-btn--lg { font-size: 15px; padding: 13px 24px; }
.rp-btn--icon { width: 38px; height: 38px; padding: 0; }

/* ---------- inputs ---------- */
.rp-input,
.rp-select,
.rp-textarea {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-input::placeholder,
.rp-textarea::placeholder { color: var(--ink-400); }
.rp-input:focus,
.rp-select:focus,
.rp-textarea:focus { border-color: var(--green-600); box-shadow: var(--focus-ring); }
.rp-input--error { border-color: var(--danger-border); }
.rp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
}
.rp-error-text { font-size: 12px; color: var(--danger); }

/* ---------- badges ---------- */
.rp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 5px;
    padding: 4px 9px;
    color: var(--ink-700);
    background: var(--sunken);
    white-space: nowrap;
}
.rp-badge .rp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rp-badge--success { color: var(--success-text); background: var(--success-bg); }
.rp-badge--warning { color: var(--warning-text); background: var(--warning-bg); }
.rp-badge--danger { color: var(--danger-text); background: var(--danger-bg); }
.rp-badge--info { color: var(--info-text); background: var(--info-bg); }

/* ---------- progress ---------- */
.rp-track { height: 8px; background: var(--sunken); border-radius: 4px; overflow: hidden; }
.rp-track > .rp-fill { height: 100%; background: var(--green-600); border-radius: 4px; transition: width 0.3s; }
.rp-track > .rp-fill--warn { background: var(--warning); }

/* ---------- segmented control ---------- */
.rp-seg { display: inline-flex; gap: 4px; background: var(--sunken); border-radius: var(--radius-md); padding: 3px; }
.rp-seg > * {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-500);
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.rp-seg > .active { font-weight: 600; color: var(--ink-900); background: var(--surface); box-shadow: var(--shadow-xs); }

/* ---------- scrollbars (subtle, webkit) ---------- */
.rp ::-webkit-scrollbar { width: 10px; height: 10px; }
.rp ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--canvas); }
.rp ::-webkit-scrollbar-track { background: transparent; }