/* ============================================================
   Agenda Radical — Design Tokens
   Source: allanwolski/agenda-radical-app (Flutter/Dart)
   Fonts: Archivo (body/headings), JetBrains Mono (mono/meta)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ------------------------------------------------------------
   BASE COLOR TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --color-primary:         #212529;
  --color-primary-dark:    #07070A;
  --color-primary-light:   #495057;
  --color-secondary:       #FE4805;   /* orange-red accent */

  /* Dark surfaces */
  --color-surface:         #141418;
  --color-line:            #26262E;
  --color-line-soft:       #1F1F26;

  /* Ink (text on dark) */
  --color-ink:             #F4F4F0;
  --color-ink-muted:       #8A8A93;
  --color-ink-dim:         #5C5C66;

  /* Light surfaces */
  --color-white:           #FFFFFF;
  --color-background:      #F5F6F7;

  /* Neutral scale */
  --color-neutral:         #9E9E9E;
  --color-neutral-light:   #9A9B9D;
  --color-neutral-lighter: #E0E0E0;
  --color-neutral-lightest:#F5F6F7;
  --color-neutral-dark:    #757575;
  --color-neutral-darker:  #495057;
  --color-neutral-darkest: #222222;

  /* Transparent */
  --color-transparent:     transparent;

  /* Semantic: Success */
  --color-success-darkest: #055947;
  --color-success-base:    #008857;
  --color-success-lightest:#E7FBF6;

  /* Semantic: Warning */
  --color-warning-darkest: #6B5300;
  --color-warning-base:    #FFC600;
  --color-warning-lightest:#FFF9E6;

  /* Semantic: Danger */
  --color-danger-darkest:  #6B0018;
  --color-danger-base:     #FF0038;
  --color-danger-light:    #E32952;
  --color-danger-lightest: #FFE6EB;

  /* ------------------------------------------------------------
     SEMANTIC ALIASES
     ------------------------------------------------------------ */
  --fg-default:      var(--color-primary);
  --fg-muted:        var(--color-neutral-dark);
  --fg-subtle:       var(--color-neutral-light);
  --fg-on-dark:      var(--color-ink);
  --fg-on-dark-muted:var(--color-ink-muted);
  --fg-accent:       var(--color-secondary);

  --bg-page:         var(--color-background);
  --bg-card:         var(--color-white);
  --bg-dark:         var(--color-primary);
  --bg-darker:       var(--color-surface);
  --bg-darkest:      var(--color-primary-dark);

  --border-default:  var(--color-neutral-light);
  --border-focus:    var(--color-neutral-dark);
  --border-error:    var(--color-danger-base);
  --border-card:     var(--color-white);

  /* ------------------------------------------------------------
     TYPOGRAPHY TOKENS
     ------------------------------------------------------------ */
  --font-body:       'Archivo', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Heading scale (all bold) */
  --text-heading-xxl: 700 28px/1.2 var(--font-body);
  --text-heading-xl:  700 26px/1.2 var(--font-body);
  --text-heading-2xl: 700 24px/1.2 var(--font-body);
  --text-heading-lg:  700 22px/1.2 var(--font-body);
  --text-heading-20:  700 20px/1.2 var(--font-body);
  --text-heading-md:  700 18px/1.2 var(--font-body);
  --text-heading-17:  700 17px/1.25 var(--font-body);
  --text-heading-sm:  700 16px/1.3 var(--font-body);

  /* Body scale */
  --text-body-lg-regular: 400 16px/1.5 var(--font-body);
  --text-body-lg-bold:    700 16px/1.5 var(--font-body);
  --text-body-md-regular: 400 15px/1.5 var(--font-body);
  --text-body-md-bold:    700 15px/1.5 var(--font-body);
  --text-body-regular:    400 14px/1.5 var(--font-body);
  --text-body-bold:       700 14px/1.5 var(--font-body);
  --text-body-sm-regular: 400 12px/1.5 var(--font-body);
  --text-body-sm-bold:    600 12px/1.5 var(--font-body);
  --text-body-xs-bold:    600 11px/1.4 var(--font-body);

  /* Mono */
  --text-mono:            500 12px/1.4 var(--font-mono);
  --text-mono-ls:         1.5px; /* letter-spacing for mono */

  /* ------------------------------------------------------------
     SPACING & RADIUS TOKENS
     ------------------------------------------------------------ */
  --radius-card:     28px;   /* EventCard, OrgCard outer */
  --radius-image:    20px;   /* Inner image clips in cards */
  --radius-nav:      36px;   /* Bottom nav bar pill */
  --radius-form:     12px;   /* Standard form fields */
  --radius-form-pill:28px;   /* Rounded/search form fields */
  --radius-chip:     24px;   /* Category chips */
  --radius-badge:    20px;   /* Status badges */

  --spacing-page-h:  20px;   /* Horizontal page padding */
  --spacing-section: 32px;   /* Between major sections */
  --spacing-item:    16px;   /* Between list items */
  --spacing-tight:   8px;    /* Tight gaps (icon+text, etc) */
  --spacing-xs:      4px;

  /* Button heights */
  --btn-height-xs:   32px;
  --btn-height-sm:   40px;
  --btn-height-md:   52px;
  --btn-height-lg:   64px;

  /* Bottom nav */
  --nav-height:      72px;

  /* Elevation / Shadows */
  --shadow-nav: 0 10px 20px rgba(33, 37, 41, 0.2);
  --shadow-none: none;
}

