/* ============================================================
   The brand layer of the theme (RB plan §2.2)
   ============================================================
   Loaded after theme.css, which stays the family's own. Maps the theme's
   tokens onto the brand's, which <x-brand-tokens /> writes from
   config/brand.php (App\Support\Brand\Palette derives the light and dark
   shades from the guide's colours). No colour is written here: a new
   primary or navy is a .env value, and brand:check tests its contrast.
   The app colour is never a status: Success, Warning and Error are the
   guide's status colours, and the indigo tone takes Info.
   Pages the app doesn't serve (the mockups, the docs) take the tokens from
   the file brand:tokens writes; the app's own, from config, come after it
   in <head> and win.
   ============================================================ */
@import url("../brand/tokens.css");

[data-theme="light"] {
  --accent-rgb:      var(--brand-light-accent-rgb);
  --accent:          var(--brand-light-accent);
  --accent-strong:   var(--brand-light-accent-strong);
  --on-accent:       var(--brand-light-on-accent);

  --bg:              var(--brand-light-bg);
  --sidebar-bg:      var(--brand-light-sidebar-bg);
  --sidebar-border:  var(--brand-light-border);
  --surface:         var(--brand-light-surface);
  --surface-2:       var(--brand-light-surface-2);
  --surface-hover:   var(--brand-light-surface-hover);
  --border:          var(--brand-light-border);
  --text-1:          var(--brand-light-text-1);
  --text-2:          var(--brand-light-text-2);
  --text-3:          var(--brand-light-text-3);
  --text-nav:        var(--brand-light-nav);
  --text-nav-active: var(--brand-light-nav-active);

  --emerald:         var(--brand-light-success);
  --emerald-dim:     rgba(var(--brand-light-success-rgb), 0.08);
  --amber:           var(--brand-light-warning);
  --amber-dim:       rgba(var(--brand-light-warning-rgb), 0.08);
  --rose:            var(--brand-light-error);
  --rose-dim:        rgba(var(--brand-light-error-rgb), 0.08);
  --violet:          var(--brand-light-info);
  --violet-dim:      rgba(var(--brand-light-info-rgb), 0.08);
  --slate:           var(--brand-light-slate);
  --slate-dim:       rgba(var(--brand-light-slate-rgb), 0.10);

  --shadow-card:     0 2px 12px rgba(var(--brand-light-shade-rgb), 0.06), 0 1px 3px rgba(var(--brand-light-shade-rgb), 0.04);
  --shadow-hover:    0 6px 28px rgba(var(--brand-light-shade-rgb), 0.10);
  --toggle-track:    rgba(var(--brand-light-shade-rgb), 0.08);
  --toggle-thumb:    var(--brand-light-toggle-thumb);
  --input-bg:        var(--brand-light-surface);
  --placeholder:     var(--brand-light-placeholder);
  --hero-bg:         linear-gradient(135deg, var(--brand-light-hero) 0%, color-mix(in srgb, var(--brand-light-hero-2) 70%, var(--brand-light-hero)) 60%, var(--brand-light-hero-2) 100%);
  --hero-accent:     var(--brand-light-hero-accent);
}

