@import './dist/css/_primitives.css';
@import './dist/css/_semantics.css';

/* ============================================================
   Interface Design Kit Documentation — FernUni Schweiz | UniDistance Suisse
   Base stylesheet — CSS Version
   ============================================================ */

/* ----- Doc-only tokens ----- */
/*
  Primitives et sémantiques proviennent de _primitives.css et _semantics.css
  (auto-generated by Style Dictionary). Ce bloc définit uniquement les aliases
  propres à la documentation qui n'existent pas dans ces fichiers.
*/

:root {
  /* --- Faculty icons (unicode) --- */
  --icon-economy:     "\e900";
  --icon-history:     "\e901";
  --icon-law:         "\e902";
  --icon-mathematics: "\e903";
  --icon-psychology:  "\e904";

  /* --- Semantic border radius aliases --- */
  --radius-btn:   var(--funid-border-radius-md);
  --radius-input: var(--funid-border-radius-md);
  --radius-card:  var(--funid-border-radius-lg);
  --radius-tag:   var(--funid-border-radius-circle);
  --radius-modal: var(--funid-border-radius-lg);
  --radius-logo:  var(--funid-border-radius-brand);

  /* --- Semantic shadow aliases --- */
  --shadow-card:     var(--funid-box-shadow-sm);
  --shadow-dropdown: var(--funid-box-shadow-md);
  --shadow-modal:    var(--funid-box-shadow-lg);
  --shadow-sticky:   var(--funid-box-shadow-sm);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ----- Icons ----- */
@font-face {
  font-family: 'FunidIcons';
  src: url('assets/img/faculty-icons/unidistance.woff') format('woff');
}

/* ----- Layout ----- */
body {
  display: flex;
  min-height: 100vh;
  font-family: var(--funid-font-family-base);
  font-size: var(--funid-typography-body-md-font-size);
  line-height: var(--funid-typography-body-md-line-height);
  color: var(--funid-color-text-primary);
  background: var(--funid-color-surface-subtle);
}

/* ----- Sidebar ----- */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--funid-color-nav-header-background);
  border-right: var(--funid-border-width-sm) solid var(--funid-color-nav-header-border);
  display: flex;
  flex-direction: column;
  padding: var(--funid-spacing-8) var(--funid-spacing-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar__brand {
  margin-bottom: var(--funid-spacing-10);
}

.sidebar__brand-name {
  display: block;
  font-size: var(--funid-typography-body-md-font-size);
  font-weight: var(--funid-font-weight-50);
  color: var(--funid-color-nav-header-text);
}

.sidebar__brand-img {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: var(--funid-spacing-6);
}

.sidebar__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--funid-spacing-1);
}

.sidebar__nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--funid-spacing-2) var(--funid-spacing-3);
  border-radius: var(--funid-border-radius-lg);
  color: var(--funid-color-nav-header-text);
  text-decoration: none;
  font-size: var(--funid-typography-body-sm-font-size);
  font-weight: var(--funid-font-weight-30);
  letter-spacing: var(--funid-font-letter-spacing-20);
  transition: background var(--funid-transition-duration-fast) var(--funid-transition-easing-default),
              color var(--funid-transition-duration-fast) var(--funid-transition-easing-default);
}

.sidebar__nav a:hover {
  color: var(--funid-color-nav-header-text-hover);
  background: var(--funid-color-surface-brand-subtle);
}

.sidebar__nav a.active {
  color: var(--funid-color-nav-header-text-active);
  font-weight: var(--funid-font-weight-40);
  background: var(--funid-color-surface-brand-subtle);
}

/* ----- Main content ----- */
.content {
  flex: 1;
  padding: var(--funid-spacing-12) var(--funid-spacing-12);
  max-width: 975px;
}

/* ----- Page header ----- */
.page-header {
  margin-bottom: var(--funid-spacing-12);
}

