/* Junior SNS Student App – design tokens. Change colours/fonts here only.
   Brand colour #98012e (school maroon) is the same as the existing website theme. */
@font-face { font-family: "Outfit"; font-weight: 400; src: url("fonts/Outfit-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 500; src: url("fonts/Outfit-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 600; src: url("fonts/Outfit-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 700; src: url("fonts/Outfit-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 800; src: url("fonts/Outfit-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Caveat"; font-weight: 400 700; src: url("fonts/Caveat.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; src: url("fonts/BarlowCondensed-ExtraBold.ttf") format("truetype"); font-display: swap; }

:root {
  /* Brand: school maroon */
  --brand: #98012e;        /* buttons, links, active nav */
  --brand-2: #b3274f;
  --brand-soft: #fbe9ee;   /* tinted backgrounds */
  --appbar: #98012e;       /* app bar and login header */
  --on-appbar: #ffffff;
  --on-brand: #ffffff;
  --btn-bg: #98012e; --btn-fg: #ffffff;   /* filled buttons */
  --field: #ffffff;        /* input background */

  /* Neutrals (slightly warm to sit with the maroon) */
  --paper: #f7f4f5;        /* app background */
  --sheet: #ffffff;        /* cards */
  --rule: #e6d9de;         /* borders */
  --line: #e6d9de;         /* notebook ruled lines */
  --raised: #ffffff;       /* selected tab, popovers */
  --well: #f3ecee;         /* inset areas: tab track, calendar days */
  --unread: #fdf6e3;       /* unread list row */
  --banner-bg: #f4b400; --banner-fg: #3a2f00; --banner-btn-bg: #3a2f00; --banner-btn-fg: #ffffff;
  --text: #2a1a20;
  --muted: #75616a;

  /* Accents with one job each */
  --hl: #f4b400;           /* gold highlighter: due today, focus, badges */
  --margin: #c24a68;       /* notebook margin line */
  --pen: #1f3f9e;          /* teacher's blue pen: remarks, "Checked" stamp */
  --star: #e3a008;         /* teacher stars */
  --bad: #d93025;          /* absent, dues, errors */
  --ok: #1b8a5a;           /* present, paid */
  --warn: #b86e00;         /* due soon */

  /* Type */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-brand: "Barlow Condensed", "Arial Narrow", sans-serif;   /* wordmark only, like the current site logo */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.6rem; --fs-2xl: 2.2rem;

  /* Shape & space */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow: 0 1px 2px rgba(60,10,25,.06), 0 6px 18px rgba(60,10,25,.07);
  --tap: 44px;
  --nav-h: 64px;
  --ruled: 28px;           /* distance between notebook lines */
}

/* Dark theme: layered charcoal (paper < sheet < well < raised), maroon on the app bar, rose for text accents,
   a deeper rose for filled buttons so they are not a big pastel block. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #ff9db5; --brand-2: #ffc2d1; --brand-soft: #3a2029; --appbar: #6b0a27; --on-appbar: #ffffff; --on-brand: #2a0a14;
  --btn-bg: #cf2f5b; --btn-fg: #ffffff;
  --paper: #0e0c0e; --sheet: #1b171a; --raised: #352d32; --well: #262124; --field: #262124;
  --rule: #332c30; --line: #40373c;
  --text: #f4eef0; --muted: #b8a9af;
  --hl: #f4b400; --margin: #ff9db5; --pen: #9db8ff; --star: #ffc83d; --bad: #ff7a7a; --ok: #4cd29a; --warn: #f2a640;
  --unread: #2a2415;
  --banner-bg: #3a2f10; --banner-fg: #ffd466; --banner-btn-bg: #f4b400; --banner-btn-fg: #2a1f00;
  --shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.45);
}