/* ============================================================
   IPÊ-CONST — Design Tokens
   Instituto de Pesquisas Constitucionais UERJ
   Baseado na Proposta 02 de identidade visual (maio 2026)
   ============================================================ */

/* ------------------------------------------------------------
   BASE
   1rem = 10px (definido no html abaixo)
   Fórmula: valor em px ÷ 10 = valor em rem
   ------------------------------------------------------------ */

html {
  font-size: 62.5%;
}

/* ------------------------------------------------------------
   COLORS — PRIMITIVES
   3 variations per color: 100 (light) / 400 (base) / 700 (dark)
   400 = official hex from brand identity
   ------------------------------------------------------------ */

:root {

  /* Header sticky height — usado em scroll-margin-top e sticky top */
  --header-height: 9rem;

  /* Pink — primary brand color (ipê da UERJ) */
  --pink-100: #dfc0c8;
  --pink-400: #a36274; /* official */
  --pink-700: #6b3d4a;

  /* Green — institutional color */
  --green-100: #c1c3ab;
  --green-400: #475b1c; /* official */
  --green-700: #2c3a10;

  /* Yellow — accent color */
  --yellow-100: #f0e99a;
  --yellow-400: #e4d560; /* official */
  --yellow-700: #a89d2e;

  /* Cream — base background */
  --cream-0: #f6f5ef;
  --cream-100: #faf9f4;
  --cream-400: #f4f3ea; /* official */
  --cream-700: #e2e0d0;

  /* Gray — neutral */
  --gray-100: #E2E3D5;
  --gray-400: #828282; /* official */
  --gray-700: #555555;

  /* Black */
  --black: #2d2d2d;

  /* White */
  --white: #ffffff;

  /* ------------------------------------------------------------
     COLORS — SEMANTIC
     Describe role/intent, never location or component
     Use these in all components — never primitives directly
     ------------------------------------------------------------ */

  /* Brand */
  --color-primary:       var(--pink-400);
  --color-primary-dark:  var(--pink-700);
  --color-primary-light: var(--pink-100);

  --color-secondary:       var(--green-400);
  --color-secondary-dark:  var(--green-700);
  --color-secondary-light: var(--green-100);

  --color-accent:       var(--yellow-400);
  --color-accent-dark:  var(--yellow-700);
  --color-accent-light: var(--yellow-100);

  /* Backgrounds */
  --color-bg:             var(--cream-400); /* page background        */
  --color-surface:        var(--cream-0);     /* elevated: card, modal  */
  --color-surface-subtle: var(--cream-100); /* softly raised surface  */
  --color-overlay:        var(--cream-700); /* dividers, stripes      */

  /* Text */
  --color-text:         var(--color-secondary);
  --color-text-muted:   var(--color-secondary-light);
  --color-text-inverse: var(--white);

  /* Borders */
  --color-border:       var(--gray-100);
  --color-border-strong: var(--gray-700);

  /* Highlight — cor do item destaque no menu (atualmente: ICON-S) */
  --color-highlight:      var(--color-secondary);
  --color-highlight-hover: var(--color-primary);

  /* Interactive */
  --color-interactive:       var(--green-400);
  --color-interactive-hover: var(--pink-400);
  --color-interactive-muted: var(--pink-100);

  /* Feedback */
  --color-success: #3a7d44;
  --color-error:   #c0392b;
  --color-warning: var(--yellow-400);
  --color-info:    var(--green-100);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     Roboto Condensed: headings and highlights
     Inter: body text and UI
     Both available on Google Fonts
     ------------------------------------------------------------ */

  --font-heading: 'Roboto Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Type scale */
  --text-xs:  1.2rem;  /* 12px — captions, metadata   */
  --text-sm:  1.4rem;  /* 14px — labels, UI captions  */
  --text-md:  1.8rem;  /* 18px — body default         */
  --text-lg:  2.0rem;  /* 20px — lead / featured body */
  --text-xl:  2.2rem;  /* 22px — small subheadings    */

  --heading-xs: 2.4rem;  /* 24px — H4 */
  --heading-sm: 2.8rem;  /* 28px — H3 */
  --heading-md: 3.6rem;  /* 36px — H2 */
  --heading-lg: 4.8rem;  /* 48px — H1 desktop */
  --heading-xl: 6.4rem;  /* 64px — hero / banner */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-heading: 1.15;
  --leading-body:    1.70;
  --leading-compact: 1.35;

  /* Letter spacing */
  --tracking-heading: -0.02em;
  --tracking-label:    0.05em;
  --tracking-caps:     0.08em;

  /* ------------------------------------------------------------
     SPACING — 8pt scale
     ------------------------------------------------------------ */

  --space-1:   0.4rem;  /*   4px */
  --space-2:   0.8rem;  /*   8px */
  --space-3:   1.2rem;  /*  12px */
  --space-4:   1.6rem;  /*  16px */
  --space-5:   2.4rem;  /*  24px */
  --space-6:   3.2rem;  /*  32px */
  --space-7:   4.0rem;  /*  40px */
  --space-8:   4.8rem;  /*  48px */
  --space-10:  6.4rem;  /*  64px */
  --space-12:  8.0rem;  /*  80px */
  --space-16: 12.8rem;  /* 128px */

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */

  --container-sm:  64rem;
  --container-md:  96rem;
  --container-lg: 124rem;
  --container-xl: 144rem;

  --grid-columns: 12;
  --grid-gap:     var(--space-5);
  --grid-gap-sm:  var(--space-4);

  --radius-sm:   0.4rem;
  --radius-md:   0.8rem;
  --radius-lg:   3.2rem;
  --radius-pill: 9999px;

  --border:   1px solid var(--color-border);
  --border-2: 2px solid var(--color-border-strong);

  /* ------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------ */

  --shadow-sm:   0 1px 3px rgba(45, 45, 45, 0.08);
  --shadow-md:   0 4px 12px rgba(45, 45, 45, 0.10);
  --shadow-lg:   0 8px 24px rgba(45, 45, 45, 0.12);
  --shadow-card: 0 2px 8px rgba(71, 91, 28, 0.08);

  /* ------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------ */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------ */

  --z-base:     0;
  --z-card:     10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

}