.page-header h1 {
  font-size: var(--funid-typography-heading-h1-font-size);
  font-weight: var(--funid-typography-heading-h1-font-weight);
  line-height: var(--funid-typography-heading-h1-line-height);
  letter-spacing: var(--funid-typography-heading-h1-letter-spacing);
  color: var(--funid-color-text-primary);
  margin-bottom: var(--funid-spacing-3);
}

.intro {
  font-size: var(--funid-typography-body-lg-font-size);
  font-weight: var(--funid-typography-body-lg-font-weight);
  line-height: var(--funid-typography-body-lg-line-height);
  letter-spacing: var(--funid-typography-body-lg-letter-spacing);
  color: var(--funid-color-text-secondary);
}

/* ----- Sections ----- */
.doc-section {
  margin-bottom: var(--funid-spacing-12);
}

.doc-section h2 {
  font-family: var(--funid-font-family-headings);
  font-size: var(--funid-typography-heading-h2-font-size);
  font-weight: var(--funid-typography-heading-h2-font-weight);
  line-height: var(--funid-typography-heading-h2-line-height);
  letter-spacing: var(--funid-typography-heading-h2-letter-spacing);
  color: var(--funid-color-text-primary);
  text-transform: none;
  border-bottom: 2px solid var(--funid-color-border-subtle);
  padding: 0 0 var(--funid-spacing-2) 0;
  margin-top: 0;
  margin-bottom: var(--funid-spacing-5);
}

.doc-section h3 {
  font-size: var(--funid-typography-body-md-font-size);
  font-weight: var(--funid-typography-heading-xs-font-weight);
  line-height: var(--funid-typography-heading-xs-line-height);
  color: var(--funid-color-text-primary);
  margin-bottom: var(--funid-spacing-2);
  margin-top: var(--funid-spacing-5);
}

/* ----- Color swatches ----- */
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--funid-spacing-2);
  margin-bottom: var(--funid-spacing-3);
}

.swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 90px;
  height: 90px;
  border-radius: var(--funid-border-radius-md);
  padding: var(--funid-spacing-2);
  font-size: 0.65rem;
  border: var(--funid-border-width-sm) solid var(--funid-color-border-subtle);
}

.swatch span {
  font-weight: var(--funid-font-weight-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swatch code {
  font-size: 0.6rem;
  opacity: var(--funid-opacity-80);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--funid-spacing-4);
  margin-top: var(--funid-spacing-3);
}

.color-card {
  padding: var(--funid-spacing-4);
  border-radius: var(--funid-border-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--funid-spacing-2);
  font-size: 0.75rem;
  border: var(--funid-border-width-sm) solid rgba(0, 0, 0, 0.05);
}

.color-card strong {
  font-size: 0.7rem;
}

/* ----- Token tables ----- */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--funid-typography-body-sm-font-size);
}

.token-table th {
  text-align: left;
  padding: var(--funid-spacing-2) var(--funid-spacing-3);
  background: var(--funid-color-state-disabled-surface);
  font-weight: var(--funid-font-weight-40);
  font-size: var(--funid-typography-body-xs-font-size);
  color: var(--funid-color-text-primary);
}

.token-table td {
  padding: var(--funid-spacing-2) var(--funid-spacing-3);
  border-bottom: var(--funid-border-width-sm) solid var(--funid-color-border-subtle);
  vertical-align: middle;
}

.token-table code {
  font-size: var(--funid-typography-body-xs-font-size);
  background: var(--funid-color-surface-muted);
  padding: 2px 6px;
  border-radius: var(--funid-border-radius-sm);
}

/* ----- Spacing demos ----- */
.spacing-demo {
  height: 16px;
  background: var(--funid-color-brand-secondary);
  border-radius: var(--funid-border-radius-sm);
}

/* ----- Border radius demos ----- */
.radius-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--funid-spacing-4);
  margin-top: var(--funid-spacing-3);
}

