/* ==================================================================
   JISETF — design tokens

   Every colour, size and spacing value the site uses is declared once,
   here. Nothing downstream writes a raw hex value or a raw pixel font
   size, so changing the brand is an edit in this file rather than a
   find-and-replace across the site.
   ================================================================== */

@font-face {
    font-family: "Cairo";
    src: url("../assets/fonts/cairo-arabic-latin.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- brand, unchanged from the identity ---- */
    --blue: #155789;
    --green: #0fba89;
    --gold: #f7b531;
    --ink: #313131;
    --white: #ffffff;

    /* ---- derived tones: same hues, for layering ---- */
    --blue-deep: #0e3f63;   /* the timeline ground, a shade under the brand blue */
    --green-dark: #0da678;  /* button hover */
    --paper: #f1f4f7;       /* cool near-white, biased toward the blue */
    --slate: #5c6e7e;       /* blue-biased grey for secondary text */
    --hairline: rgba(49, 49, 49, 0.12);

    /* ---- type ---- */
    --sans: "Cairo", "Segoe UI", system-ui, sans-serif;
    /* Reserved strictly for data — dates, grades, ordinals. A fair runs on
       dates and specimen labels; giving those a separate register keeps
       fact visually distinct from prose. */
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --text-sm: clamp(13.5px, 0.4vw + 12px, 15px);
    --text-base: clamp(15px, 0.9vw + 12px, 17px);
    --text-md: clamp(17px, 1vw + 13px, 20px);
    --text-lg: clamp(21px, 1.4vw + 15px, 26px);
    --text-xl: clamp(28px, 2.4vw + 18px, 44px);
    --text-2xl: clamp(38px, 5vw + 15px, 82px);
    --text-3xl: clamp(46px, 6.2vw + 14px, 104px);

    /* ---- layout ---- */
    --wrap: 1240px;
    --gutter: clamp(20px, 4vw, 64px);
    --measure: 62ch;
    --band-y: clamp(56px, 8vw, 118px);

    /* ---- the tile: one rounded corner, taken from the logo ---- */
    --tile-radius: 88px;
    --card-radius: 40px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 620px) {
    :root {
        --tile-radius: 56px;
        --card-radius: 28px;
    }
}