/*
 * Psicoagora Design System — Colors & Typography
 * Source: psicoagora-frontend/psicoagora/lib/core/styles/theme.dart
 *         psicoagora-frontend/psicoagora/lib/core/styles/app_styles.dart
 * Font: Lato (UI)
 */

/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato-regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato-bold.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* ============================================================
   COLOR TOKENS — LIGHT SCHEME (default)
   Source: MaterialTheme.lightScheme()
   ============================================================ */

:root {
  /* Primary — roxo violeta */
  --color-primary:                  #65558F;
  --color-on-primary:               #FFFFFF;
  --color-primary-container:        #E9DDFF;
  --color-on-primary-container:     #4D3D75;
  --color-primary-fixed:            #E9DDFF;
  --color-on-primary-fixed:         #211047;
  --color-primary-fixed-dim:        #CFBDFE;
  --color-on-primary-fixed-variant: #4D3D75;
  --color-inverse-primary:          #CFBDFE;

  /* Secondary — roxo acinzentado */
  --color-secondary:                #625B70;
  --color-on-secondary:             #FFFFFF;
  --color-secondary-container:      #E8DEF8;
  --color-on-secondary-container:   #4A4458;
  --color-secondary-fixed:          #E8DEF8;
  --color-secondary-fixed-dim:      #CCC2DB;

  /* Tertiary — azul */
  --color-tertiary:                 #4F5B92;
  --color-on-tertiary:              #FFFFFF;
  --color-tertiary-container:       #DDE1FF;
  --color-on-tertiary-container:    #374379;
  --color-tertiary-fixed:           #DDE1FF;
  --color-on-tertiary-fixed:        #07164B;
  --color-tertiary-fixed-dim:       #B8C3FF;

  /* Error / Destructive */
  --color-error:                    #BA1A1A;
  --color-on-error:                 #FFFFFF;
  --color-error-container:          #FFDAD6;
  --color-on-error-container:       #93000A;

  /* Success (extended) */
  --color-success:                  #2A6A47;
  --color-on-success:               #FFFFFF;
  --color-success-container:        #AEF2C5;
  --color-on-success-container:     #0A5131;

  /* Surface */
  --color-surface:                  #FDF7FF;
  --color-on-surface:               #1D1B20;
  --color-on-surface-variant:       #49454E;
  --color-surface-dim:              #DED8E0;
  --color-surface-bright:           #FDF7FF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low:    #F8F2FA;
  --color-surface-container:        #F2ECF4;
  --color-surface-container-high:   #ECE6EE;
  --color-surface-container-highest:#E6E0E9;
  --color-inverse-surface:          #322F35;

  /* Outline */
  --color-outline:                  #7A757F;
  --color-outline-variant:          #CAC4CF;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Backgrounds */
  --bg-page:          var(--color-surface);
  --bg-shell:         var(--color-surface-container-high);
  --bg-card:          var(--color-surface-container-lowest);
  --bg-field:         var(--color-primary-container);
  --bg-menu:          var(--color-surface-container-highest);
  --bg-table-header:  var(--color-primary-container);
  --bg-table-stripe:  var(--color-surface-container-high);

  /* Foreground */
  --fg-primary:       var(--color-on-surface);
  --fg-secondary:     var(--color-on-surface-variant);
  --fg-on-field:      var(--color-on-primary-container);
  --fg-on-primary:    var(--color-on-primary);

  /* Borders */
  --border-field:     var(--color-on-primary-fixed);
  --border-divider:   var(--color-outline-variant);

  /* ============================================================
     SPACING TOKENS
     Source: AppStyles constants
     ============================================================ */

  --space-field-height:           60px;
  --space-button-height:          45px;
  --space-dialog-max-width:       560px;
  --space-section-card-radius:    20px;
  --space-section-card-padding:   24px;
  --space-section-card-dense:     16px;
  --space-section-spacing:        24px;
  --space-field-group-spacing:    16px;
  --space-dialog-radius:          16px;
  --space-dropdown-panel-radius:  20px;
  --space-field-padding-h:        16px;
  --space-field-padding-v:        14px;
  --space-nav-item-radius:        8px;
  --space-sidebar-width:          280px;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font families */
  --font-ui:     'Lato', sans-serif;
  --font-mono:   ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  /* Type scale (approx Material 3 with Lato) */
  --text-headline-medium-size:    28px;
  --text-headline-medium-weight:  700;
  --text-headline-medium-lh:      1.3;

  --text-headline-small-size:     24px;
  --text-headline-small-weight:   700;
  --text-headline-small-lh:       1.3;

  --text-title-large-size:        22px;
  --text-title-large-weight:      700;
  --text-title-large-lh:          1.4;

  --text-title-medium-size:       16px;
  --text-title-medium-weight:     500;
  --text-title-medium-lh:         1.4;

  --text-body-large-size:         16px;
  --text-body-large-weight:       400;
  --text-body-large-lh:           1.5;

  --text-body-medium-size:        14px;
  --text-body-medium-weight:      400;
  --text-body-medium-lh:          1.5;

  --text-body-small-size:         12px;
  --text-body-small-weight:       400;
  --text-body-small-lh:           1.4;

  --text-label-large-size:        14px;
  --text-label-large-weight:      700;
  --text-label-large-lh:          1.2;

  --text-label-medium-size:       12px;
  --text-label-medium-weight:     500;
  --text-label-medium-lh:         1.2;

  --text-label-small-size:        11px;
  --text-label-small-weight:      600;
  --text-label-small-lh:          1.2;
}

