/* ============================================================
   ZENITH — AL mock-exam platform
   Visual system built on the IFS design DNA (Euclid Circular A,
   circular geometry, 4px spacing, soft shadows) but recoloured to
   a trustworthy, exam-appropriate education palette.
   ============================================================ */

/* ---- Brand typeface: Euclid Circular A (Web-S) ---- */
@font-face{font-family:'Euclid Circular A';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/EuclidCircularA-Light-WebS.woff2') format('woff2');}
@font-face{font-family:'Euclid Circular A';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/EuclidCircularA-Regular-WebS.woff2') format('woff2');}
@font-face{font-family:'Euclid Circular A';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/EuclidCircularA-Medium-WebS.woff2') format('woff2');}
@font-face{font-family:'Euclid Circular A';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/EuclidCircularA-Semibold-WebS.woff2') format('woff2');}

/* Sinhala loaded via Google Fonts <link> in the HTML head (Noto Sans Sinhala) */

:root{
  /* ---- Education palette ---- */
  --navy:        #0E1F3D;   /* serious exam-hall anchor (replaces midnight) */
  --navy-2:      #16294B;   /* lifted dark surface */
  --navy-3:      #1F345E;   /* further lifted */
  --ink:         #14213D;

  --blue:        #1456C7;   /* primary trust blue */
  --blue-dark:   #0E3E91;   /* hover / pressed */
  --blue-soft:   #E7EFFC;   /* tint surface */
  --cyan:        #38B6E8;   /* highlight / info */
  --teal:        #0FA3A3;

  --green:       #12A66B;   /* success, marks, positive */
  --green-soft:  #E4F6EE;
  --amber:       #E8A317;   /* timer / caution */
  --amber-soft:  #FCF1DA;
  --red:         #D34141;   /* danger, sparingly */
  --red-soft:    #FBE9E9;

  /* ---- Neutrals (from IFS) ---- */
  --grey-1:      #4A5567;
  --grey-2:      #6B7686;   /* muted text */
  --grey-3:      #C8D2D7;   /* borders */
  --grey-4:      #E4EBF1;   /* light borders / dividers */
  --grey-5:      #F4F7FB;   /* page background */
  --white:       #FFFFFF;

  /* ---- Semantic ---- */
  --bg-page:     #F4F7FB;
  --bg-card:     #FFFFFF;
  --bg-inverse:  var(--navy);
  --fg:          #16223B;
  --fg-muted:    #6B7686;
  --fg-on-dark:  #FFFFFF;
  --fg-on-dark-muted: #A9B6CE;
  --border:      #E4EBF1;
  --border-strong:#CDD7E3;

  /* ---- Gradients (blue → cyan → green helix echo) ---- */
  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 55%, var(--green) 115%);
  --grad-z:     conic-gradient(from -90deg, var(--green), var(--cyan), var(--blue), var(--blue));
  --grad-navy:  radial-gradient(120% 90% at 12% 8%, #1B3A6B 0, transparent 55%),
                linear-gradient(150deg, #16294B 0%, #0E1F3D 60%, #0A1730 100%);

  /* ---- Type ---- */
  --font: 'Euclid Circular A', 'Noto Sans Sinhala', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-si: 'Noto Sans Sinhala', 'Euclid Circular A', sans-serif;
  --tr-head: -0.022em;
  --tr-body: -0.006em;
  --tr-caps: 0.07em;

  /* ---- Spacing (IFS 4px scale) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- Radii ---- */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; --r-full:50%;

  /* ---- Shadows (soft, IFS-style) ---- */
  --sh-xs: 0 1px 2px rgba(14,31,61,.06);
  --sh-sm: 0 2px 8px rgba(14,31,61,.07);
  --sh-md: 0 10px 28px rgba(14,31,61,.10);
  --sh-lg: 0 24px 56px rgba(14,31,61,.16);
  --sh-blue: 0 10px 30px rgba(20,86,199,.28);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  font-weight:400;
  color:var(--fg);
  background:var(--bg-page);
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.si{font-family:var(--font-si);letter-spacing:0;}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:#CBD5E4;border-radius:999px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#AEBBCE;background-clip:content-box;}

button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

/* utility type */
.eyebrow{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:var(--tr-caps);color:var(--blue);}
.mono-num{font-variant-numeric:tabular-nums;}

@keyframes zfade{from{transform:translateY(10px);}to{transform:none;}}
@keyframes zpop{from{transform:scale(.97);}to{transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}
/* opacity intentionally left at 1 throughout — an offscreen/paused animation
   clock must never be able to hide content. Motion is pure enhancement. */
.zfade{animation:zfade .4s cubic-bezier(.22,1,.36,1);}