/* =========================================================
   SMART INDIA HACKATHON PORTAL
   Saranathan College of Engineering

   DESIGN TOKENS
========================================================= */

:root{

    /* ==========================
       BRAND
    ========================== */

    --primary:#0A5AE0;
    --primary-dark:#0743AC;
    --primary-hover:#0B63F6;
    --primary-light:#E8F0FE;
    --primary-soft:#F3F7FF;

    --secondary:#5B4BE1;
    --accent:#00A9A5;
    --accent-warm:#FF7A45;

    /* ==========================
       INK
    ========================== */

    --text:#0B1120;
    --text-strong:#05070D;
    --text-light:#454F63;
    --text-muted:#6B7688;
    --text-faint:#939CAD;
    --text-invert:#FFFFFF;

    /* ==========================
       SURFACES
    ========================== */

    --background:#FFFFFF;
    --background-alt:#F5F8FD;
    --background-deep:#0A1730;
    --surface:#FFFFFF;
    --surface-light:#F4F7FC;
    --surface-sunken:#EAF0F9;
    --surface-glass:rgba(255,255,255,.72);
    --surface-glass-dark:rgba(10,23,48,.62);

    /* ==========================
       INK SURFACES  (dark half)

       The portal alternates light bands with deep blue
       "ink" bands. Everything that sits on a dark band
       reads from this group instead of the light one.
    ========================== */

    --ink-950:#060E1F;
    --ink-900:#0A1730;
    --ink-850:#0C1D3B;
    --ink-800:#102449;
    --ink-700:#16305F;

    --ink-heading:#F7FAFF;
    --ink-text:rgba(226,237,255,.86);
    --ink-text-soft:rgba(218,232,255,.68);
    --ink-text-faint:rgba(206,224,255,.46);

    --ink-line:rgba(150,183,255,.16);
    --ink-line-strong:rgba(150,183,255,.30);

    --ink-card:rgba(255,255,255,.055);
    --ink-card-hover:rgba(255,255,255,.10);
    --ink-chip:rgba(120,163,255,.16);

    --ink-accent:#8FB8FF;
    --ink-accent-soft:#B6CEFF;

    /* Warm counterpoint — icons in this colour stay legible
       against the deep blue in a way another blue cannot. */

    --ink-accent-warm:#FFC46B;

    /* ==========================
       STATUS
    ========================== */

    --success:#0E8A45;
    --success-light:#E5F6EC;
    --warning:#B4690E;
    --warning-light:#FDF3E3;
    --danger:#C62828;
    --danger-light:#FDECEC;
    --info:#0A6FBF;
    --info-light:#E7F2FB;

    /* ==========================
       LINES
    ========================== */

    --border:#E3E8EF;
    --border-strong:#D2D9E4;
    --border-soft:#EEF1F6;
    --divider:rgba(11,17,32,.08);

    /* ==========================
       GRADIENTS
    ========================== */

    --gradient-primary:linear-gradient(135deg,#0A5AE0 0%,#5B4BE1 100%);
    --gradient-accent:linear-gradient(135deg,#0B63F6 0%,#00A9A5 100%);
    --gradient-warm:linear-gradient(135deg,#FF7A45 0%,#F0A93B 100%);
    --gradient-ink:linear-gradient(160deg,#11294F 0%,#0B1B37 58%,#081327 100%);
    --gradient-ink-flat:linear-gradient(180deg,#0B1A36 0%,#0A1730 55%,#081227 100%);
    --gradient-sheen:linear-gradient(
        180deg,
        rgba(255,255,255,.9) 0%,
        rgba(255,255,255,.4) 100%);

    --gradient-text:linear-gradient(120deg,#0B1120 0%,#0A5AE0 55%,#5B4BE1 100%);

    /* Same idea, tuned for type sitting on the ink bands */

    --gradient-text-ink:linear-gradient(
        118deg,#FFFFFF 0%,#B9D0FF 46%,#C3B4FF 100%);

    /* Soft light rising out of a dark band into a light one */

    --gradient-dawn:linear-gradient(
        180deg,rgba(10,23,48,0) 0%,rgba(10,23,48,.06) 100%);

    /* ==========================
       ELEVATION
    ========================== */

    --shadow-xs:0 1px 2px rgba(11,17,32,.05);
    --shadow-sm:0 2px 10px rgba(11,17,32,.06);
    --shadow-md:0 10px 30px -8px rgba(11,17,32,.12);
    --shadow-lg:0 24px 60px -18px rgba(11,17,32,.20);
    --shadow-xl:0 44px 90px -28px rgba(11,17,32,.28);
    --shadow-glow:0 18px 45px -14px rgba(10,90,224,.45);
    --shadow-inset:inset 0 1px 0 rgba(255,255,255,.65);

    /* Elevation for cards floating on the dark bands */

    --shadow-ink:0 30px 70px -30px rgba(2,8,22,.85);
    --shadow-ink-inset:inset 0 1px 0 rgba(255,255,255,.10);

    /* ==========================
       RADIUS
    ========================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;
    --radius-2xl:40px;
    --radius-pill:999px;

    /* ==========================
       MOTION
    ========================== */

    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    --transition:.28s var(--ease);
    --transition-slow:.55s var(--ease-out);

    /* ==========================
       LAYOUT
    ========================== */

    --navbar-height:72px;
    --logo-strip-height:56px;
    --sidebar-width:264px;
    --container:1180px;
    --container-wide:1320px;

    /* ==========================
       SPACING
    ========================== */

    --space-2xs:4px;
    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
    --space-2xl:72px;
    --space-3xl:104px;
    --space-4xl:140px;

    --section-padding:clamp(72px,9vw,128px);

    /* ==========================
       TYPOGRAPHY
    ========================== */

    --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display",
        "Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    --font-mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    --display-1:clamp(2.4rem,4.4vw,3.6rem);
    --display-2:clamp(1.95rem,3.4vw,2.9rem);
    --heading-1:clamp(1.85rem,3.2vw,2.65rem);
    --heading-2:clamp(1.45rem,2.2vw,1.9rem);
    --heading-3:1.2rem;
    --body-lg:clamp(1.05rem,1.35vw,1.2rem);
    --body:1rem;
    --body-sm:.9375rem;
    --caption:.8125rem;

    --tracking-tight:-.03em;
    --tracking-snug:-.015em;
    --tracking-wide:.08em;

    /* ==========================
       CONTROLS
    ========================== */

    --button-height:50px;
    --button-height-sm:40px;
    --input-height:52px;

    /* ==========================
       LAYERS
    ========================== */

    --z-base:1;
    --z-sticky:900;
    --z-sidebar:950;
    --z-navbar:1000;
    --z-modal:5000;
    --z-loader:9000;

}