/* =====================================================================
   Design System · IASD Library — Tokens
   Brand source: "Manual Prático de Marca" of the Seventh-day Adventist
   Church, South American Division, version 1.8 (November 2025).
   The official manual takes precedence over this file.
   ===================================================================== */

:root {
  /* ---------- Official palette (Brand Manual 1.8, p. 11) ---------- */
  --iasd-division:    #003366; /* DSA institutional color ("Divisão") */
  --iasd-denim:      #2f557f;
  --iasd-emperor:    #4b207f;
  --iasd-grapevine:  #7f264a;
  --iasd-earth:      #5e3929;
  --iasd-ming:       #3e8391;
  --iasd-cool:       #4d7549;
  --iasd-tree-frog:  #448d21;
  --iasd-campfire:   #e36520;
  --iasd-warm:       #ffa92d;

  /* ---------- Primary (derived from the Division color) ---------- */
  --color-primary:          #003366; /* 12.6:1 on white */
  --color-primary-hover:    #00264c;
  --color-primary-light:    #e0e7ed;
  --color-primary-subtle:    #ebeff3;

  /* ---------- Neutrals (slightly bluish) ---------- */
  --gray-50:  #f5f7fa;
  --gray-100: #e6ebf1;
  --gray-200: #cfd8e3;
  --gray-400: #9aa8b8; /* decorative only: 2.4:1 */
  --gray-500: #6b7a8c; /* input borders: 4.4:1 */
  --gray-600: #4a5868; /* secondary text: 7.3:1 */
  --gray-800: #2b3644;
  --gray-900: #1f2937; /* body text: 14.7:1 */

  /* ---------- Surface and text roles ---------- */
  --color-bg:            #eef2f6; /* a bit darker than gray-50, so the white cards stand out (feature 029) */
  --color-surface:       #ffffff;
  --color-surface-alt:   var(--gray-100);
  --color-text:            var(--gray-900);
  --color-text-muted:      var(--gray-600);
  --color-text-inverse:    #ffffff;
  --color-border:            var(--gray-200);
  --color-border-input:      var(--gray-500);

  /* ---------- Semantic (base = official color; text = darker AA variant) ---------- */
  --color-success:          #3a781c; /* darkened Tree Frog: 5.4:1 */
  --color-success-base:     var(--iasd-tree-frog);
  --color-success-bg:    #e9f1e4;

  --color-warning:           var(--iasd-warm);  /* use with dark text: 7.7:1 */
  --color-warning-text:     #8c5d19;           /* darkened Warm: 5.7:1 */
  --color-warning-bg:     #fff5e6;

  --color-danger:           #aa4c18; /* darkened Campfire: 5.6:1 */
  --color-danger-base:      var(--iasd-campfire);
  --color-danger-bg:     #fcede4;

  --color-info:             #356f7b; /* darkened Ming: 5.7:1 */
  --color-info-base:        var(--iasd-ming);
  --color-info-bg:       #e8f0f2;

  /* ---------- Focus ---------- */
  --focus:             var(--color-primary);
  --focus-on-dark: var(--iasd-warm);
  --focus-ring:        0 0 0 3px #ffffff, 0 0 0 6px var(--focus);

  /* ---------- Copy status (CopyStatus) ---------- */
  --status-available:    var(--color-success);
  --status-on-loan:    var(--iasd-denim);
  --status-overdue:      var(--color-danger);
  --status-on-hold:     var(--color-warning-text);
  --status-awaiting:    var(--color-info);
  --status-maintenance:    var(--iasd-earth);
  --status-missing:    var(--iasd-grapevine);
  --status-withdrawn:       var(--gray-600);

  /* ---------- Category groups (label stripe color; SPEC §7.6) ---------- */
  --group-bible:           var(--iasd-denim);
  --group-egw:              var(--iasd-grapevine);
  --group-doctrine:         var(--iasd-emperor);
  --group-christian-living:      var(--iasd-campfire);
  --group-mission-history:  var(--iasd-earth);
  --group-health-education:   var(--iasd-tree-frog);
  --group-literature:       var(--iasd-warm);   /* dark text */
  --group-children-youth:   var(--iasd-ming);
  --group-reference:       var(--iasd-cool);
  --group-periodicals:       var(--iasd-division);
  --group-other:           var(--gray-400);   /* dark text */
  --group-media:           var(--gray-900);

  /* ---------- Typography ---------- */
  --font-ui: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:   0.875rem;  /* 14px: printed label captions / non-essential metadata only */
  --text-sm:   1rem;      /* 16px: minimum for UI text */
  --text-base: 1.125rem;  /* 18px: body */
  --text-lg:   1.25rem;   /* 20px: h4 / emphasis */
  --text-xl:   1.5rem;    /* 24px: h3 */
  --text-2xl:  1.875rem;  /* 30px: h2 / screen title */
  --text-3xl:  2.25rem;   /* 36px: h1 / dashboard numbers */

  --weight-normal: 400;
  --weight-semibold:   600;
  --weight-bold:  700;

  --line-height:        1.5;
  --line-height-heading: 1.2;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---------- Shapes ---------- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 31, 61, 0.08), 0 1px 3px rgba(0, 31, 61, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 31, 61, 0.12);
  --shadow-3: 0 12px 32px rgba(0, 31, 61, 0.18);
  --shadow-card: 0 1px 2px rgba(0, 31, 61, 0.05), 0 2px 10px rgba(0, 31, 61, 0.06); /* cards (feature 029) */

  /* ---------- Dark side menu (feature 029): white on the Division color ---------- */
  --nav-bg:     var(--iasd-division);
  --nav-text:   rgba(255, 255, 255, 0.92); /* ~11:1 on the Division color */
  --nav-muted:  rgba(255, 255, 255, 0.70); /* group titles: ~7:1 */
  --nav-hover:  rgba(255, 255, 255, 0.08);
  --nav-active: rgba(255, 255, 255, 0.16);
  --nav-accent: var(--iasd-warm);          /* bar of the current item */

  /* ---------- Interaction ---------- */
  --touch-target:      48px;  /* minimum for any touchable control */
  --control-height: 48px;
  --control-height-sm: 40px; /* dense desktop tables only */
  --transition: 150ms ease-out;

  /* ---------- Layout (app shell) ---------- */
  --sidebar-width: 264px;
  --rail-width:    96px;
  --brand-strip-width: 96px; /* brand strip with the white symbol, on the right on desktops (feature 031) */
  --topbar-height:   64px;
  --bottomnav-height: 68px;

  /* Breakpoints (reference only; media queries cannot use variables):
     phone < 768px | tablet 768–1199px | desktop >= 1200px
     (same as Bootstrap 5 md and xl breakpoints) */
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}

/* ---------- Density (DESIGN-SYSTEM §5.1, feature 026) ----------
   The values above are for touch (phones, tablets, the counter screen). Any device whose
   main pointer is not touch (a mouse, a touchpad) gets smaller text and controls on the
   office screens; the counter screens (.b-density-comfortable) keep the touch values on
   every device. "not (pointer: coarse)" also covers browsers that report no pointer. */
:root {
  --btn-padding-y: 0.6rem;
  --field-gap: var(--space-5);    /* 24px between fields (touch) */
  --table-cell-padding-y: 0.75rem;
}
@media not (pointer: coarse) {
  :root {
    --text-base: 1rem;            /* 16px */
    --text-lg: 1.125rem;          /* 18px */
    --control-height: 40px;
    --control-height-sm: 34px;
    --btn-padding-y: 0.375rem;
    --field-gap: var(--space-4);  /* 16px between fields */
    --table-cell-padding-y: 0.5rem;
  }
}
.b-density-comfortable {
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --control-height: 48px;
  --control-height-sm: 40px;
  --btn-padding-y: 0.6rem;
  --field-gap: var(--space-5);
  --table-cell-padding-y: 0.75rem;
  font-size: var(--text-base);
}