/* =====================================================================
   NEXUS RECRUIT — design tokens
   ---------------------------------------------------------------------
   Every colour, size, radius and shadow in the product resolves to a
   variable declared here. Nothing else in the codebase hard-codes a hex
   value, which is what makes the employer theme override (one file that
   redefines --color-brand-*) possible without touching a component.

   Direction: electric royal blue on near-white, white cards with soft
   lift, pill primary actions, pastel status chips, rounded geometric
   sans. This replaces the cooler, flatter palette in the original brief.

   Light is the default. Dark redefines only the tokens that must change,
   under both the prefers-color-scheme query and an explicit
   [data-theme="dark"] so a manual toggle wins in either direction.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Plus Jakarta Sans, self-hosted.

   Loaded as a variable font so one file covers every weight the product
   uses (400–800). It is served from this origin on purpose: a font fetched
   from a third party blocks first paint, adds a third-party dependency to
   every page, and breaks on a host with no outbound network access. The
   fetch is installed by bin/fetch-vendor.php and verified against a hash.

   Relative URLs so the sheet keeps working under a subdirectory install.
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------------------------------------------------------------
       Brand ramp
       Anchored on --color-brand-500, the blue used for primary actions
       and full-bleed hero panels. 600 is the hover, 700 the active.
       --------------------------------------------------------------- */
    --color-brand-50:  #eef2ff;
    --color-brand-100: #dfe7ff;
    --color-brand-200: #c2d0ff;
    --color-brand-300: #96afff;
    --color-brand-400: #6485f8;
    --color-brand-500: #2f5ae8;
    --color-brand-600: #1f47d1;
    --color-brand-700: #1938a8;
    --color-brand-800: #182f80;
    --color-brand-900: #16295f;

    /* Slightly warm-neutral greys. A pure grey next to this blue reads
       cold, so every step carries a few points of blue. */
    --color-gray-25:  #fcfcfd;
    --color-gray-50:  #f7f8fa;
    --color-gray-100: #f1f2f6;
    --color-gray-200: #e6e8ef;
    --color-gray-300: #d3d7e2;
    --color-gray-400: #9aa1b4;
    --color-gray-500: #6d7488;
    --color-gray-600: #545b6e;
    --color-gray-700: #3a4054;
    --color-gray-800: #262b3b;
    --color-gray-900: #141827;

    /* ---------------------------------------------------------------
       Semantic colours
       Each has a tinted background, a solid mid, and a text-safe dark.
       The -50 / -700 pair is what status chips use: tinted ground,
       dark text, which stays legible where a solid fill would not.
       --------------------------------------------------------------- */
    --color-success-50:  #e8f8ef;
    --color-success-100: #cdeedd;
    --color-success-500: #16a55c;
    --color-success-600: #128b4d;
    --color-success-700: #0d6b3b;

    --color-warning-50:  #fff3e4;
    --color-warning-100: #ffe3c2;
    --color-warning-500: #f08c25;
    --color-warning-600: #d4741a;
    --color-warning-700: #9a5310;

    --color-danger-50:   #feecec;
    --color-danger-100:  #fcd6d6;
    --color-danger-500:  #e04343;
    --color-danger-600:  #c62f2f;
    --color-danger-700:  #98241f;

    --color-info-50:     #e8f1ff;
    --color-info-100:    #d0e2ff;
    --color-info-500:    #2f80ed;
    --color-info-600:    #1f66c8;
    --color-info-700:    #17509c;

    --color-purple-50:   #f1ecff;
    --color-purple-100:  #e2d8ff;
    --color-purple-500:  #7b53ea;
    --color-purple-700:  #4f2eab;

    --color-teal-50:     #e4f7f6;
    --color-teal-500:    #14a09a;
    --color-teal-700:    #0c6d69;

    --color-pink-50:     #fdeaf3;
    --color-pink-500:    #e2559a;
    --color-pink-700:    #a92c69;

    /* ---------------------------------------------------------------
       Surfaces and text
       Component CSS references these rather than the ramps above, so a
       dark-mode override only has to redefine this block.
       --------------------------------------------------------------- */
    --surface-page:      #f6f7f9;
    --surface-white:     #ffffff;
    --surface-raised:    #ffffff;
    --surface-sunken:    var(--color-gray-50);
    --surface-inverted:  var(--color-gray-900);
    --surface-brand:     var(--color-brand-500);
    --surface-overlay:   rgba(20, 24, 39, 0.45);

    --border-default:    var(--color-gray-200);
    --border-strong:     var(--color-gray-300);
    --border-subtle:     var(--color-gray-100);
    --border-focus:      var(--color-brand-500);

    --text-primary:      var(--color-gray-900);
    --text-secondary:    var(--color-gray-700);
    --text-muted:        var(--color-gray-500);
    --text-hint:         var(--color-gray-400);
    --text-inverted:     #ffffff;
    --text-brand:        var(--color-brand-600);
    --text-link:         var(--color-brand-600);

    /* ---------------------------------------------------------------
       Typography
       Plus Jakarta Sans is the closest open-licensed match to the
       reference: geometric, slightly rounded, friendly at large sizes
       and still legible at 12px. Self-hosted as a variable woff2, so
       there is no external font request — required both by the hosting
       constraint and because a blocking font fetch delays first paint.
       --------------------------------------------------------------- */
    --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, "Liberation Mono", monospace;

    --text-2xs:  0.6875rem;  /* 11px — chip labels, table meta          */
    --text-xs:   0.75rem;    /* 12px — helper text, badges              */
    --text-sm:   0.8125rem;  /* 13px — labels, dense table cells        */
    --text-base: 0.875rem;   /* 14px — UI default                       */
    --text-md:   0.9375rem;  /* 15px — body copy                        */
    --text-lg:   1.0625rem;  /* 17px — card titles                      */
    --text-xl:   1.25rem;    /* 20px — section headings                 */
    --text-2xl:  1.5rem;     /* 24px — page headings                    */
    --text-3xl:  1.875rem;   /* 30px — metric values                    */
    --text-4xl:  2.25rem;    /* 36px — dashboard hero                   */
    --text-5xl:  3rem;       /* 48px — marketing hero                   */
    --text-6xl:  3.75rem;    /* 60px — marketing hero, large screens    */

    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* Geometric type needs slightly negative tracking at display sizes
       to stop it looking loose, and positive tracking on small caps. */
    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.015em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-caps:    0.06em;

    /* ---------------------------------------------------------------
       Spacing — 4px base
       --------------------------------------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ---------------------------------------------------------------
       Radii
       Rounder than the original brief throughout — the reference leans
       heavily on soft corners, and pill buttons are a defining part of
       its character.
       --------------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-2xl:  24px;
    --radius-3xl:  32px;
    --radius-pill: 999px;

    --radius-card:   var(--radius-xl);
    --radius-input:  var(--radius-md);
    --radius-button: var(--radius-pill);
    --radius-chip:   var(--radius-pill);
    --radius-modal:  var(--radius-2xl);

    /* ---------------------------------------------------------------
       Elevation
       Two-layer shadows: a tight contact shadow plus a wide soft one.
       A single large blur reads as a smudge against a near-white page.
       --------------------------------------------------------------- */
    --shadow-xs:  0 1px 2px rgba(20, 24, 39, 0.04);
    --shadow-sm:  0 1px 2px rgba(20, 24, 39, 0.04),
                  0 2px 6px rgba(20, 24, 39, 0.04);
    --shadow-md:  0 2px 4px rgba(20, 24, 39, 0.04),
                  0 8px 20px rgba(20, 24, 39, 0.06);
    --shadow-lg:  0 4px 8px rgba(20, 24, 39, 0.05),
                  0 16px 36px rgba(20, 24, 39, 0.08);
    --shadow-xl:  0 8px 16px rgba(20, 24, 39, 0.06),
                  0 28px 60px rgba(20, 24, 39, 0.12);

    /* Coloured lift for primary buttons and the brand hero panel. */
    --shadow-brand: 0 4px 14px rgba(47, 90, 232, 0.28);
    --shadow-focus: 0 0 0 3px rgba(47, 90, 232, 0.18);
    --shadow-focus-danger: 0 0 0 3px rgba(224, 67, 67, 0.18);

    /* ---------------------------------------------------------------
       Motion
       --------------------------------------------------------------- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 90ms;
    --duration-fast:    150ms;
    --duration-normal:  220ms;
    --duration-slow:    340ms;

    --transition-colors: color var(--duration-fast) var(--ease-out),
                         background-color var(--duration-fast) var(--ease-out),
                         border-color var(--duration-fast) var(--ease-out);
    --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);
    --transition-transform: transform var(--duration-normal) var(--ease-out);

    /* ---------------------------------------------------------------
       Layout
       --------------------------------------------------------------- */
    --sidebar-width:           264px;
    --sidebar-width-collapsed: 72px;
    --topbar-height:           68px;
    --navbar-height:           72px;
    --bottom-nav-height:       64px;
    --content-max:             1280px;
    --content-narrow:          900px;
    --content-prose:           680px;
    --content-padding:         var(--space-6);

    --kanban-column-width: 300px;
    --kanban-card-width:   100%;

    /* Stacking order, declared once so nothing guesses a z-index. */
    --z-base:     0;
    --z-sticky:   20;
    --z-dropdown: 40;
    --z-sidebar:  50;
    --z-overlay:  60;
    --z-modal:    70;
    --z-toast:    80;
    --z-tooltip:  90;
}

