/*
  Design tokens for the MP Office Portal.
  The palette comes from the office's own stationery: the gold ribbon and navy
  signature of the birthday letter, and the green of the official letterhead,
  so the screen matches the paper. Old --color-* names are kept at the bottom
  because earlier screens still use them.
*/

/* Self-hosted so the portal works on a slow connection and offline. */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Gujarati'; font-weight: 400; font-display: swap; src: url('/fonts/NotoSansGujarati-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Gujarati'; font-weight: 600; font-display: swap; src: url('/fonts/NotoSansGujarati-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Devanagari'; font-weight: 400; font-display: swap; src: url('/fonts/NotoSansDevanagari-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url('/fonts/Cinzel-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: italic; font-display: swap; src: url('/fonts/CormorantGaramond-600-italic.woff2') format('woff2'); }

:root {
  /* Gold, from the letterhead ribbon */
  --gold-900: #7a5c22;
  --gold-700: #9a742f;
  --gold-500: #b08840;
  --gold-300: #d4b25c;
  --gold-200: #f0dc86;
  --gold-050: #fbf6e9;

  /* Navy, from the signature and the masthead */
  --navy-900: #0b1548;
  --navy-700: #0f1f6b;
  --navy-500: #1b2a7a;
  --navy-100: #e6e9f5;

  /* Official green, from the railway letterhead */
  --green-700: #2c6b3f;
  --green-500: #408050;
  --green-100: #e8f2ea;

  --saffron-500: #f47216;

  /* Neutrals on warm paper */
  --paper: #fffdf8;
  --surface: #ffffff;
  --surface-2: #f7f4ec;
  --line: #e5ddc9;
  --line-strong: #d3c8ad;
  --ink: #1c1c1c;
  --ink-2: #4a4a4a;
  --ink-3: #6f6a5e;

  /* Status */
  --ok-500: #1e7a3e;
  --ok-100: #e7f5ec;
  --warn-500: #b7791f;
  --warn-100: #fdf3e0;
  --danger-500: #b42318;
  --danger-100: #fdecea;
  --info-500: #1b5fa8;
  --info-100: #e8f1fb;

  /* Type */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-gu: 'Noto Sans Gujarati', 'Inter', system-ui, sans-serif;
  --font-hi: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
  --font-display: 'Cinzel', Georgia, serif;
  --font-serif-italic: 'Cormorant Garamond', Georgia, serif;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15.5px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* Space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(28, 22, 8, .06);
  --shadow: 0 2px 8px rgba(28, 22, 8, .08);
  --shadow-lg: 0 10px 30px rgba(28, 22, 8, .12);

  --header-h: 64px;
  --tabbar-h: 62px;
  --content-max: 1080px;

  /* Names used by the first screens, kept so nothing breaks. */
  --color-gold: var(--gold-500);
  --color-navy: var(--navy-700);
  --color-green: var(--green-500);
  --color-paper: var(--paper);
  --color-text: var(--ink);
  --color-error: var(--danger-500);
  --color-border: var(--line);
  --font-latin: var(--font-ui);
  --font-gujarati: var(--font-gu);
  --space-1: var(--s1);
  --space-2: var(--s2);
  --space-3: var(--s4);
  --space-4: var(--s5);
  --radius: 10px;
}