/* Loyila site tokens. "Royal" theme: royal blue primary, flat gold and royal purple in support, navy ink, thick outlines, hard shadows.
   Tuned on 2026-09-17 to sit a step closer to professional: deeper blue and indigo, calmer coral and pink, yellow as an accent.
   The older token names (green, lime, cream) are kept as aliases so every stylesheet keeps working.
   To go back to the app's green palette, change the values in the "Aliases" block only. */

@font-face {
  font-family: 'Bagel Fat One';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bagel-fat-one-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/gabarito-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/gabarito-latin-ext-wght.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/martian-mono-latin-wght.woff2') format('woff2');
}

:root {
  /* ---- Palette ---- */
  --ink: #141a3d;   /* deep navy, used for text and every outline */
  --ink-soft: #232c5c;
  --paper: #ffffff;
  --page: #f7f8fd;   /* near-white with a faint cool tint. Royal blue is kept for the hero, the nav and page headers */
  --sun: #f2c14e;   /* gold, flat and matte */
  --sun-deep: #cf9a2a;
  --sun-soft: #fbebbf;
  --coral: #ebb03a;   /* the action colour: a slightly deeper gold */
  --coral-deep: #cf9a2a;
  --coral-soft: #fbebbf;
  --pink: #ddd3f5;   /* lilac, the light side of the purple */
  --pink-soft: #efecfb;
  --pink-panel: #efecfb;    /* large pink areas use this, the accent pink is for small things */
  --blue: #4169e1;   /* royal blue, the primary */
  --blue-deep: #2f54c4;
  --sky: #b9c8f5;   /* periwinkle, the light side of the blue */
  --sky-soft: #e6ecfc;
  --grape: #5b2a9d;   /* royal purple, white text */
  --grape-soft: #e6dcf6;

  /* ---- Aliases (old names, new colours) ---- */
  --green-900: var(--ink);
  --green-800: var(--blue-deep);
  --green-700: var(--blue);
  --green-600: var(--blue);
  --green-500: var(--grape);
  --green-100: var(--sky-soft);
  --lime-500: var(--sun);
  --lime-400: #f6d381;
  --lime-600: var(--sun-deep);
  --orange-500: var(--coral);
  --orange-600: var(--coral-deep);
  --orange-100: var(--coral-soft);
  --cream: var(--paper);
  --cream-deep: #eceef8;
  --white: var(--paper);
  --muted: #434a73;
  --muted-soft: #8c92b5;
  --hairline: var(--ink);
  --hairline-strong: var(--ink);

  /* ---- Semantic ---- */
  --bg: var(--page);
  --surface: var(--paper);
  --text: var(--ink);
  --text-muted: var(--muted);
  --accent: var(--sun);
  --brand: var(--blue);
  --highlight: var(--coral);
  --on-brand: #ffffff;
  --on-brand-muted: #dfe6ff;
  --on-accent: var(--ink);
  --focus: var(--ink);

  /* ---- Type ---- */
  --font-display: 'Bagel Fat One', 'Gabarito', system-ui, sans-serif;
  --font-body: 'Gabarito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.4375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.875rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.8vw, 4.25rem);
  --text-hero: clamp(2.75rem, 1.4rem + 6.4vw, 6rem);
  --leading-tight: 0.98;
  --leading-snug: 1.08;
  --leading-body: 1.5;
  --tracking-display: -0.005em;

  /* ---- Space (4pt) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 78rem;
  --container-narrow: 46rem;

  /* ---- Shape ---- */
  --line: 3px;
  --r-sm: 0.6rem;
  --r-md: 0.9rem;
  --r-lg: 1.25rem;
  --r-xl: 1.6rem;
  --r-2xl: 2.2rem;
  --r-pill: 999px;
  --r-cut: 1.8rem 1.1rem 1.7rem 1.2rem;   /* slightly uneven, like something cut by hand */

  /* ---- Elevation: hard shadows only ---- */
  --drop: 5px 5px 0 var(--ink);
  --drop-lg: 9px 9px 0 var(--ink);
  --drop-sm: 3px 3px 0 var(--ink);
  --shadow-sm: var(--drop-sm);
  --shadow-md: var(--drop);
  --shadow-lg: var(--drop-lg);
  --shadow-card: var(--drop);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.5, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;

  /* ---- Layers ---- */
  --z-nav: 40; --z-hud: 50; --z-menu: 60; --z-cursor: 100;

  color-scheme: light;
}