/* ===========================================================================
   USSH DKHP — Yolth-inspired design tokens
   Adapted from Yolth Education design system by Tho Nguyen.
   Colors, typography, radii, shadows only — USSH identity/logo preserved.
   =========================================================================== */

@font-face {
  font-family: 'Young Display';
  src: url('/fonts/Young_Typeface_Bold_Display.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Young';
  src: url('/fonts/Young_Typeface.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Pine (primary) */
  --pine-50:#EDF4F3; --pine-100:#D4E5E3; --pine-200:#ABCAC7; --pine-300:#7FAFAB;
  --pine-400:#4F8B86; --pine-500:#336B66; --pine-600:#245450; --pine-700:#1F4845;
  --pine-800:#183D3D; --pine-900:#122F2F; --pine-950:#0B1F1F;

  /* Carmine (accent / error) */
  --carmine-50:#FDEDF1; --carmine-100:#F9D5DD; --carmine-200:#F2A8BA;
  --carmine-300:#E97A95; --carmine-400:#DC4970; --carmine-500:#C12553;
  --carmine-600:#A0153E; --carmine-700:#84122F; --carmine-800:#5A0C24;
  --carmine-900:#420B1B; --carmine-950:#2A0510;

  /* Midnight (info / depth) */
  --midnight-50:#EEEDF6; --midnight-100:#D7D6EC; --midnight-200:#B0AED7;
  --midnight-300:#8784BD; --midnight-400:#5C5996; --midnight-500:#3D3A76;
  --midnight-600:#2A285F; --midnight-700:#1B1A55; --midnight-800:#161443;
  --midnight-900:#0F0E33; --midnight-950:#07061E;

  /* Warm grays */
  --gray-50:#F6F5F1; --gray-100:#E9E7DF; --gray-200:#D2CFC4; --gray-300:#B2AE9F;
  --gray-400:#8B8775; --gray-500:#706C5B; --gray-600:#5F5C4D; --gray-700:#514E42;
  --gray-800:#464339; --gray-900:#3E3C33; --gray-950:#2D2C25;

  /* Canvas */
  --paper:#FAFAF8; --paper-soft:#F6F5F1; --sand:#E9E7DF; --sun:#F4EFE6;
  --white:#FFFFFF; --black:#000000;

  /* Semantic */
  --success-100:#D6FFEA; --success-200:#00A65A;
  --error-100:var(--carmine-100); --error-200:var(--carmine-600);
  --warning-100:#FFEFD4; --warning-200:#E08800;
  --information-100:var(--midnight-100); --information-200:var(--midnight-700);

  /* Semantic surfaces */
  --fg-default:var(--gray-950); --fg-muted:var(--gray-500); --fg-subtle:var(--gray-400);
  --fg-disabled:var(--gray-300); --fg-on-pine:var(--sun); --fg-on-carmine:var(--white);
  --fg-on-sun:var(--gray-950); --fg-link:var(--pine-800);
  --bg-default:var(--paper); --bg-card:var(--white); --bg-soft:var(--paper-soft);
  --bg-sunken:var(--sand); --bg-info:var(--pine-50);
  --border-default:var(--sand); --border-strong:var(--gray-200); --border-focus:var(--pine-500);

  /* Radius */
  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px;
  --r-16:16px; --r-20:20px; --r-24:24px; --r-full:9999px;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px; --s-13:120px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(45,44,37,.04), 0 8px 24px rgba(45,44,37,.06);
  --shadow-raised: 0 2px 4px rgba(45,44,37,.06), 0 16px 40px rgba(45,44,37,.10);

  /* Chunky-press button drops */
  --press-pine:    0 3px 0 0 var(--pine-950);
  --press-carmine: 0 3px 0 0 var(--carmine-800);
  --press-midnight:0 3px 0 0 var(--midnight-900);
  --press-sand:    0 3px 0 0 var(--gray-200);
  --press-paper:   0 3px 0 0 var(--sand);

  /* Fonts */
  --font-display: 'Young Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Young', 'Inter', system-ui, -apple-system, sans-serif;
  --font-label:   'Young Display', 'Young', system-ui, sans-serif;
}

/* Reset canvas to Paper — brand rule: never pure white, never pure black */
html, body {
  background: var(--paper);
  color: var(--fg-default);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Editorial hairline links */
a {
  color: var(--fg-link);
  text-decoration-color: var(--pine-300);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--pine-500); }

/* Sunken sections (sidebars etc.) */
.ussh-sunken { background: var(--bg-sunken); }
.ussh-paper  { background: var(--paper); }
.ussh-card   { background: var(--bg-card); border-radius: var(--r-16); box-shadow: var(--shadow-card); }

/* Chunky-press primary button (utility for non-MUI buttons) */
.ussh-press-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--pine-800); color: var(--sun);
  border: 0; padding: 12px 22px; border-radius: var(--r-10);
  font: 700 15px/1.2 var(--font-label); letter-spacing: -.005em;
  box-shadow: var(--press-pine); cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out;
}
.ussh-press-btn:hover  { background: var(--pine-700); }
.ussh-press-btn:active { transform: translateY(3px); box-shadow: none; }

.ussh-press-btn.carmine { background: var(--carmine-600); color: var(--white); box-shadow: var(--press-carmine); }
.ussh-press-btn.carmine:hover  { background: var(--carmine-500); }
.ussh-press-btn.midnight { background: var(--midnight-700); color: var(--white); box-shadow: var(--press-midnight); }

/* Eyebrow label */
.ussh-eyebrow {
  font-family: var(--font-label); font-weight: 700;
  font-size: 12px; line-height: 16px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-muted);
}