/* =====================================================================
   Dark theme
   Only the surface, border and text tokens change. The brand ramp is
   lifted slightly — the 500 that reads confident on white is muddy on a
   dark ground, so 400 becomes the primary there.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-brand-50:  #16214a;
        --color-brand-100: #1b2c66;
        --color-brand-200: #22397f;

        --surface-page:     #0e1119;
        --surface-white:    #171b26;
        --surface-raised:   #1d2230;
        --surface-sunken:   #12151f;
        --surface-inverted: #f7f8fa;
        --surface-overlay:  rgba(4, 6, 12, 0.6);

        --border-default: #262c3c;
        --border-strong:  #333a4d;
        --border-subtle:  #1e2331;

        --text-primary:   #f2f4f8;
        --text-secondary: #d3d8e4;
        --text-muted:     #98a0b3;
        --text-hint:      #6f7789;
        --text-inverted:  #0e1119;
        --text-brand:     var(--color-brand-300);
        --text-link:      var(--color-brand-300);

        --color-success-50: #12301f;
        --color-success-700: #6ee7a8;
        --color-warning-50: #33230e;
        --color-warning-700: #f7c07a;
        --color-danger-50:  #341717;
        --color-danger-700: #f79c9c;
        --color-info-50:    #12233d;
        --color-info-700:   #93c0f7;
        --color-purple-50:  #241a44;
        --color-purple-700: #c1a8f7;
        --color-teal-50:    #0e2f2d;
        --color-teal-700:   #6fd8d2;
        --color-pink-50:    #37172a;
        --color-pink-700:   #f2a0c8;

        /* Shadows do almost nothing on a dark ground; borders carry the
           separation instead, so the blurs are cut right back. */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
        --shadow-brand: 0 4px 16px rgba(47, 90, 232, 0.4);
        --shadow-focus: 0 0 0 3px rgba(100, 133, 248, 0.3);
    }
}

