/* ==================================================================
   ZeozGig — Print MIS theme layer
   ------------------------------------------------------------------
   Ports the design system from printmis.com (E:\projects\pritnmis-website,
   app/globals.css) onto this project.

   The site is greyscale: hue carries no meaning in the marketing chrome, so
   separation is done with value, weight and space instead. The four process
   colours are the only hues, and they appear at mark scale only — the 10px
   registration bar above a heading and the 3px plate edge on a card. They are
   never a fill and never sit behind type.

   Status colours (success / danger / warning) are the deliberate exception and
   are left alone in the app screens, where hue does carry meaning — a failed
   payment or an expired request has to read as one at a glance.
   ================================================================== */

:root {
    /* ---- Metrics --------------------------------------------------- */
    /* Header height. Read by the bar itself, by the hero's full-height maths,
       and by every screen that clears the fixed bar with its own top padding,
       so the four stay in step. */
    --zg-bar-h: 4rem;

    /* ---- Page grounds -------------------------------------------- */
    /* `canvas` is the page itself; `canvas-deep` is the band that separates
       from it by going one step darker rather than by inverting. Cards sit on
       top in plain white. */
    --zg-canvas: #ededed;
    --zg-canvas-deep: #e1e1e1;
    --zg-surface: #ffffff;

    /* ---- Process colours (mark scale only) ------------------------ */
    /* Yellow is deepened from #FFF200, which measures 1.00:1 against the page
       grey and would render a segment of the bar as a gap. */
    --zg-cmyk-c: #00aeef;
    --zg-cmyk-m: #ec008c;
    --zg-cmyk-y: #f2c500;
    --zg-cmyk-k: #141414;
    --zg-cmyk-c-deep: #0096cc;
    --zg-star: #e8a400;

    /* ---- Ink — type and the primary button ------------------------ */
    --zg-ink-950: #0d0d0d;
    --zg-ink-900: #141414;
    --zg-ink-850: #1b1b1b;
    --zg-ink-800: #232323;
    --zg-ink-700: #333333;
    --zg-ink-500: #6e6e6e;

    /* ---- True-neutral ramp ---------------------------------------- */
    /* Replaces Tailwind's blue-tinted slate, which is what this project's
       per-page CSS was built on. */
    --zg-n-50: #f7f7f7;
    --zg-n-100: #efefef;
    --zg-n-200: #e2e2e2;
    --zg-n-300: #cfcfcf;
    --zg-n-400: #a3a3a3;
    --zg-n-500: #7a7a7a;
    --zg-n-600: #575757;
    --zg-n-700: #3d3d3d;
    --zg-n-800: #222222;
    --zg-n-900: #171717;
    --zg-n-950: #0d0d0d;

    /* ---- Accent ramp ---------------------------------------------- */
    /* Deliberately not linear: 50-400 are the tints (washes, hairlines) and
       600-900 collapse onto near-black, so the primary button renders as the
       black pill the design calls for. 500 is the one mid-tone and is what the
       focus ring uses. */
    --zg-brand-50: #f4f4f4;
    --zg-brand-100: #e8e8e8;
    --zg-brand-200: #d6d6d6;
    --zg-brand-300: #b4b4b4;
    --zg-brand-400: #8a8a8a;
    --zg-brand-500: #737373;
    --zg-brand-600: #1a1a1a;
    --zg-brand-700: #111111;
    --zg-brand-800: #0a0a0a;
    --zg-brand-900: #000000;

    --zg-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -12px rgba(0, 0, 0, 0.14);
    --zg-shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.3);
    --zg-shadow-menu: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.07), 0 18px 40px -14px rgba(0, 0, 0, 0.2);

    --zg-font-ui: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --zg-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Per-script UI face. Arabic is a cursive script and Devanagari/Han carry more
   vertical detail, so each gets its own family ahead of the Latin face. */
html[lang="ar"], html[dir="rtl"] {
    --zg-font-ui: 'Cairo', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif;
}

