/* =========================================================================
   CIPE — Academic Excellence Portal — Design Tokens
   Material 3 / Corporate Modernism — Faculdade ESUP
   ========================================================================= */

:root {
  /* -------- Brand surfaces (M3 tonal palette) ----------------------- */
  --surface:                     #f9f9f9;
  --surface-dim:                 #dadada;
  --surface-bright:              #f9f9f9;
  --surface-container-lowest:    #ffffff;
  --surface-container-low:       #f3f3f4;
  --surface-container:           #eeeeee;
  --surface-container-high:      #e8e8e8;
  --surface-container-highest:   #e2e2e2;
  --on-surface:                  #1a1c1c;
  --on-surface-variant:          #434750;
  --inverse-surface:             #2f3131;
  --inverse-on-surface:          #f0f1f1;
  --outline:                     #747781;
  --outline-variant:             #c3c6d2;
  --surface-tint:                #3a5e9d;

  /* -------- Primary (Navy) ------------------------------------------ */
  --primary:                     #001e49;
  --on-primary:                  #ffffff;
  --primary-container:           #003371;
  --on-primary-container:        #7b9ee2;
  --inverse-primary:             #acc7ff;
  --primary-fixed:               #d8e2ff;
  --primary-fixed-dim:           #acc7ff;
  --on-primary-fixed:            #001a41;
  --on-primary-fixed-variant:    #1e4584;

  /* -------- Secondary (Gold) ---------------------------------------- */
  --secondary:                   #7a5900;
  --on-secondary:                #ffffff;
  --secondary-container:         #febb06;
  --on-secondary-container:      #6b4d00;
  --secondary-fixed:             #ffdea3;
  --secondary-fixed-dim:         #febb06;
  --on-secondary-fixed:          #261900;
  --on-secondary-fixed-variant:  #5d4200;

  /* -------- Tertiary (Muted Blue) ----------------------------------- */
  --tertiary:                    #00213c;
  --on-tertiary:                 #ffffff;
  --tertiary-container:          #123758;
  --on-tertiary-container:       #80a1c7;
  --tertiary-fixed:              #d0e4ff;
  --tertiary-fixed-dim:          #a9c9f1;
  --on-tertiary-fixed:           #001d35;
  --on-tertiary-fixed-variant:   #27496a;

  /* -------- Semantic ------------------------------------------------ */
  --error:                       #ba1a1a;
  --on-error:                    #ffffff;
  --error-container:             #ffdad6;
  --on-error-container:          #93000a;

  --background:                  #f9f9f9;
  --on-background:               #1a1c1c;
  --surface-variant:             #e2e2e2;

  /* -------- Brand accents (legacy ESUP) ----------------------------- */
  --esup-gold-bright:            #FFC845;
  --esup-gold-warm:              #f0a010;

  /* -------- Gradients ------------------------------------------------ */
  --grad-navy:        linear-gradient(135deg, #001e49 0%, #00213c 50%, #003371 100%);
  --grad-gold:        linear-gradient(90deg,  #febb06 0%, #FFC845 50%, #ffdea3 100%);
  --grad-overlay:     linear-gradient(180deg, rgba(0,30,73,.05), rgba(0,30,73,.55));
  --grad-spotlight:   radial-gradient(circle at 30% 20%, rgba(254,187,6,.18), transparent 60%);

  /* -------- Typography ---------------------------------------------- */
  --font-display: "Montserrat", "Inter", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  --fs-headline-lg:  48px;
  --fs-headline-lg-mobile: 32px;
  --fs-headline-md:  24px;
  --fs-body-lg:      18px;
  --fs-body-md:      16px;
  --fs-label-bold:   14px;
  --fs-label-sm:     12px;

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.3;
  --lh-relaxed: 1.6;

  --tracking-label: 0.05em;
  --tracking-eyebrow: 0.18em;

  /* -------- Spacing -------------------------------------------------- */
  --container-padding: 24px;
  --gutter:            16px;
  --stack-sm:           8px;
  --stack-md:          16px;
  --stack-lg:          32px;
  --section-gap:       48px;

  /* -------- Radii (organic / asymmetric) ---------------------------- */
  --r-sm:      0.25rem; /*  4px */
  --r:         0.5rem;  /*  8px */
  --r-md:      0.75rem; /* 12px */
  --r-lg:      1rem;    /* 16px */
  --r-xl:      1.5rem;  /* 24px */
  --r-brand:   60px;    /* organic brand corner */
  --r-brand-2: 80px;    /* extra organic */
  --r-full:    9999px;

  /* -------- Elevation / depth via tonal layering -------------------- */
  --shadow-1: 0 1px 2px rgba(0,30,73,.06), 0 1px 1px rgba(0,30,73,.04);
  --shadow-2: 0 8px 24px rgba(0,30,73,.10), 0 2px 6px rgba(0,30,73,.04);
  --shadow-3: 0 24px 48px rgba(0,30,73,.18), 0 8px 16px rgba(0,30,73,.06);
  --shadow-gold: 0 12px 32px rgba(254,187,6,.30);

  /* -------- Motion --------------------------------------------------- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;

  /* -------- Layout --------------------------------------------------- */
  --container-max: 1200px;
}

/* Responsive type */
@media (max-width: 768px) {
  :root {
    --fs-headline-lg: var(--fs-headline-lg-mobile);
    --fs-headline-md: 20px;
    --fs-body-lg:     16px;
    --section-gap:    32px;
  }
}

/* Focus ring */
:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 3px solid var(--secondary-container);
  outline-offset: 3px;
  border-radius: var(--r);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}