:root[data-theme="dark"] {
    --color-brand-50:  #16214a;
    --color-brand-100: #1b2c66;
    --color-brand-200: #22397f;

    --surface-page:     #0e1119;
    --surface-white:    #171b26;
    --surface-raised:   #1d2230;
    --surface-sunken:   #12151f;
    --surface-inverted: #f7f8fa;
    --surface-overlay:  rgba(4, 6, 12, 0.6);

    --border-default: #262c3c;
    --border-strong:  #333a4d;
    --border-subtle:  #1e2331;

    --text-primary:   #f2f4f8;
    --text-secondary: #d3d8e4;
    --text-muted:     #98a0b3;
    --text-hint:      #6f7789;
    --text-inverted:  #0e1119;
    --text-brand:     var(--color-brand-300);
    --text-link:      var(--color-brand-300);

    --color-success-50: #12301f;
    --color-success-700: #6ee7a8;
    --color-warning-50: #33230e;
    --color-warning-700: #f7c07a;
    --color-danger-50:  #341717;
    --color-danger-700: #f79c9c;
    --color-info-50:    #12233d;
    --color-info-700:   #93c0f7;
    --color-purple-50:  #241a44;
    --color-purple-700: #c1a8f7;
    --color-teal-50:    #0e2f2d;
    --color-teal-700:   #6fd8d2;
    --color-pink-50:    #37172a;
    --color-pink-700:   #f2a0c8;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 4px 16px rgba(47, 90, 232, 0.4);
    --shadow-focus: 0 0 0 3px rgba(100, 133, 248, 0.3);
}

/* =====================================================================
   Right-to-left
   ---------------------------------------------------------------------
   Logical properties handle the layout, so `dir` on the document is
   normally all that is needed. `--flip` exists for the one thing that has
   no logical form: a transform. The off-canvas sidebar is translated by
   -100% of its own width, and in RTL it has to travel the other way, so
   the distance is multiplied by a signed factor instead of hard-coded.

   Component-level corrections that logical properties cannot express live
   at the end of app.css, under the same heading.
   ===================================================================== */

/*
 * Order matters. `:root` and `[dir="rtl"]` have the same specificity, so the
 * RTL override has to come last or the default wins even on an RTL document —
 * which is exactly how a declared-but-inert flip lands in the codebase.
 */
:root,
[dir="ltr"] {
    --flip: 1;
}

[dir="rtl"] {
    --flip: -1;
}

/* =====================================================================
   Reduced motion
   Honoured as an instruction, not a suggestion: animation is removed
   rather than shortened.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast:    0ms;
        --duration-normal:  0ms;
        --duration-slow:    0ms;
    }
}

/* =====================================================================
   Forced colours (Windows high contrast)
   Let the OS palette through rather than fighting it.
   ===================================================================== */

@media (forced-colors: active) {
    :root {
        --shadow-xs: none;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
        --shadow-brand: none;
    }
}