/* ------------------------------------------------------------
   SEMANTIC ELEMENT STYLES
   ------------------------------------------------------------ */

body {
  font: var(--text-body-regular);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--text-heading-xxl); color: var(--fg-default); margin: 0; }
h2 { font: var(--text-heading-xl);  color: var(--fg-default); margin: 0; }
h3 { font: var(--text-heading-lg);  color: var(--fg-default); margin: 0; }
h4 { font: var(--text-heading-md);  color: var(--fg-default); margin: 0; }
h5 { font: var(--text-heading-sm);  color: var(--fg-default); margin: 0; }

p  { font: var(--text-body-regular); color: var(--fg-default); margin: 0; line-height: 1.6; }

code, pre {
  font: var(--text-mono);
  letter-spacing: var(--text-mono-ls);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   COMPONENT BASE CLASSES
   ------------------------------------------------------------ */

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s, background 0.15s;
  width: 100%;
}
.btn-solid      { background: var(--color-primary); color: var(--color-white); }
.btn-secondary  { background: var(--color-white); color: var(--color-primary-light); }
.btn-outlined   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-disabled   { background: var(--color-neutral-lighter); color: var(--color-neutral-dark); cursor: not-allowed; }
.btn-xs  { height: var(--btn-height-xs); font-size: 12px; padding: 0 14px; width: auto; }
.btn-sm  { height: var(--btn-height-sm); font-size: 14px; padding: 0 20px; width: auto; }
.btn-md  { height: var(--btn-height-md); font-size: 16px; }
.btn-lg  { height: var(--btn-height-lg); font-size: 16px; }
.btn-icon-dark {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  width: var(--btn-height-xs);
  height: var(--btn-height-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

/* Cards */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-white);
  padding: 12px;
  overflow: hidden;
}
.card-image {
  border-radius: var(--radius-image);
  width: 100%;
  object-fit: cover;
}

/* Form fields */
.field {
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-form);
  padding: 10px 12px;
  font: var(--text-body-lg-regular);
  color: var(--fg-default);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.field:focus   { border-color: var(--border-focus); }
.field-rounded { border-radius: var(--radius-form-pill); padding-left: 20px; padding-right: 20px; }
.field-error   { border-color: var(--border-error); }

/* Chips */
.chip {
  background: var(--bg-card);
  color: var(--fg-default);
  border-radius: var(--radius-chip);
  padding: 14px 24px;
  font: var(--text-body-md-regular);
  display: inline-block;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chip-active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

/* Badge */
.badge {
  background: var(--color-background);
  color: var(--color-primary);
  border-radius: var(--radius-badge);
  padding: 4px 10px;
  font: var(--text-body-xs-bold);
  display: inline-block;
}

/* Bottom nav */
.bottom-nav {
  background: var(--color-primary);
  border-radius: var(--radius-nav);
  height: var(--nav-height);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
}
.nav-item {
  border-radius: 50%;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.nav-item-active {
  background: var(--color-white);
  color: var(--color-secondary);
}
.nav-item-inactive { color: rgba(255,255,255,0.6); }