[data-theme="dark"] {
  --accent-rgb:      var(--brand-dark-accent-rgb);
  --accent:          var(--brand-dark-accent);
  --accent-strong:   var(--brand-dark-accent-strong);
  --on-accent:       var(--brand-dark-on-accent);

  --bg:              var(--brand-dark-bg);
  --sidebar-bg:      var(--brand-dark-sidebar-bg);
  --sidebar-border:  var(--brand-dark-border);
  --surface:         var(--brand-dark-surface);
  --surface-2:       var(--brand-dark-surface-2);
  --surface-hover:   var(--brand-dark-surface-hover);
  --border:          var(--brand-dark-border);
  --text-1:          var(--brand-dark-text-1);
  --text-2:          var(--brand-dark-text-2);
  --text-3:          var(--brand-dark-text-3);
  --text-nav:        var(--brand-dark-nav);
  --text-nav-active: var(--brand-dark-nav-active);

  --emerald:         var(--brand-dark-success);
  --emerald-dim:     rgba(var(--brand-dark-success-rgb), 0.12);
  --amber:           var(--brand-dark-warning);
  --amber-dim:       rgba(var(--brand-dark-warning-rgb), 0.12);
  --rose:            var(--brand-dark-error);
  --rose-dim:        rgba(var(--brand-dark-error-rgb), 0.12);
  --violet:          var(--brand-dark-info);
  --violet-dim:      rgba(var(--brand-dark-info-rgb), 0.12);
  --slate:           var(--brand-dark-slate);
  --slate-dim:       rgba(var(--brand-dark-slate-rgb), 0.14);

  --shadow-card:     0 4px 24px rgba(var(--brand-dark-shade-rgb), 0.4);
  --shadow-hover:    0 8px 36px rgba(var(--brand-dark-shade-rgb), 0.55);
  --toggle-thumb:    var(--brand-dark-toggle-thumb);
  --input-bg:        var(--brand-dark-surface);
  --placeholder:     var(--brand-dark-placeholder);
  --hero-bg:         linear-gradient(135deg, var(--brand-dark-hero) 0%, color-mix(in srgb, var(--brand-dark-hero-2) 50%, var(--brand-dark-hero)) 50%, var(--brand-dark-hero-2) 100%);
  --hero-accent:     var(--brand-dark-hero-accent);
}

/* theme.css writes a few colours of its own (the family's glow, its status borders, the text on
   an amber count); here they follow the tokens instead. */
