/* ============================================================
   DESIGN TOKENS — AWS SBG UNIFAL-MG
   Fontes, cores, tipografia, espaçamento e sombras do site.
   Tudo aqui é usado via var(--nome) no style.css.
   ============================================================ */

/* --- fontes (Amazon Ember) --------------------------------- */
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Mono";
  src: url("fonts/AmazonEmberMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Mono";
  src: url("fonts/AmazonEmberMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* pilhas de fonte */
  --font-display: "Amazon Ember Display", Arial, sans-serif;
  --font-duospace: "Amazon Ember Duospace", "Amazon Ember Mono", monospace;
  --font-mono: "Amazon Ember Mono", monospace;

  /* cores base */
  --grey-850: #151D25;
  --grey-700: #2B3440;
  --grey-500: #5B6673;
  --grey-300: #98A2AD;
  --grey-100: #E7EAEE;
  --white:    #FFFFFF;
  --amber:    #FF9900;
  --blue:     #41B3FF;
  --mint:     #00E582;
  --purple:   #AC5BFF;
  --magenta:  #FF57E9;

  /* cores semânticas */
  --bg-canvas: var(--white);
  --bg-inverse: var(--grey-850);
  --surface-card: var(--white);
  --surface-card-inverse: var(--grey-700);
  --border-subtle: var(--grey-100);
  --border-inverse: rgba(255, 255, 255, .16);
  --text-primary: var(--grey-850);
  --text-secondary: var(--grey-500);
  --text-on-inverse: var(--white);
  --text-on-inverse-secondary: var(--grey-300);
  --accent-primary: var(--amber);
  --accent-primary-hover: #E68A00;
  --accent-primary-active: #CC7A00;
  --link: var(--blue);
  --link-hover: #2496E8;
  --focus-ring: var(--blue);

  /* tipografia (peso / tamanho / altura-de-linha / fonte) */
  --text-display-xl: 700 64px/1.05 var(--font-display);
  --text-display-lg: 700 48px/1.1  var(--font-display);
  --text-display-md: 700 34px/1.15 var(--font-display);
  --text-heading-lg: 500 26px/1.25 var(--font-display);
  --text-heading-md: 500 20px/1.3  var(--font-display);
  --text-body-lg:    400 18px/1.55 var(--font-display);
  --text-body-md:    400 16px/1.55 var(--font-display);
  --text-body-sm:    400 14px/1.5  var(--font-display);
  --text-label:      500 13px/1.3  var(--font-duospace);
  --text-eyebrow:    700 13px/1.2  var(--font-duospace);
  --text-mono:       400 14px/1.5  var(--font-mono);
  --tracking-eyebrow: .08em;

  /* espaçamento */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* raios e sombras */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 29, 37, .08);
  --shadow-md: 0 4px 16px rgba(21, 29, 37, .10);
  --shadow-lg: 0 12px 32px rgba(21, 29, 37, .14);
  --grid-unit: 37.5px;
}