.radius-demo {
  width: 90px;
  height: 90px;
  background: var(--funid-color-surface-brand-muted);
  border: var(--funid-border-width-md) solid var(--funid-color-brand-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-align: center;
  gap: var(--funid-spacing-1);
  padding: var(--funid-spacing-2);
}

.radius-demo span { font-weight: var(--funid-font-weight-40); color: var(--funid-color-brand-primary); }
.radius-demo code { color: var(--funid-color-text-primary); }

/* ----- Shadow demos ----- */
.shadow-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--funid-spacing-8);
  padding: var(--funid-spacing-4) var(--funid-spacing-2);
}

.shadow-demo {
  width: 120px;
  height: 80px;
  background: var(--funid-color-surface-page);
  border-radius: var(--funid-border-radius-md);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--funid-spacing-2);
  font-size: var(--funid-typography-body-xs-font-size);
  font-weight: var(--funid-font-weight-40);
  color: var(--funid-color-brand-primary);
}

/* ----- Homepage cards ----- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--funid-spacing-5);
  margin-top: var(--funid-spacing-4);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--funid-spacing-2);
  padding: var(--funid-spacing-6);
  background: var(--funid-color-surface-page);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  border: var(--funid-border-width-sm) solid var(--funid-color-border-default);
  transition: box-shadow var(--funid-transition-duration-base) var(--funid-transition-easing-default),
              transform var(--funid-transition-duration-base) var(--funid-transition-easing-default);
}

.card:hover {
  box-shadow: var(--shadow-dropdown);
  transform: translateY(-2px);
}

.card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--funid-spacing-1);
}

.card h2 {
  font-size: var(--funid-typography-body-md-font-size);
  font-weight: var(--funid-typography-heading-xs-font-weight);
  color: var(--funid-color-brand-primary);
  border: none;
  padding: 0;
  margin: 0;
}

.card p {
  font-size: var(--funid-typography-body-sm-font-size);
  color: var(--funid-color-text-secondary);
  line-height: var(--funid-typography-body-sm-line-height);
}

/* ----- States grid ----- */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--funid-spacing-4);
  margin-top: var(--funid-spacing-3);
}

.state-card {
  padding: var(--funid-spacing-4);
  border-radius: var(--funid-border-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--funid-spacing-2);
}

.state-card code {
  font-size: var(--funid-typography-body-xs-font-size);
  opacity: var(--funid-opacity-80);
}

/* ----- Typo table ----- */
.typo-table td, .typo-table th {
  padding: var(--funid-spacing-3);
}

.typo-preview {
  background: var(--funid-color-surface-page);
  padding: var(--funid-spacing-6);
  border-radius: var(--radius-card);
  border: var(--funid-border-width-sm) solid var(--funid-color-border-subtle);
  margin-top: var(--funid-spacing-3);
}

/* ----- Faculty cards ----- */
.faculty-grid {
  display: flex;
  flex-direction: column;
  gap: var(--funid-spacing-6);
  margin-top: var(--funid-spacing-3);
}

.faculty-card {
  display: flex;
  gap: var(--funid-spacing-6);
  background: var(--funid-color-surface-page);
  border-radius: var(--radius-card);
  border: var(--funid-border-width-sm) solid var(--funid-color-border-subtle);
  padding: var(--funid-spacing-6);
  align-items: flex-start;
}

.faculty-card-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faculty-card-icon-psychology          { background: var(--funid-color-faculty-psychology-surface); }
.faculty-card-icon-psychology::before  {
  font-family: 'FunidIcons';
  content: var(--icon-psychology);
  font-size: 3rem;
  color: var(--funid-color-faculty-psychology-text);
}

.faculty-card-icon-history             { background: var(--funid-color-faculty-history-surface); }
.faculty-card-icon-history::before     {
  font-family: 'FunidIcons';
  content: var(--icon-history);
  font-size: 3rem;
  color: var(--funid-color-faculty-history-text);
}

.faculty-card-icon-law                 { background: var(--funid-color-faculty-law-surface); }
.faculty-card-icon-law::before         {
  font-family: 'FunidIcons';
  content: var(--icon-law);
  font-size: 3rem;
  color: var(--funid-color-faculty-law-text);
}

