/* ==========================================================================
   TradeTech Sandbox — design system tokens.
   Imported verbatim from "TradeTech Design System (standalone) v1.0".

   Source hierarchy, per the system itself:
     1. MCIT government identity requirements   (typeface, type scale, icon
        sizes, core colours, ministry accent)
     2. Ministry of Investment and Foreign Trade identity
     3. TradeTech programme requirements
     4. The previous Midnight page — lowest; superseded where it disagrees.

   Midnight is the default theme. Add data-theme="light" to opt a page into
   the light surfaces (the apply flow does).
   ========================================================================== */

:root {
    /* ---- spacing: an 8px rhythm ------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* ---- radius: meaning, not decoration ----------------------------
       sm  inputs, buttons, selects, tags inside tables, table cells
       md  cards, alerts, panels, media frames
       lg  feature containers, hero panels, the eligibility checker
       pill filter tags, status chips, the language switcher, and the single
            campaign CTA. Nothing else. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- type: one family, both scripts ------------------------------ */
    --font-family: 'Tajawal', -apple-system, 'Segoe UI', sans-serif;

    --text-display-1: 64px;
    --text-display-2: 48px;
    --text-metric: 40px;
    --text-h1: 32px;
    --text-h2: 24px;
    --text-h3: 20px;
    --text-subhead: 20px;
    --text-card-title: 18px;
    --text-body: 18px;
    --text-button: 16px;
    --text-meta: 14px;

    --leading-tight: 1.15;
    --leading-heading: 1.3;
    --leading-body: 1.7;

    --tracking-display: -0.02em;
    --tracking-normal: 0;
    /* The only place letter-spacing is allowed: uppercase Latin eyebrows.
       Never letter-space Arabic. */
    --tracking-caps: 0.08em;

    --measure: 68ch;
    --measure-ar: 62ch;
    --container-max: 1440px;

    /* ---- ramps ------------------------------------------------------- */
    --brand-50: #FBF5E4;
    --brand-100: #F6EAC4;
    --brand-200: #EFD897;
    --brand-300: #E7C55F;
    --brand-400: #E0B62E;
    --brand-500: #C89C1E; /* the MCIT ministry anchor */
    --brand-600: #A67F16;
    --brand-700: #7F6112;
    --brand-800: #5C460F;
    --brand-900: #3D2F0B;

    --midnight-950: #0F1B2E;
    --midnight-900: #16233A;
    --midnight-800: #1E2E49;
    --midnight-700: #243652;
    --midnight-600: #2F4468;

    --gov-green: #55C574;
    --gov-red: #F34A3F;
    --gov-white: #FFFFFF;

    /* ---- motion ------------------------------------------------------ */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---- Midnight (default) ----------------------------------------------- */

:root {
    --color-brand-anchor: #C89C1E;
    --color-brand-primary: #E0B62E;
    --color-brand-primary-hover: #E7C55F;
    --color-brand-primary-active: #C89C1E;
    --color-brand-on: #16233A;
    --color-brand-subtle: rgba(224,182,46,.16);
    --color-brand-border: rgba(231,197,95,.42);

    /* The primary action is theme-specific: a white pill on Midnight, where it
       reads as the brightest object on the page, and the brand fill on Light.
       Both come from this one set, so a button is never restyled per screen. */
    --color-action-bg: #FFFFFF;
    --color-action-bg-hover: #F6EAC4;
    --color-action-bg-active: #EFD897;
    --color-action-fg: #16233A;
    --color-action-radius: 999px;

    --color-surface-page: #0F1B2E;
    --color-surface-section: #16233A;
    --color-surface-card: #1E2E49;
    --color-surface-raised: #243652;
    --color-surface-inset: #121C2E;

    --color-border-default: #31405C;
    --color-border-subtle: #243149;
    --color-border-strong: #46587A;

    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B8C7DE;
    --color-text-tertiary: #8AA0C0;
    --color-text-inverse: #16233A;

    --color-status-success: #6BD188;
    --color-status-success-surface: rgba(85,197,116,.14);
    --color-status-success-border: rgba(85,197,116,.45);
    --color-status-warning: #E8A33D;
    --color-status-warning-surface: rgba(232,163,61,.14);
    --color-status-warning-border: rgba(232,163,61,.42);
    --color-status-error: #FF6B60;
    --color-status-error-surface: rgba(243,74,63,.15);
    --color-status-error-border: rgba(243,74,63,.48);
    /* Information only. Never an action, never the brand colour. */
    --color-status-info: #9DBBE6;
    --color-status-info-surface: rgba(157,187,230,.13);
    --color-status-info-border: rgba(157,187,230,.38);

    --color-focus: #9DBBE6;
    --color-disabled-surface: #1E2C42;
    --color-disabled-text: #7286A3;
    --color-disabled-border: #2B3A54;

    --color-overlay: rgba(8,14,24,.74);
    --color-scrim: linear-gradient(180deg,rgba(15, 27, 46,0) 0%,rgba(15, 27, 46,.55) 55%,rgba(15, 27, 46,.94) 100%);

    /* On midnight these stay unused: depth comes from a lighter surface step
       plus a 1px border. Shadows on dark grounds read as haze. No glow, ever. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 14px rgba(0,0,0,.38);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
}

/* ---- Light ------------------------------------------------------------ */

[data-theme="light"] {
    --color-brand-primary: #A67F16;
    --color-brand-primary-hover: #7F6112;
    --color-brand-primary-active: #5C460F;
    --color-brand-on: #FFFFFF;
    --color-brand-subtle: #FBF5E4;
    --color-brand-border: #EFD897;

    --color-action-bg: #A67F16;
    --color-action-bg-hover: #7F6112;
    --color-action-bg-active: #5C460F;
    --color-action-fg: #FFFFFF;
    --color-action-radius: 4px;

    --color-surface-page: #F5F7F9;
    --color-surface-section: #FFFFFF;
    --color-surface-card: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-inset: #EDF1F5;

    --color-border-default: #DCE3EB;
    --color-border-subtle: #EAEFF4;
    --color-border-strong: #B9C6D4;

    --color-text-primary: #16233A;
    --color-text-secondary: #50627A;
    --color-text-tertiary: #6B7C90;
    --color-text-inverse: #FFFFFF;

    --color-status-success: #217A42;
    --color-status-success-surface: #E8F7ED;
    --color-status-success-border: #A9E0BB;
    --color-status-warning: #8A5306;
    --color-status-warning-surface: #FDF3E3;
    --color-status-warning-border: #EBCC94;
    --color-status-error: #C62A20;
    --color-status-error-surface: #FDECEA;
    --color-status-error-border: #F4B3AD;
    --color-status-info: #2B5FA8;
    --color-status-info-surface: #EDF3FB;
    --color-status-info-border: #BDD2EE;

    --color-focus: #7F6112;
    --color-disabled-surface: #EDF1F5;
    --color-disabled-text: #94A3B4;
    --color-disabled-border: #DCE3EB;

    --color-overlay: rgba(22, 35, 58,.55);
    --color-scrim: linear-gradient(180deg,rgba(22, 35, 58,0) 0%,rgba(22, 35, 58,.45) 55%,rgba(22, 35, 58,.86) 100%);

    --shadow-sm: 0 1px 2px rgba(22, 35, 58,.07);
    --shadow-md: 0 2px 10px rgba(22, 35, 58,.09);
    --shadow-lg: 0 12px 32px rgba(22, 35, 58,.12);
}

/* ---- base ------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body.tt {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    background: var(--color-surface-page);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

body.tt * {
    box-sizing: border-box;
}

/* Wrapped in :where() so it contributes no specificity. This is a default,
   not a rule: any component that sets its own link colour — a button, a nav
   item, a header pill — must win without having to out-specify the base, or
   its label renders in the link colour on top of a brand fill. */
:where(body.tt) a {
    color: var(--color-brand-primary);
    text-decoration: none;
}

:where(body.tt) a:where(:hover) {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.tt :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

body.tt ::selection {
    background: var(--color-brand-subtle);
}

body.tt input,
body.tt select,
body.tt textarea,
body.tt button {
    font-family: inherit;
}

/* Headings align to the start edge in both directions. No centred headings,
   no centred body copy. */
body.tt h1,
body.tt h2,
body.tt h3 {
    text-align: start;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-normal);
}

/* ---- shared primitives ------------------------------------------------ */

.tt-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.tt-eyebrow {
    margin: 0;
    font-size: var(--text-meta);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-brand-primary);
}

.tt-measure {
    max-width: var(--measure);
}

[dir="rtl"] .tt-measure {
    max-width: var(--measure-ar);
}

/* Buttons: every variant carries a filled brand surface or a visible 1px
   border. No button relies on colour alone, and none of them glow. */
/* Buttons: every variant carries a filled brand surface or a visible 1px
   border. No button relies on colour alone, and none of them glow.
   Scoped under body.tt so these beat the page-wide `body.tt a` colour —
   without it an anchor button renders its label in the link colour, which on
   a brand fill is the same colour as the fill. */
body.tt .tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--color-action-radius);
    border: 1px solid transparent;
    font-size: var(--text-button);
    font-weight: 700;
    line-height: 1;
    min-height: 52px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

    body.tt .tt-btn:hover {
        text-decoration: none;
    }

body.tt .tt-btn-primary {
    background: var(--color-action-bg);
    color: var(--color-action-fg);
}

    body.tt .tt-btn-primary:hover {
        background: var(--color-action-bg-hover);
        color: var(--color-action-fg);
    }

    body.tt .tt-btn-primary:active {
        background: var(--color-action-bg-active);
    }

body.tt .tt-btn-secondary {
    background: transparent;
    border-color: var(--color-brand-border);
    color: var(--color-brand-primary);
}

    body.tt .tt-btn-secondary:hover {
        background: var(--color-brand-subtle);
        color: var(--color-brand-primary-hover);
    }

body.tt .tt-btn-tertiary {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

    body.tt .tt-btn-tertiary:hover {
        background: var(--color-surface-inset);
        color: var(--color-text-primary);
    }

body.tt .tt-btn[disabled],
body.tt .tt-btn.is-disabled {
    background: var(--color-disabled-surface);
    border-color: var(--color-disabled-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

/* Below 640px the primary and secondary actions go full width and stack. */
@media (max-width: 639px) {
    .tt-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

        .tt-actions .tt-btn {
            width: 100%;
        }
}

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

    body.tt *,
    body.tt *::before,
    body.tt *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}