/* ============================================================
   SEMANTIC TYPE HELPERS
   ============================================================ */

.text-headline-medium {
  font-family: var(--font-ui);
  font-size: var(--text-headline-medium-size);
  font-weight: var(--text-headline-medium-weight);
  line-height: var(--text-headline-medium-lh);
  color: var(--fg-primary);
}

.text-headline-small {
  font-family: var(--font-ui);
  font-size: var(--text-headline-small-size);
  font-weight: var(--text-headline-small-weight);
  line-height: var(--text-headline-small-lh);
  color: var(--fg-primary);
}

.text-title-large {
  font-family: var(--font-ui);
  font-size: var(--text-title-large-size);
  font-weight: var(--text-title-large-weight);
  line-height: var(--text-title-large-lh);
  color: var(--fg-primary);
}

.text-title-medium {
  font-family: var(--font-ui);
  font-size: var(--text-title-medium-size);
  font-weight: var(--text-title-medium-weight);
  line-height: var(--text-title-medium-lh);
  color: var(--fg-primary);
}

.text-body-large {
  font-family: var(--font-ui);
  font-size: var(--text-body-large-size);
  font-weight: var(--text-body-large-weight);
  line-height: var(--text-body-large-lh);
  color: var(--fg-primary);
}

.text-body-medium {
  font-family: var(--font-ui);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-lh);
  color: var(--fg-primary);
}

.text-body-small {
  font-family: var(--font-ui);
  font-size: var(--text-body-small-size);
  font-weight: var(--text-body-small-weight);
  line-height: var(--text-body-small-lh);
  color: var(--fg-secondary);
}

.text-label-large {
  font-family: var(--font-ui);
  font-size: var(--text-label-large-size);
  font-weight: var(--text-label-large-weight);
  line-height: var(--text-label-large-lh);
  color: var(--fg-primary);
}

.text-label-small {
  font-family: var(--font-ui);
  font-size: var(--text-label-small-size);
  font-weight: var(--text-label-small-weight);
  line-height: var(--text-label-small-lh);
  color: var(--fg-on-field);
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-lh);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--text-headline-medium-size); font-weight: var(--text-headline-medium-weight); }
h2 { font-size: var(--text-headline-small-size); font-weight: var(--text-headline-small-weight); }
h3 { font-size: var(--text-title-large-size); font-weight: var(--text-title-large-weight); }
h4 { font-size: var(--text-title-medium-size); font-weight: var(--text-title-medium-weight); }
p  { font-size: var(--text-body-medium-size); font-weight: var(--text-body-medium-weight); }
code, pre { font-family: var(--font-mono); font-size: 13px; }