.cl-orb-1 { background: radial-gradient(circle, rgba(var(--accent-rgb), .10) 0%, transparent 70%); }
.cl-orb-2 { opacity: .5; }
[data-theme="dark"] .fq-topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-theme="light"] .cl-theme-seg.active { background: var(--surface); box-shadow: 0 1px 4px rgba(var(--brand-light-shade-rgb), .14); }
.cl-nav-badge.amber { color: var(--brand-navy); }
.pl-btn.success, .pl-btn.warn, .pl-btn.danger,
.pl-flash.success, .pl-flash.danger, .pl-flash.warn,
.pl-badge.active, .pl-badge.violet, .pl-badge.amber, .pl-badge.rose,
.btn-success, .btn-warning, .btn-danger,
.badge-active, .badge-success, .badge-warning, .badge-pending, .badge-danger, .badge-rejected,
.alert-success, .alert-danger, .alert-warning,
.st-status-pill.ok, .st-status-pill.warn, .st-status-pill.err { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.pl-action-btn.success:hover, .pl-action-btn.warn:hover, .pl-action-btn.danger:hover { border-color: color-mix(in srgb, currentColor 40%, transparent); }
.progress-fill.warn { background: var(--amber); }
.progress-fill.danger { background: var(--rose); }
::placeholder { color: var(--placeholder); }

/* The brand's artwork (<x-brand-logo tone="auto">): the light version on light grounds, the dark one on dark. */
.brand-logo { display: block; max-width: 100%; height: auto; }
.brand-logo.brand-tone-dark { display: none; }
[data-theme="dark"] .brand-logo.brand-tone-light { display: none; }
[data-theme="dark"] .brand-logo.brand-tone-dark { display: block; }

/* The short name (RB-E, <x-brand-short>): the company's mark, the name in Figtree 800, the by-line
   small beside it on its baseline (never under 9.5 px, so it reads). Its size is the font size. */
.td-lock { display: inline-flex; align-items: center; gap: .34em; font-family: var(--font-sans); line-height: 1; white-space: nowrap; }
.td-lock .td-mark { display: block; height: 1.02em; width: auto; flex-shrink: 0; }
.td-lock .td-mark.brand-tone-dark { display: none; }
[data-theme="dark"] .td-lock .td-mark.brand-tone-light { display: none; }
[data-theme="dark"] .td-lock .td-mark.brand-tone-dark { display: block; }
.td-lock .td-words { display: inline-flex; align-items: baseline; gap: .55em; }
.td-lock .td-name { font-weight: 800; letter-spacing: -.04em; font-size: 1em; }
.td-lock .td-by { font-weight: 600; font-size: max(.34em, 9.5px); letter-spacing: .03em; }
.td-lock.td-light, .td-lock.td-auto { color: var(--text-1); }
.td-lock.td-light .td-by, .td-lock.td-auto .td-by { color: var(--text-3); }
.td-lock.td-dark { color: var(--brand-white); }
.td-lock.td-dark .td-by { color: var(--brand-line-strong); }
.cl-sidebar-logo .cl-brand .td-lock { font-size: 21px; }
.auth-hero .auth-brand .td-lock { font-size: 26px; }
.cl-part-of .td-lock { font-size: 13px; }
.cl-part-of .td-lock .td-mark { height: 1em; }

/* The sidebar's lockup (the brand's artwork, never retyped), its tile when collapsed, and "Part
   of" the company at the foot. */
.cl-sidebar-logo .cl-brand { min-width: 0; flex: 1; }
.cl-sidebar-logo .cl-brand .brand-logo { width: 100%; max-width: 186px; height: auto; }
.cl-sidebar-logo .cl-brand .cl-logo-sub { margin-top: 6px; }
.cl-sidebar-logo .cl-brand-mark { display: none; width: 30px; height: 30px; flex-shrink: 0; }
.cl-sidebar.collapsed .cl-sidebar-logo .cl-brand { display: none; }
.cl-sidebar.collapsed .cl-sidebar-logo .cl-brand-mark { display: block; }
.cl-part-of { display: flex; align-items: center; gap: 7px; padding: 10px 6px 2px; font-size: 10.5px; color: var(--text-3); text-decoration: none; white-space: nowrap; }
.cl-part-of:hover { color: var(--text-2); text-decoration: none; }
.cl-part-of .brand-logo { height: 12px; width: auto; }
.cl-sidebar.collapsed .cl-part-of { display: none; }
@media (max-width: 900px) {
  .cl-sidebar.collapsed .cl-sidebar-logo .cl-brand { display: block; }
  .cl-sidebar.collapsed .cl-sidebar-logo .cl-brand-mark { display: none; }
  .cl-sidebar.collapsed .cl-part-of { display: flex; }
}

/* The sign-in panel: the app colour's gradient (deep where the lockup sits), the lockup for dark
   grounds with the statement under it, the page's words, the status line. Accent words on it take
   a pale tint of the app colour in light mode, the on-dark version in dark mode. */
.auth-hero .auth-brand .brand-logo { height: 30px; width: auto; }
.auth-hero .auth-brand-text .sub { margin-top: 8px; }
.auth-hero .auth-hero-title em,
.auth-hero .auth-hero-eyebrow { color: var(--hero-accent); }
.auth-hero .auth-hero-eyebrow::before { background: var(--hero-accent); }
.auth-hero-meta .dot { background: var(--brand-dark-success); box-shadow: 0 0 8px var(--brand-dark-success); }   /* the bright green on either ground */

/* The panel's texture, as Clearance has it: a fine grid with a glow in the corner, here drawn in the panel's own
   accent (theme.css draws it in --accent, which in light mode is the panel's navy, so it never showed). The grid
   fades out away from the lockup; a second, cobalt glow sits low on the far side; the parent's mark is a faint
   watermark (.auth-tex, in AuthShell.vue). The glows drift slowly unless motion is reduced. */
.auth-hero::before {
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--hero-accent) 22%, transparent) 1.2px, transparent 1.6px),
    linear-gradient(color-mix(in srgb, var(--hero-accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 85% 10%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 120% 90% at 85% 10%, #000 30%, transparent 85%);
}
.auth-hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 24%, transparent) 0%, transparent 62%);
  animation: authGlow 18s ease-in-out infinite alternate;
}
.auth-tex { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.auth-tex::before { content: ''; position: absolute; left: -200px; bottom: -240px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(var(--brand-cobalt-rgb), .38) 0%, transparent 62%);
  animation: authGlow 22s ease-in-out infinite alternate-reverse; }
.auth-tex::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hero-accent) 4%, transparent) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(200deg, transparent 45%, #000 100%); mask-image: linear-gradient(200deg, transparent 45%, #000 100%); }
.auth-tex img { position: absolute; right: -70px; bottom: -60px; width: 380px; height: auto; opacity: .06; transform: rotate(-8deg); }
@keyframes authGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .auth-hero::after, .auth-tex::before { animation: none; } }

/* theme.css gives badges and buttons a display value, which would override the
   hidden attribute; make hidden always win. */
[hidden] { display: none !important; }