.faculty-card-icon-mathematics         { background: var(--funid-color-faculty-mathematics-surface); }
.faculty-card-icon-mathematics::before {
  font-family: 'FunidIcons';
  content: var(--icon-mathematics);
  font-size: 3rem;
  color: var(--funid-color-faculty-mathematics-text);
}

.faculty-card-icon-economy             { background: var(--funid-color-faculty-economics-surface); }
.faculty-card-icon-economy::before     {
  font-family: 'FunidIcons';
  content: var(--icon-economy);
  font-size: 3rem;
  color: var(--funid-color-faculty-economics-text);
}

.faculty-card__info {
  flex: 1;
}

.faculty-card__info h3 {
  font-size: var(--funid-typography-heading-xs-font-size);
  font-weight: var(--funid-typography-heading-xs-font-weight);
  margin-bottom: var(--funid-spacing-2);
}

.faculty-tokens {
  display: flex;
  gap: var(--funid-spacing-1);
  margin-bottom: var(--funid-spacing-3);
}

.mini-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--funid-border-radius-circle);
  border: var(--funid-border-width-sm) solid rgba(0, 0, 0, 0.1);
}

.token-table-sm {
  border-collapse: collapse;
  font-size: var(--funid-typography-body-xs-font-size);
  width: 100%;
}

.token-table-sm td {
  padding: var(--funid-spacing-1) var(--funid-spacing-2);
  border-bottom: var(--funid-border-width-sm) solid var(--funid-color-border-subtle);
}

.token-table-sm td:first-child code {
  background: var(--funid-color-surface-muted);
  padding: 1px 5px;
  border-radius: var(--funid-border-radius-sm);
}

/* --- Anatomy block --- */
.anatomy-block {
  background: var(--funid-color-surface-page);
  border: 1px solid var(--funid-color-border-default);
  border-radius: 10px;
  padding: 2rem;
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}
 
.anatomy-token {
  display: flex;
  align-items: stretch;
  font-family: 'Courier New', monospace;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 8px;
  overflow: visible;
  gap: 0;
}
 
.anatomy-sep {
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: #888;
  font-weight: 300;
  font-size: 1.5rem;
}
 
.anatomy-part {
  position: relative;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
}
 
.anatomy-part[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: -1.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
 
.anatomy-part--category { background: #E6F1FB; color: #0C447C; }
.anatomy-part--category::after { color: #0C447C; }
.anatomy-part--group { background: #E1F5EE; color: #085041; }
.anatomy-part--group::after { color: #085041; }
.anatomy-part--variant { background: #EEEDFE; color: #3C3489; }
.anatomy-part--variant::after { color: #3C3489; }
 
/* --- Three-column cards --- */
.anatomy-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
}
 
.anatomy-part-card {
  background: var(--funid-color-surface-page);
  border: 1px solid var(--funid-color-border-default);
  border-radius: var(--funid-border-radius-md);
  padding: 1.25rem;
}
 
.anatomy-part-card__num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
 
.anatomy-part-card--category .anatomy-part-card__num { background: #E6F1FB; color: #0C447C; }
.anatomy-part-card--group    .anatomy-part-card__num { background: #E1F5EE; color: #085041; }
.anatomy-part-card--variant  .anatomy-part-card__num { background: #EEEDFE; color: #3C3489; }
 
.anatomy-part-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
 
.anatomy-part-card p {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
 
.anatomy-part-card ul {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.78rem;
  color: #555;
  line-height: 1.7;
}
 
/* --- Callout --- */
.naming-callout {
  background: var(--funid-color-surface-brand-subtle);
  border: 1px solid var(--funid-color-border-brand-light);
  border-radius: var(--funid-border-radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--funid-color-text-primary);
  line-height: 1.6;
  margin: 1.5rem 0 2rem;
}
 
.naming-callout strong { color: var(--funid-color-text-primary); }
 
.examples-title { margin-top: 2rem; }