/* ============================================================
 * AI4Spaces — Design Tokens
 * Loaded BEFORE custom.css. Defined here, applied incrementally
 * elsewhere. Adding tokens never changes the rendered page.
 * ============================================================ */

:root {
  /* ----- Brand ----- */
  --color-brand-dark:        #15212d;   /* hero/footer dark, kept */
  --color-brand-dark-2:      #1d2c3c;   /* gradient stop, slight lift */
  --color-brand-mid:         #2E4A66;   /* refined from #364f67 */
  --color-brand-mid-hover:   #26405A;   /* button:hover */
  --color-brand-mid-active:  #1F384F;   /* button:active */

  /* Legacy alias kept available during migration */
  --color-main:              var(--color-brand-mid);

  /* ----- Accent ----- */
  --color-accent:            #0B7F70;   /* refined from #00796b */
  --color-accent-hover:      #08695C;
  --color-accent-active:     #055A4F;
  --color-accent-soft:       rgba(11, 127, 112, 0.10);

  /* Legacy alias */
  --color-green:             var(--color-accent);

  /* ----- Semantic ----- */
  --color-success:           #2F9E69;
  --color-success-hover:     #258255;
  --color-warning:           #C9871A;
  --color-warning-hover:     #A56E14;
  --color-danger:            #C0392B;   /* softened from #D42A2A */
  --color-danger-hover:      #9C2D22;
  --color-info:              #2C7AB6;

  /* ----- Surfaces & ink ----- */
  --color-bg:                #FCFCFD;   /* page bg, was stark #fff */
  --color-surface:           #FFFFFF;   /* cards */
  --color-surface-2:         #F4F6F8;   /* subtle panels, was #EFEFEF/#F5F5F5 */
  --color-surface-3:         #EDF0F3;   /* hovered surface */
  --color-overlay:           rgba(21, 33, 45, 0.72);  /* hero/image overlays */

  --color-ink:               #1A1F2B;   /* primary body text */
  --color-ink-muted:         #5F6B7A;   /* secondary text, was #707070 */
  --color-ink-soft:          #8A95A4;   /* tertiary/meta */
  --color-ink-on-dark:       #FFFFFF;
  --color-ink-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-ink-on-dark-soft:  rgba(255, 255, 255, 0.50);

  /* ----- Borders / hairlines ----- */
  --color-border:            #E3E7EC;   /* consolidated from #DCDCDC / #D4D4D4 */
  --color-border-strong:     #C9D0D8;
  --color-border-soft:       #EEF1F4;

  /* ----- Focus ring (accessibility) ----- */
  --focus-ring-color:        rgba(11, 127, 112, 0.45);
  --focus-ring-width:        3px;
  --focus-ring-offset:       2px;

  /* ----- Typography ----- */
  --font-sans:               'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:               ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-xs:            0.75rem;   /* 12px */
  --font-size-sm:            0.8125rem; /* 13px */
  --font-size-base:          1rem;      /* 16px */
  --font-size-md:            1.125rem;  /* 18px */
  --font-size-lg:            1.25rem;   /* 20px */
  --font-size-xl:            1.5rem;    /* 24px */
  --font-size-2xl:           1.75rem;   /* 28px */
  --font-size-3xl:           2.25rem;   /* 36px */
  --font-size-4xl:           2.75rem;   /* 44px */
  --font-size-5xl:           3.5rem;    /* 56px */

  --font-weight-light:       300;
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  --line-height-tight:       1.2;
  --line-height-snug:        1.35;
  --line-height-normal:      1.55;
  --line-height-relaxed:     1.7;

  --letter-spacing-tight:    -0.015em;
  --letter-spacing-snug:     -0.01em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.01em;

  /* ----- Spacing (4px base) ----- */
  --space-0:                 0;
  --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 */
  --space-9:                 6rem;      /* 96 */

  /* ----- Radius ----- */
  --radius-xs:               4px;
  --radius-sm:               6px;
  --radius-md:               8px;
  --radius-lg:               12px;
  --radius-xl:               16px;
  --radius-pill:             999px;

  /* ----- Shadows ----- */
  --shadow-xs:               0 1px 2px rgba(21, 33, 45, 0.05);
  --shadow-sm:               0 1px 3px rgba(21, 33, 45, 0.08), 0 1px 2px rgba(21, 33, 45, 0.04);
  --shadow-md:               0 4px 12px rgba(21, 33, 45, 0.08), 0 2px 4px rgba(21, 33, 45, 0.04);
  --shadow-lg:               0 12px 32px rgba(21, 33, 45, 0.12), 0 4px 8px rgba(21, 33, 45, 0.06);
  --shadow-xl:               0 24px 48px rgba(21, 33, 45, 0.16), 0 8px 16px rgba(21, 33, 45, 0.08);

  /* ----- Motion ----- */
  --duration-fast:           120ms;
  --duration-normal:         200ms;
  --duration-slow:           320ms;
  --ease-standard:           cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:         cubic-bezier(0.2, 0, 0, 1.2);

  /* ----- Layout ----- */
  --tap-target-min:          44px;
  --container-max:           1240px;
  --z-navbar:                100;
  --z-modal-backdrop:        1040;
  --z-modal:                 1050;
  --z-tooltip:               1070;
  --z-preloader:             9999;
}

/* ------------------------------------------------------------
 * Global accessibility primitive: visible focus ring.
 * Applied via :focus-visible so mouse users don't see the ring.
 * Safe to enable globally — overrides only when ring is needed.
 * ------------------------------------------------------------ */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
 * Tap-target floors on touch devices.
 * Targets the model picker / tool toggle buttons on /new which
 * are currently ~32–36px tall. Only kicks in on coarse pointers
 * so desktop layout is unchanged.
 * ------------------------------------------------------------ */
@media (pointer: coarse) {
  .btnModel,
  .btnType,
  .btnTool,
  .btnAction {
    min-height: var(--tap-target-min);
  }
}

/* ------------------------------------------------------------
 * Anchors used as buttons: hint pointer cursor + remove default
 * underline-on-hover, so they behave like buttons visually.
 * Scoped to role="button" so it never affects real links.
 * ------------------------------------------------------------ */
a[role="button"] {
  cursor: pointer;
}
a[role="button"]:hover {
  text-decoration: none;
}