html[lang="hi"], html[lang="hi-IN"] {
    --zg-font-ui: 'Inter Tight', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
}

html[lang="zh"], html[lang="zh-CN"] {
    --zg-font-ui: 'Inter Tight', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background: var(--zg-canvas);
    color: var(--zg-ink-900);
    font-family: var(--zg-font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--zg-font-ui);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Arabic letter joins are severed by negative tracking; Han has no such
   concept and tightening it just collides the glyphs. */
html[lang="ar"] :is(h1, h2, h3, h4),
html[dir="rtl"] :is(h1, h2, h3, h4),
html[lang="zh"] :is(h1, h2, h3, h4),
html[lang="zh-CN"] :is(h1, h2, h3, h4) {
    letter-spacing: normal;
}

html[lang="ar"] body,
html[dir="rtl"] body,
html[lang="zh"] body,
html[lang="zh-CN"] body {
    line-height: 1.75;
}

p {
    text-wrap: pretty;
}

a {
    text-underline-offset: 3px;
}

::selection {
    background: var(--zg-brand-200);
    color: var(--zg-ink-950);
}

:focus-visible {
    outline: 2px solid var(--zg-brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  Layout                                                            */
/* ------------------------------------------------------------------ */
/* Edge-to-edge rather than a centred column: the layout runs the full
   viewport with a fixed gutter, and the cap only engages past 1920px so
   ultrawide monitors do not stretch a row of cards indefinitely. */
.zg-container {
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .zg-container {
        padding-inline: 2rem;
    }
}

@media (min-width: 1024px) {
    .zg-container {
        padding-inline: 3rem;
    }
}

/* ------------------------------------------------------------------ */
/*  Registration bar + eyebrow                                        */
/* ------------------------------------------------------------------ */
/* A press colour bar, in miniature — four plates in order. This is the one
   place colour appears at rest, and it works precisely because everything
   around it is a true neutral. Decorative, so hide it from assistive tech:
   the kicker beside it already says what the section is. */
.zg-reg-bar {
    display: inline-flex;
    flex-shrink: 0;
    gap: 1px;
    vertical-align: middle;
}

    .zg-reg-bar > i {
        display: block;
        width: 10px;
        height: 3px;
        border-radius: 1px;
    }

    .zg-reg-bar > i:nth-child(1) { background: var(--zg-cmyk-c); }
    .zg-reg-bar > i:nth-child(2) { background: var(--zg-cmyk-m); }
    .zg-reg-bar > i:nth-child(3) { background: var(--zg-cmyk-y); }
    .zg-reg-bar > i:nth-child(4) { background: var(--zg-cmyk-k); }

/* Small caps-style kicker above a heading. Mono + uppercase + wide tracking is
   the Latin treatment and is actively wrong for Arabic and Han, which is why
   the exceptions below exist. */
.zg-eyebrow-label {
    font-family: var(--zg-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--zg-ink-900);
}

html[lang="ar"] .zg-eyebrow-label,
html[dir="rtl"] .zg-eyebrow-label,
html[lang="zh"] .zg-eyebrow-label,
html[lang="zh-CN"] .zg-eyebrow-label,
html[lang="hi"] .zg-eyebrow-label,
html[lang="hi-IN"] .zg-eyebrow-label {
    font-family: var(--zg-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/*  Textures                                                          */
/* ------------------------------------------------------------------ */
/* Fine grid, drawn in ink now that the bands it textures are light. */
.zg-tech-grid {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
}

.zg-tech-dots {
    background-image: radial-gradient(rgba(13, 18, 32, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
}

.zg-mask-fade-b {
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
    mask-image: linear-gradient(to bottom, black 55%, transparent);
}

/* Gradient hairline on the top edge of a panel. */
.zg-edge-highlight {
    position: relative;
}

    .zg-edge-highlight::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.14), transparent);
    }

.zg-text-gradient {
    background: linear-gradient(92deg, #111111, #4d4d4d 55%, #8a8a8a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}