/* =============================================
   JobMarathi — Design Tokens
   Government job portal, Marathi-first
   ============================================= */

:root {
    /* ── Primary: Maharashtra saffron ──
       The 600/700/800 steps are deliberately deep (burnt saffron, not bright
       orange). A bright #f97316 header cannot carry white text at AA contrast,
       and this site's chrome is white-on-primary everywhere.
       Measured against white: 600 = 5.2:1, 700 = 7.3:1. */
    --primary-50:  #fff7ed;
    --primary-100: #ffedd5;
    --primary-200: #fed7aa;
    --primary-300: #fdba74;
    --primary-400: #fb923c;
    --primary-500: #f97316;
    --primary-600: #c2410c;   /* section heading bars */
    --primary-700: #9a3412;   /* header bar */
    --primary-800: #7c2d12;   /* nav strip */
    --primary-900: #601f0c;

    /* ── Accent: blue. The secondary section bars and the logo mark. ──
       Blue rather than a second warm hue: on a saffron page every warm accent
       disappears into the chrome, and this accent has to mark the blocks
       (महत्त्वाच्या भरती, चालू घडामोडी, सूचना फलक) that must NOT read as the
       default section colour. */
    --accent-50:   #eff6ff;
    --accent-100:  #dbeafe;
    --accent-500:  #3b82f6;
    --accent-600:  #1e73be;

    /* ── Alert red: deadlines and closing-soon warnings ── */
    --danger-50:   #fef2f2;
    --danger-100:  #fee2e2;
    --danger-500:  #ef4444;
    --danger-600:  #dc2626;
    --danger-700:  #b91c1c;

    /* ── Warning amber ──
       A SEPARATE token from --accent on purpose. Under the blue theme the two
       were the same colour, so .alert--warn could borrow the accent. Here the
       accent is blue and a blue "warning" box is meaningless — and the theme
       primary is itself orange, so a warning must stay distinguishable from
       ordinary chrome. Amber-700 text keeps it legible against the tint. */
    --warn-50:   #fffbeb;
    --warn-100:  #fef3c7;
    --warn-500:  #f59e0b;
    --warn-700:  #b45309;

    /* ── Success green: Apply / Download buttons ──
       The solid white-on-green surfaces use 700, not 600. #059669 measures
       3.77:1 against white — below AA — and the one control that must never be
       hard to read is the "Apply Online" button. 700 is 5.14:1. */
    --success-50:  #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;   /* light tints and borders only */
    --success-700: #047857;   /* white-on-green surfaces */
    --success-800: #065f46;   /* hover */

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

    /* ── Surfaces ── */
    --bg-page:      #f1f5f9;
    --bg-card:      #ffffff;
    --bg-subtle:    #f8fafc;
    --border:       #e2e8f0;
    --border-strong:#cbd5e1;

    /* ── Text ── */
    --text-primary:   #1e293b;
    --text-secondary: #475569;
    --text-muted:     #64748b;
    --text-inverse:   #ffffff;
    /* Amber-700, not the primary-600 used for bars: link text is small and
       sits on white, so it needs the darker step to clear 4.5:1 (5.05:1). */
    --text-link:      #b45309;

    /* ── Typography ──
       NO WEBFONT. The audience is overwhelmingly on Android phones on mobile
       data, where Noto Sans Devanagari is already installed; downloading a
       300KB Devanagari webfont would delay first paint of a text-only page to
       save nothing. Nirmala UI covers Windows, Noto covers Android/ChromeOS,
       Kohinoor covers iOS. */
    --font-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mr: "Nirmala UI", "Noto Sans Devanagari", "Kohinoor Devanagari",
               "Mangal", "Segoe UI", Roboto, sans-serif;

    --text-xs:   0.75rem;    /* 12px — meta, dates */
    --text-sm:   0.8125rem;  /* 13px — table cells */
    --text-base: 0.9375rem;  /* 15px — body. Devanagari needs a larger base
                                than Latin to keep the matras legible. */
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;

    --leading-tight:  1.35;
    --leading-normal: 1.7;   /* generous: Devanagari has tall ascenders and
                                descenders that collide at Latin line-heights */

    /* ── Spacing ── */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* ── Shadow ── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

    /* ── Layout ── */
    --container:   1180px;
    --sidebar-w:   320px;
    --header-h:    58px;

    --transition: 0.15s ease;
}

/* Dark mode is NOT implemented.
   A government-notice portal is read in daylight on a phone, printed, and
   screenshotted into WhatsApp groups — a dark theme makes every one of those
   worse. A half-built dark mode that inverts the text but not the notice
   tables is worse than none, so there is deliberately none. */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-mr);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    font-weight: 700;
    color: var(--text-primary);
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p  { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
li { margin-bottom: var(--space-1); }

/* Any admin-authored table must scroll rather than widen the page. Notices are
   routinely pasted in with 6 columns, and on a 360px phone that would otherwise
   force the whole layout to scroll sideways. */
table { border-collapse: collapse; width: 100%; }

/* Visible focus ring — the site is heavily keyboard/screen-reader navigated by
   users on shared computers at CSC centres. */
:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* On the saffron header and nav the ring would be primary-600 on primary-700/800
   — barely 2:1, i.e. an invisible focus ring exactly where tab focus lands
   first. White is the only colour with guaranteed contrast on that chrome. */
.site-header :focus-visible,
.site-nav :focus-visible {
    outline-color: #ffffff;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}