/* GENERATED from shared/tokens.css by tools/build.js. Do not edit this copy. */
/* ===========================================================================
   ROYAL PUBLIC — shared design tokens
   ---------------------------------------------------------------------------
   One file for the website AND the portal: brand colours, type, fluid spacing,
   tap sizes and the responsive guards. Edit it HERE, in shared/, then run
   node tools/build.js — that copies it to site/css/ and portal/css/, because
   the two are deployed as separate sites and cannot share a path at runtime.
   The copies are overwritten on every build; do not edit them.

   Breakpoints (CSS variables cannot be used inside @media, so these are the
   agreed numbers — use only these):
       480px   large phone      768px   tablet
       1024px  small laptop     1280px  desktop
   Everything is built phone-first and must work from 320px to 1920px.
   tools/responsive.js checks it.
   =========================================================================== */

@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Assamese (Bengali script), for the Assamese pages in site/as/. Declared under
   the same family names with a unicode-range, so every rule that says Outfit
   or Inter gets Assamese letters from Noto Sans Bengali, and a page with no
   Assamese on it never downloads the file. */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/noto-sans-bengali-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/noto-sans-bengali-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

:root {
  /* Brand. Provisional until the logo exists; change here and both follow. */
  --rp-navy:       #0B1A3B;
  --rp-navy-2:     #162952;
  --rp-navy-3:     #1E3A6B;
  --rp-gold:       #F5A623;   /* fills and accents only: fails contrast as text on white */
  --rp-gold-light: #FFC04D;
  --rp-gold-dark:  #B8700F;   /* gold that is safe as text on white */
  --rp-ink:        #1A1A2E;
  --rp-muted:      #5A6A8A;
  --rp-line:       #E3E8EF;
  --rp-bg:         #F8F9FF;
  --rp-white:      #FFFFFF;

  /* Type */
  --rp-font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --rp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --rp-text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --rp-text:      clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --rp-text-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --rp-h1:        clamp(1.9rem, 1.3rem + 3vw, 3.8rem);
  --rp-h2:        clamp(1.55rem, 1.2rem + 1.8vw, 2.8rem);
  --rp-h3:        clamp(1.2rem, 1.05rem + 0.8vw, 1.8rem);
  --rp-h4:        clamp(1.05rem, 1rem + 0.4vw, 1.4rem);

  /* Space. The gutter is the minimum side margin at every width. */
  --rp-gutter:    clamp(16px, 4vw, 32px);
  --rp-space-1:   4px;
  --rp-space-2:   8px;
  --rp-space-3:   clamp(12px, 1.5vw, 16px);
  --rp-space-4:   clamp(16px, 2.5vw, 24px);
  --rp-space-5:   clamp(24px, 4vw, 40px);
  --rp-space-6:   clamp(40px, 7vw, 72px);
  --rp-space-7:   clamp(56px, 10vw, 100px);

  /* Touch. Anything tappable is at least this tall on a phone. */
  --rp-tap:       44px;
  --rp-focus:     0 0 0 3px rgba(245, 166, 35, 0.55);

  --rp-radius-sm: 8px;
  --rp-radius:    12px;
  --rp-radius-lg: 20px;
}

/* ---------------------------------------------------- responsive guards --
   Cheap rules that stop the commonest ways a page grows wider than a phone. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe, canvas { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken strings: the school email alone is 41 characters, wider than
   a 320px screen at body size. Let it wrap instead of pushing the page. */
body { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Wide things (tables, timetables, registers) scroll inside their own box,
   never the page. Wrap them in <div class="rp-scroll-x">. */
.rp-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

:focus-visible { outline: none; box-shadow: var(--rp-focus); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Printing (report cards, receipts, slips) is always A4, whatever the screen. */
@media print {
  @page { size: A4; margin: 12mm; }
  .rp-no-print { display: none !important; }
}