/* ============================================================================
   NOTAI design tokens — a thin semantic layer over Radzen's Material theme.

   Colour tokens reference existing --rz-* variables so they follow the
   light/dark stylesheet swap performed by <RadzenAppearanceToggle> with no
   [data-theme] hook and no prefers-color-scheme. Every colour token also
   carries a literal fallback in case a --rz-* var is ever absent.

   Non-colour tokens (spacing, radii, control heights, content widths, motion,
   typography scale) are theme-neutral literals.

   Do NOT put shell / app-bar / sidebar / navigation rules in this file or in
   notai-foundation.css — those belong in MainLayout.razor.css (Phase 2).
   ========================================================================== */

:root {
    /* ---- Surfaces ------------------------------------------------------- */
    --notai-canvas:          var(--rz-body-background-color, #f5f5f5);
    --notai-surface:         var(--rz-base-background-color, #ffffff);
    --notai-surface-raised:  var(--rz-panel-background-color, var(--rz-base-background-color, #ffffff));
    --notai-surface-sunken:  var(--rz-body-background-color, #f5f5f5);

    /* ---- Text -------------------------------------------------------------- */
    --notai-text:            var(--rz-text-color, #212121);
    --notai-text-secondary:  var(--rz-text-secondary-color, #424242);
    --notai-text-muted:      var(--rz-text-tertiary-color, #757575);
    --notai-text-disabled:   var(--rz-text-disabled-color, #bdbdbd);
    --notai-text-on-accent:  #ffffff;   /* fixed — see --notai-primary note below */

    /* ---- Lines & focus -------------------------------------------------- */
    --notai-border:                var(--rz-border-normal, 1px solid #e0e0e0); /* shorthand: use as `border: var(--notai-border)` */
    --notai-border-color:          var(--rz-base-300, #e0e0e0);                /* colour only */
    --notai-border-strong-color:   var(--rz-base-400, #bdbdbd);
    /* Follows the theme — a focus OUTLINE has no white-text problem, and Radzen's
       pastel dark primary is highly visible as a ring on a dark background. */
    --notai-focus-ring:            var(--rz-primary, #4338ca);

    /* ---- Semantic states --------------------------------------------------- */
    /* NOT --rz-primary: Radzen's Material *Dark* primary is a pastel (#bb86fc)
       that fails contrast with white text (~1.9:1), and there is no DOM theme
       hook to switch a token on. So the NOTAI primary is a fixed indigo that
       white reads on in BOTH themes (#4338ca + #fff ≈ 8:1). A constant brand
       primary across themes is the norm (Stripe / Linear / GitHub). */
    --notai-primary:          #4338ca;
    --notai-primary-hover:    #3730a3;
    --notai-primary-subtle:   rgba(67, 56, 202, 0.14);

    --notai-success:          var(--rz-success, #4caf50);
    --notai-success-subtle:   var(--rz-success-lighter, rgba(76, 175, 80, 0.16));

    --notai-warning:          var(--rz-warning, #ff9800);
    --notai-warning-subtle:   var(--rz-warning-lighter, rgba(255, 152, 0, 0.2));

    --notai-danger:           var(--rz-danger, #f44336);
    --notai-danger-subtle:    var(--rz-danger-lighter, rgba(244, 67, 54, 0.2));

    --notai-info:             var(--rz-info, #2196f3);
    --notai-info-subtle:      var(--rz-info-lighter, rgba(33, 150, 243, 0.2));

    --notai-link:             var(--rz-link-color, #e31c65);

    /* ---- Elevation (Material shadows, identical in both themes) --------- */
    --notai-shadow-1: var(--rz-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12));
    --notai-shadow-2: var(--rz-shadow-3, 0 3px 4px rgba(0, 0, 0, 0.14), 0 1px 8px rgba(0, 0, 0, 0.12));

    /* ---- Spacing scale (4 / 8) --------------------------------------------- */
    --notai-space-0: 0;
    --notai-space-1: 4px;
    --notai-space-2: 8px;
    --notai-space-3: 12px;
    --notai-space-4: 16px;
    --notai-space-5: 24px;
    --notai-space-6: 32px;
    --notai-space-7: 48px;
    --notai-space-8: 64px;

    /* ---- Control heights ---------------------------------------------------- */
    --notai-control-h-sm: 28px;
    --notai-control-h-md: 36px;
    --notai-control-h-lg: 44px;

    /* ---- Radii (three) ---------------------------------------------------- */
    --notai-radius-sm: 4px;
    --notai-radius-md: 8px;
    --notai-radius-lg: 14px;

    /* ---- Content widths -------------------------------------------------- */
    --notai-content-narrow:   640px;
    --notai-content-standard: 1080px;
    --notai-content-wide:     1400px;

    /* ---- Motion --------------------------------------------------------- */
    --notai-motion-fast: 120ms;
    --notai-motion-base: 200ms;
    --notai-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Typography scale (weights/spacing do the work, not size) ------- */
    --notai-font-family:     var(--rz-text-font-family, Roboto, sans-serif);
    --notai-font-title:      1.375rem;  /* 22px  page title    */
    --notai-font-section:    1rem;      /* 16px  section title */
    --notai-font-body:       0.875rem;  /* 14px  body          */
    --notai-font-secondary:  0.8125rem; /* 13px  supporting    */
    --notai-font-label:      0.8125rem; /* 13px  form label    */
    --notai-font-caption:    0.75rem;   /* 12px  caption       */

    --notai-weight-normal:   400;
    --notai-weight-medium:   500;
    --notai-weight-semibold: 600;

    /* ---- Shell metrics (consumed in Phase 2) --------------------------- */
    --notai-header-h: 64px;
    --notai-sidebar-w: 260px;
}